JavaScript
2021-02-13 11:17
YPE html>
标签：自定义 otto 内容 移除 nts radio ide pytho set
JavaScript
HTML、CSS只能写出静态效果，JS可以制作动态效果
- JavaScript，是一门编程语言，浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行。
- DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等。
- BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。
JavaScript是编程语言，DOM和BOM是两个模块，利用JavaScript语言再结合DOM、BOM模块可以让我们的页面出现动态的效果。
1.1 js基础
引入方式：
Script代码块，只能在当前页面使用。独立js文件，可以被多个引入之后使用。
推荐把css在header引入，js代码放在body标签的底部,这样先加载页面文字和样式，体验较好。
js中单行注释用 // ；多行注释用 /* */
局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
常见数据类型
数字（Number）：JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
// 转换
parseInt("1.2"); // 将某值转换成数字，不成功则NaN
parseFloat("1.2"); // 将某值转换成浮点数，不成功则NaN
/*
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
*/
字符串(String)
声明
var name = "wupeiqi";
var name = String("wupeiqi");
var age_str = String(18);
// 常用方法
var name = "wupeiqi";
var value = names[0] // 索引
var value = name.length // 获取字符串长度
var value = name.trim() // 去除空白
var value = name.charAt(index) // 根据索引获取字符
var value = name.substring(start,end) // 根据索引获取子序列
布尔类型（Boolean）
var status = true;
var status = false;
/*
在js中进行比较时，需要注意：
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
*/
数组（Array）
//声明
var names = [‘a‘, ‘b‘, ‘c‘]
var names = Array(‘anna‘, ‘nana‘)
// 常见方法
names[0] // 索引
names.push(ele) // 尾部追加元素
var ele = names.obj.pop() // 尾部移除一个元素
names.unshift(ele) // 头部插入元素
var ele = obj.shift() // 头部移除一个元素
names.splice(index,0,ele) // 在指定索引位置插入元素
names.splice(index,1,ele) // 指定索引位置替换元素
names.splice(index,1) // 指定位置删除元素
names.slice(start,end) // 切片
names.reverse() // 原数组反转
names.join(sep) // 将数组元素连接起来以构建一个字符串
names.concat(val,..) // 连接数组
names.sort() // 对原数组进行排序
字典（对象Object）
// 声明
info = {
name:‘安娜‘,
"age":18
}
// 常用方法
var val = info[‘name‘] // 获取
info[‘age‘] = 20 // 修改
info[‘gender‘] = ‘male‘ // 新增
delete info[‘age‘] // 删除
其他（null、undefine）
-
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”，相当于Python的None。
-
undefined是一个特殊值，表示变量声明但未定义。
var name;
console.log(typeof(name));
条件
if,else，用于判断。
var age = 18;
if(age =18 and 1 == 1){
}else if(age>=30){
}else{
}
switch,case，用于判断等于某些值。
var num = 18;
switch(num){
case 10:
console.log(‘未成年‘);
break;
case 18:
console.log(‘成年‘);
break;
case 35:
console.log(‘油腻老男人‘);
break;
case 100:
console.log(‘....‘);
break;
default:
console.log(‘太大了‘);
}
循环语句
-
for(var i in [‘国产‘,‘日韩‘,‘欧美‘])，默认生成索引，适用于：字符串、元组、字典。
-
for(var i=0;i
异常处理
在JavaScript的异常处理中有两个注意事项：
- 主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
- catch只能破获一次，如果想要对异常精细化处理可以在catch代码块中再做类型判断。
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
var name = ‘‘
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
函数
JavaScript中的函数可以简单概括为以下三类：
- 普通函数：
function func(arg){ return arg + 1; }
- 匿名函数
function (arg){ return arg + 1; } // 一般用于当做参数使用，例如：设置定时器 setInterval(function(){},1000)
- 自执行函数，自动触发执行。
(function(arg){ console.log(arg); })(‘anna‘)
json 序列化（将对象和字符串之间进行转换。）
-
JSON.stringify(object)，序列化 -
JSON.parse(str)，反序列化
网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，就需要对对象进行序列化然后发送。
1.2 DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。更直白一点讲：DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能，JavaScript结合DOM可以对HTML中的标签进行操作。
DOM对象：https://www.runoob.com/jsref/dom-obj-document.html
选择器
- 直接查找
document.getElementById(arg) // 根据ID获取一个标签对象 document.getElementsByClassName(arg) // 根据class属性获取标签对象集合 document.getElementsByName(arg) // 根据name属性值获取标签对象集合 document.getElementsByTagName(arg) // 根据标签名获取标签对象集合
- 间接查找
var tag = document.getElementById(arg); tag.parentElement // 找当前标签对象的父标签对象 tag.children // 找当前标签对象的所有子标签对象 tag.firstElementChild // 找当前标签对象的第一个子标签对象 tag.lastElementChild // 找当前标签对象最后一个子标签对象 tag.nextElementtSibling // 找当前标签对象下一个兄弟标签对象 tag.previousElementSibling // 找当前标签对象上一个兄弟标签对象
DOM 元素对象
DOM元素属性和方法：https://www.runoob.com/jsref/dom-obj-all.html
element.appendChild()为元素添加一个新的子元素element.removeChild()删除一个子元素element.replaceChild()替换一个子元素element.remove()删除这个元素nodelist.length返回节点列表的节点数目。（元素之间的空格是文本，文本是节点）如删除表格一行数据：
文本操作
对标签内部文本进行操作时，可以通过 innerText 和 innerHTML来进行。
- innerText
标签对象.innerText，读取标签内容（仅文本）。标签对象.innerText="an"，修改标签内容（仅文本）。- innerHTML
标签对象.innerHTML，读取标签内容（含标签）。标签对象.innerText="an"，修改标签内容（标签、文本）。属性对象
值操作针对与用户交互相关的标签，其中内部使用value属性进行操作。
input,textarea,select
单选框radio复选框checkbox，通过value可以取值。但在应用时常常是以选择形式出现，所以在使用过程中还会去判断他是否已被选中。
扩展：标签对象.checked可以对选中状态进行读取和设置。var radios = document.getElementsByName(‘gender‘); for (var i = 0; iclass 属性操作
DOM中主要提供了三个帮助我们操作class属性值的功能：
标签对象.className，class属性对应的值直接操作。标签对象.classList.remove(cls)，class属性对应值删除某个样式。标签对象.classList.add(cls)，class属性中添加样式。模态对话框
Title 登录
style 样式操作
如果想要对样式操作的粒度更细一些，可以使用style样式操作，他比class属性对样式的操作粒度更细。
document.getElementById(‘header‘).style.backgroundColor = ‘green‘;点赞+1效果
function doFavor(self) { var plusTag = document.createElement(‘span‘); var fontSize = 10; var marginLeft = 10; var marginTop = 10; var opacity = 1; plusTag.innerText = "+1"; plusTag.style.color = ‘green‘; plusTag.style.position = ‘absolute‘; plusTag.style.fontSize = fontSize + ‘px‘; plusTag.style.marginLeft = marginLeft + ‘px‘; plusTag.style.marginTop = marginTop + ‘px‘; plusTag.style.opacity = opacity; self.appendChild(plusTag); var interval = setInterval(function() { fontSize += 5; marginLeft += 5; marginTop -= 5; opacity -= 0.2; plusTag.style.fontSize = fontSize + ‘px‘; plusTag.style.marginLeft = marginLeft + ‘px‘; plusTag.style.marginTop = marginTop + ‘px‘; plusTag.style.opacity = opacity; if (opacity
DOM属性对象（element.attributes[0]）
在 HTML DOM (Document Object Model) 中, 所有的都是 节点：
- 文档是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性都是属性节点
- 插入到 HTML 元素中的文本为文本节点
- 注释是注释节点
//获取属性值 document.getElementsByTagName("button")[0].attributes[0].value; //改变属性值 var h=document.getElementsByTagName("H1")[0]; h.getAttributeNode("style").value="color:green";
事件
DOM中可以为标签设置事件，给指定标签绑定事件之后，只要对应事件被处罚，就会执行对应代码。常见事件有：
- onclick，单击时触发事件
- ondblclick，双击触发事件
- onchange，内容修改时触发事件
- onfocus，获取焦点时触发事件
- onblur，失去焦点触发事件
其他事件：https://www.runoob.com/jsref/dom-obj-event.html
左侧菜单点击切换:
CSS学习 搜索关键字：
function getFocus(self) { self.className = ‘black‘; if (self.value === ‘请输入关键字‘ || self.value.trim().length === 0) { self.value = ‘‘; } } function leave(self) { if (self.value.length === 0) { self.value = ‘请输入关键字‘; self.className = ‘gray‘; } else { self.className = ‘black‘; } }
1.3 BOM
BOM（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能。更直白一点讲：BOM相当于是一个模块，提供了关于浏览器操作的功能。
提示框
-
alert，提示框。 -
confirm，确认框（有确认，取消）。
浏览器URL
-
location.href，获取当前浏览器URL。 -
location.href = "http://www.mamicode.com/url"，设置URL，即：重定向。 -
location.reload()，重新加载，即：刷新页面。
定时器
-
setInterval(function(){},1000)，创建多次定时器。（1000为1秒） -
clearInterval(定时器对象)，删除多次定时器。 -
setTimeout(function(){},1000)，创建单次定时器。 -
clearTimeout(定时器对象)，删除单次定时器。
其他BOM：https://www.runoob.com/jsref/obj-window.html
JavaScript
标签：自定义 otto 内容 移除 nts radio ide pytho set
原文地址：https://www.cnblogs.com/Neroi/p/12727134.html