JavaScript
# JavaScript
## 基础：变量
js声明变量使用var Ctrl+Atl+L 代码格式化
js的标签使用：<script></script>
js中的字符串类型的值都是用双引号或单引号
变量作用：用来操作数据的（可以存储，可以读取）
变量声明方式：var 变量名=值888888 88；
true=真 null=空 alert()=信息框
console.log()=类似调试输出 console.dir() 打印该元素的所有属性
单行注释// 多行注释/*注释内容*/
## 变量名的注意问题
变量的名字要有意义
变量名有一定的规范：一般以字母，$符号，下划线开头，中间或者后面 可以有$符号，字母，数字
变量名一般都是小写字母
变量名如果是多个单词，第一个单词的首字母是小写的，后面的所有单词的首字母都是大写的，这种命名方式称为：驼峰命名法。例子：userName
不能使用关键字（Js自带的词）
不会单词用拼音，拼音也要遵循驼峰命名法
## Js的数据类型有哪些？
类型有：number,string,boolean,null,undefined,object
number(整数型和小数) 整数型 NaN（不是一个数字）
string（文本型） 字符串型 推荐使用单引号
boolean 布尔类型（逻辑型）true（真=1） false（假=0）
null 空类型，其实就是0或“”
undefined 未定义，值只有一个：undefined
object 对象
## 如何获取数据类型？
使用typeof来获取 typeof(变量名) typeof 变量名 这两种都可以
## Js中有哪些进制？
var num=10; 十进制
var num=012; 八进制
var num=0x123; 十六进制
## Number最大和最小值
Number.MAX_VALUE 最大值 Number.MIN_VALUE 最小值
== 两个等号相当于是否等于 不要用小数和小数相加，因为是个BUG
## String的一些问题
如果用引号，需要用转移符，类似正则表达式
msg.length返回字符串长度
如果字符串型和整数型相加，js会自动把整数型转换成字符串型进行相加
## 数据类型的转换
### 转换字符串型
变量名.toString() 将其他类型的变量转换成字符串型（类似到文本）
如果遇到需要把null和undefined转换成字符串类型，String(变量名)
字符串拼接，变量+""，和空文本相加，就是文本，如果需要改变优先级，只需要加个括号，跟易语言的运算方式一样
### 转换整数型
Number(变量名) 把字符串类型转换成整数型，只能转换数字类的文本，可以转换布尔类型，结果是0或1
parseInt(变量名) 无法转换布尔类型，结果是NaN，可以转换包含非纯数字的文本，数字必须在前面，把不是数字的文本删除掉，进行返回，只返回整数文本（类似到数值）可以用来取整数，取文字中的整数 parseint(小数变量)
parseFloat(变量名) 无法转换布尔类型，可以保留小数（到小数）其他跟Int一样
取正负数，+或-，(+变量名)，不可以转换非纯数字文本，可以转换布尔类型
在用+的时候，如果前面变量是整数型，后面的是字符串型，文本型会转整数型
如果前面的变量是字符串型，后买的是整数型，整数型会转字符串型
### 转换布尔类型
Boolean(变量名)
转换成false的情况：null undefined NaN ' '空字符串 0 其他情况都是true
## 一元运算符
前置 ++和-- 前加加就是先加，然后才用这个变量；
++变量 自身先进行相加，那么变量的值就变了，然后参与运算
后置 ++和-- 后加加就是先用这个变量，然后在对这个变量做自增。
变量++ 先运算，后自身相加，那么运算结果与++无关系
## 逻辑运算符
&& 与 （两个变量必须同时是真，结果才为真，如果不同就是假）（类似且）
|| 或 （两个变量一个为真，结果就为真） （类似易语言或）
! 非 (就是取反，如果变量是真，取反后就是假)
## 关系运算符
=== 对两个变量的类型先进行判断是否一样，如果一样继续判断变量值
!=== 对两个变量的类型先进行判断，如果一样判断变量值是否不相等
判断跟易语言有差距，因为变量类型不一样，可以自动转换变量类型
*=就是乘 /=除 +=加 -=减 简写的加减乘除 2+=5 结果就是7
## 三元运算符
a > b ? a : b 变量a和变量b进行逻辑判断，真就输出a，假就输出b
其实就是如果的简写，？代表前面是判断，：代码输出A或B
## switch语句
switch(变量){
case 满足条件:
运行代码位置
break;
case 1: //变量=1的时候，就运行和break中间的代码
alert("当前为1")
break;
default: //这是所有不满足的话，运行这一个，类似else
break;
} //其实类似于易语言判断
## 循环语句
while （类似判断循环）
do...while （类似循环判断）
for （类似变量循环） for(变量起始值;判断语句;变量递增值 ){}
for的变量递增，如果+1就++，如果+2，就i=i+2,判断如果是真循环，假跳出
break （类似跳出循环）
continue （类似到循环尾）
## DeBug调试
Watch 点+可以输入监控变量的名字，会显示变量值的变化
## 数组
[] 数组的声明，在[]里面用逗号来分割，例子：[1,2,3,4,5,6] 数组起始索引是0
数组名.length （类似取数组成员数）
数组如果需要修改某个成员时，只要替换成员的值一样，用法跟易语言一样
数组如果需要增加成员时，直接给数组索引输入新成员的索引，然后进行赋值
例子：A数组，A=['a','b','c','d','e']，现在数组有5个成员，A[5]='f',这样子就增加成员了
数组重点在于和易语言的索引起始值不一样，Js索引起始值是0！0！0！
Js数组，增加成员最好用push
数组名.length = 0 ; （类似易语言清空数组）
var 数组名 = [] ； 定义一个空数组
## 函数
function 需要定义的函数名(){ 函数代码 } (类似子程序，模块)
函数名(); 就可以调用
function 函数名(形参,形参1,形参2) { 函数代码 } 带参数的函数 (类似子程序，模块)
函数名(a,b,c);
return 返回值（类似易语言返回）
arguments 的作用与妙用
每个函数都有一个arguments属性，表示函数的实参集合，这里的实参是重点，就是执行函数时实际传入的参数的集合。
arguments不是数组而是一个对象，但它和数组很相似，所以通常称为类数组对象，以后看到类数组其实就表示arguments。
arguments有length属性，可以用arguments[length]显示调用：
1 function func(){
2 for(var i=0;i<arguments.length;i++){
3 console.log(arguments[i]);
4 }
5 }
6
7 func("a",17,[1,2,3],{name:"javascript",type:"language"});
8 /*-----------------------------------------------------------*/
9 /*
10 a
11 17
12 [1, 2, 3]
13 {name: "javascript", type: "language"}
14 */
自调用函数的方式
(function(){
函数代码 })() 把函数扩起来，进行自调用，（）是调用
## 代码规范
1.命名规范
变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词
2.变量规范
操作符的前后要有空格
var name = 'zs';
3.注释规范
// 这里是注释 在//和内容中间有空格
4.空格规范
花括号之前也要有空格
## 作用域
作用域：变量或者函数可以起作用的访问 （其实就是，局部变量，全局变量）
在函数内部，不用var 声明的变量，就是全局变量
块级作用域{}内的是 let作用域
## 对象
以{}来声明对象
var a = {
name:'赵云',
age:18,
sex:'男'
}; a.name // 就是调用对象，在代码里面无类型限制
var dog = {
name:'puppy',
type:'中华田园犬', //这个是属性
bark:function(){ //这个是方法
this.name+'汪汪汪'；
}
this 在方法中代表的是当前对象 this.属性名
访问方法和属性一样，对象名.属性 对象名.方法 对象名[‘属性’] 对象名[‘方法‘] 两种方法
new
this 出现在以下位置，分别代表什么
函数中 --- this指向windows
在方法中 ---- this指向这个方法所属的对象
构造函数中 --- 就是构造函数创建的对象
事件处理函数中的this -- 谁调用的该事件就指向谁
for in 可以遍历对象的成员 in就是找对象的所有属性
var obj = {
name:"张三",
sex:"男",
age:18
}
for(var i in obj){ // for in 的使用方法
console.log(obj[i])
}
删除对象
delete 对象名.属性名； 可以删除对象里面的任何属性和方法
构造函数
构造函数的名称第一个字母要大写
function Demo(a,b,c){
this.name = a;
this.sex = b;
this.age = c;
}
var name = new Demo("哈哈","女","18") // 创建必须用new创建
## 内置对象
### Math对象 具有数学常熟和函数的属性和方法，都是以静态成员的方式提供
Math.random() //返回一个浮点数，返回0-1之间的一个浮点数，例如(0.513061532)
Math.floor() //向下取整数
Math.ceil() //向上取整数
Math.PI() //圆周率
Math.random() //生成随机数 Math.random() * 5 ------（0,5）随机数
Math.round() //取整，四舍五入
Math.abs() //绝对值 这些可以去MDN去查询详细使用方法和案例
Math.max()/Math.min() //求最大和最小值 Math.max(1,2,3,5) 返回5
Math.sin()/Math.cos() //正弦/余弦
Math.trunc() //删除数字的小数部分，不区分正负数
Math.power()/Math.sqrt() //求指数次幂/求平方根
### Date对象 是一个构造函数，首先要通过new Date()来创建日期实例
var aa = +new Date() // 直接返回时间戳
Date.now() // 直接返回时间戳
toString() //转换成字符串
valueOf() //获取毫秒值
//下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString() // 国际日期
toTimeString() // 国际时间
toLocaleDateString() // 中国日期
toLocaleTimeString() // 中国时间
获取日期指定部分
getTime() //返回毫秒数和valueOF()结果一样 // 时间戳
getMilliseconds() // 返回 毫秒
getSeconds() //返回0-59 秒
getMinutes() //返回0-59 分钟
getHours() //返回0-23 小时
getDay() //返回星期几 0=周日 1=周一
getDate() //返回当前月的第几天
getMonth() //返回月份 从0开始，需要+1
getFullYear() //返回4位的年份
instanceof instance 实例 of的
变量名 instanceof Date 判断变量是否满足对象的要求，不满足返回假
var aa = {}
log(aa instanceof Object) // 判断aa这个变量是不是对象
log(aa instanceof Array) // 判断aa这个变量是不是数组
## 数组对象
### 栈操作（最先进去的最后走，最后进去的先出去，类似死胡同）
数组名.push（增加的数组成员，放到数组最后面）
数组名.pop() 取出数组中最后一个元素，数组成员进行修改
Array.isArray(数组名) 判断是否是数组
### 队列操作（最先进去的，最先走，类似排队）
shift() 取出数组中的第一个元素，修改数组成员数量
unshift() 在数组最前面插入项，返回数组长度
### 排序方法
reverse() 数组反转 ，需要一个数组来接收反转的数组
sort() 冒泡排序数组成员
var aar = [1,5,15,66,7,35]
aar.sort(function(a,b){ // 升序
return a - b
})
aar.sort(function (a,b){ // 降序
return b - a
})
### 操作方法
concat() //把参数拼接到当前数组拼接，多个数组进行合并
slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice() //删除数组成员或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
### 位置方法
indexOf()、lastIndexOf() //如果没找到返回-1
### 迭代方法 不会修改原数组
every()、filter()、forEach()、map()、some()
### 方法将数组的所有元素连接到一个字符串中
join()
## 字符串对象的常用方法
### 字符方法
charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码, 相当于获取键代码
str[0] //HTML5，IE8+支持 和charAt()等效
### 字符串操作方法
concat(str1,str2,str3) //拼接字符串，等效于+，+更常用
slice() //从start位置开始，截取到end位置，end取不到
substring() //从start位置开始，截取到end位置，end取不到
substr() //从start位置开始，截取length个字符
### 位置方法
indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找，只找第一个匹配的
### 去除空白
trim() //只能去除字符串前后的空白
### 大小写转换方法
to(Locale)UpperCase() //转换大写
to(Locale)LowerCase() //转换小写
### 其它
search() //搜索
replace() //类似替换文本，两个参数，前面欲被替换的文本，后面需要替换的文本
split() //类似分割文本
fromCharCode() 接受一个指定的 Unicode 值，然后返回一个字符串
// String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串
# DOM
document 文档对象
变量名 = document.getElementById() 根据ID获取元素 只能docunment调用
document.getElementsByTagName(标签名 ‘div’) 获取网页中所有标签的动态集合 伪数组
document.getElementsByClassName(Class名) 获取网页中所有的Class集合
document.getElementsByName(Name名字) 获取网页中所有Name名字的标签
document.querySelector(class名，ID名字，标签名) 根据选择器查找元素 只获取第一个，返回第一个选择器
document.querySelectorAll(class名) 根据选择器查找元素，返回所有Class
## 属性操作
### 非表单元素的属性
href、title、id、src、classname
在DOM里面Class的名字叫：ClassName
```
<body>
<button src = "http://www.baodu.com">我是按钮</button>
<div>我是文字</div>
<script>
var dv = document.querySelector("div")
var bt = document.querySelector("button")
dv.onclick = function (){
dv.innerText = "我改变了"
}
bt.onclick = function (){
bt.innerHTML = "<div>我变成了DIV</div>"
bt.src = "http://www.qq.com" // 需要支持src的控件，这个只是演示
}
console.log(dv.innerText) // 只获取文字
console.log(dv.innerHTML) // 保留格式
</script>
</body>
```
innerHTML 显示内容以HTML为主，获取的内容也会包含标签，替换后显示HTML的格式
innerText 显示的内容以文本为主，获取的内容只包含文本，替换数据也只显示文本
textContent 跟text一样，只是因为兼容问题，所以低版本的不支持text，支持content，火狐
变量名.onclick() 当点击按钮后发生什么事件,on是事件的意思，后面是功能
```
<body>
<div>按钮</div>
<script>
var dv = document.querySelector("div")
var dv1 = document.querySelector(".className")
var dv1 = document.querySelector("#id")
dv.onclick = function(){
console.log("被点击了~")
dv.disabled = true;
dv.style.backgroundColor = "red"
dv.className = "更换class"
}
</script>
</body>
```
## 表单元素属性
disabled 禁用属性
checked 复选框选中属性 这三个CSS 在JS里面是布尔类型 真为选择，假为不选
selected 下拉菜单选中属性
如果大量拼接字符串，最好用数组来拼接，join() 数组拼接
变量名.onfocus 获取焦点的事件，变量名.onfocus = function(){}
变量名.onblur 失去焦点的事件
变量名.onmouseover 鼠标进入事件
变量名.onmouseout 鼠标离开事件
变量名.onmousedown 鼠标按下
变量名.onmouseup 鼠标松开
变量名.onmouseenter 跟over用法一样，只是不触发事件冒泡
变量名.onmouseleave 跟out用法一样，只是不触发事件冒泡
阻止超链接跳转 return false 就可以了，返回假就不会跳转
## 自定义属性
获取自定义属性的值
变量名.getAttribute('data-自定义属性的名字') 获取标签自定义属性的值
变量名.setAttribute('data-自定义属性的名字','自定义属性的值') 设置自定义属性和值
变量名.removeAttribute(‘data-自定义属性名字’) 删除自定义属性包含值
element.dataset.“自定义属性名” 或者 element.dataset["listName自定义属性"] 获取值
如果自定义属性里面有多个 - 获取名称则以驼峰命名法来获取
## 节点的属性
文档：document
元素：页面中所有的标签，元素----element，(Div)标签---(Class)元素----(ID)对象
```
<div id="dv"> //这里的换行就算1个节点
<span>div中第一个span标签</span> //span算第二个节点，后边换行算第三个节点
<p>div中第二个元素，第一个p标签</p> //p标签算第四个，后边换行第五个节点
<ul> //ul算第六个节点，后面换行算第七个节点
<li>1</li>
<li>2</li>
<li>3</li>
</ul> //所以，子节点包含，标签，属性，文本（换行也属于文本）
</div>
```
节点：页面中所有的内容（标签，属性，文本），Node（节点的翻译）
根元素：html标签
```
<div id="dv">
<span>div中第一个span标签</span>
<p>div中第二个元素，第一个p标签</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var ul = document.querySelector("ul")
ul.childNodes[6].innerText // 包含所有节点
ul.children[3].innerText // 获取li元素节点
ul.lastChild
</script>
```
nodeType 节点的类型 1代表标签，2代表属性，3代表文本
nodeName 节点的名字 标签节点---大写的标签名字，属性节点---小写的属性名字，文本节点---#text
nodeValue 节点的值 标签节点---null，属性节点---属性值，文本节点---文本内容
变量名.parentNode 获取变量元素的父级节点 parent 父
变量名.childNodes[i] 获取变量的所有子节点 child 子 后边无括号
变量名.parentElement 获取变量的父级元素
变量名.children 获取变量的子元素
//------------------------------以上所有浏览器都支持，下面IE8不支持-------------------------//
变量名.firstChild 获取第一个子节点
变量名.lastChild 获取最后一个子节点
变量名.firstElementChild 获取第一个子元素
变量名.lastElementChild 获取最后一个子元素
变量名.previousSibling 获取变量前一个兄弟节点
变量名.previousElementSibling 获取变量前一个兄弟元素
变量名.nextSibling 获取变量后一个兄弟节点
变量名.nextElementSibling 获取变量后一个兄弟元素
## 动态创建元素
```
<div id="dv">
<ul>
<li>1</li>
</ul>
</div>
<script>
var ul = document.querySelector("ul") // 获取元素
var li = document.createElement("li") // 创建元素
li.innerText = "你好啊" // 这样子可以设置标签属性
li.style.color = "red"
ul.appendChild(li) // 追加元素
ul.insertBefore(li,ul.children[0])) // 插入到那个元素前面
ul.removeChild(ul.children[0])
var li2 = ul.children[0].cloneNode(true) // true深度复制
ul.appendChild(li2) // false只复制元素,不复制内容
</script>
```
document.write() 会覆盖之前整个页面的代码
element.innerHTML 在原代码的下面，填入代码，如果用第二次会覆盖第一次，可以H+=H
document.createElement() 直接创建标签，需要手动放到标签内部
变量名.appendChild() 追加元素 变量名.appendChild(a) 这样子a就放到了变量名里面
变量名.removeChild(要删的元素名) 删除元素
变量名.insertBefore(位置) 把元素插入到页面的指定位置
变量名.replaceChild() 把当前元素的标签进行替换
element.innerHTML=‘内容’ 在创建简单动态元素的时候用这个
document.createElement() 在 创建复杂动态元素的时候用这个，比如创建事件
变量名.cloneNode() 克隆一个节点
## 元素绑定多个事件
addEventListener(事件名字没有on,事件处理函数,布尔类型(只写false))
变量名.addEventListener('click',function(){ },false) 这是使用方法 ，谷歌和火狐支持
变量名.attachEvent('on事件名字'，事件处理函数) 这个方法跟上面一样，只是IE8支持
## 元素解绑事件
用什么方式绑定事件，就应该用对应的方式解绑事件
对象.on事件名字=事件处理函数---->绑定事件
对象.on事件名字=null；
```
<button >我是按钮</button>
<script>
var bt = document.querySelector("button")
bt.addEventListener('click',al) // 绑定事件
document.addEventListener('DOMContentLoaded',al)//页面加载事件
function al(){
alert("你好啊")
bt.removeEventListener('click',al) // 删除事件
}
</script>
```
对象.addEventListener('没有on的事件类型',命名函数,false)；----绑定事件
对象.removeEventListener('没有on的事件类型',命名函数,false)；
对象.attachEvent('on事件名字'，命名函数)；-----绑定事件 这是IE9以前使用的
对象.detachEvent('on事件名字'，命名函数)；
对象.addEventListener(,,false)
这个flase是冒泡模式，true是捕获模式，1是冒泡，2是目标，3是捕获，冒泡：从里到外，捕获：从外到里，eventPhase这个属性是看当前是什么阶段，一般都是冒泡
## 阻止事件冒泡 // 一直不明白事件冒泡有什么用~~
window.event.cancelBubble=true; //阻止事件冒泡 IE,谷歌支持
e.stopPropagation()； //阻止事件冒泡，火狐和谷歌支持
为同一个元素绑定多个不同事件，指向同一个事件处理函数
在形参里面可以有很多事件，可以直接打印形参查看
e.target.style.backgroundColor // e.target 相当于 this，只是用于事件中,获取谁触发的
function 函数名(形参){形参.type} 去判断形参返回来的内容是什么，就可以用判断去调用不同类型运行方式
e.pageX e.clientX 这些是获取鼠标的位置
onkeyup // 某个键盘按键被松开时触发
onkeydown // 某个键盘被按下时触发 ， 无法区分大小写
onkeypress // 某个键盘按键被按下式触发,但不识别功能键,例如 ctrl shift 箭头,可以区分大小写
e.keyCode // 获取按下键盘的阿斯码值
# BOM
浏览器中有个顶级对象：window
页面中顶级对象：document
页面加载事件
window.onload = function () {
// 加载网页完毕后触发这里的事件
}
window.onunload = function () {
// 关闭网页是触发
}
window.addEventListener('load',function(){})) // 也可以这样子写
window.addEventListener('resize',function(){}))
window.onload = function () {} onload 代码放到head里面去运行，不会报错，当页面加载完成执行
window.onunload = function () {} onunload // 当用户退出页面时执行
window.resize // 当窗口变化事，触发
prompt() 类似信息框，有两个属性，第一个提示内容，第二个显示内容
confirm（） 信息框的一种弹屏提醒
异步任务
1.普通事件：click、resize等
2.资源加载：load、error等
3.定时器：setInterval、setTimeout等
## location对象中的属性和方法
window.location // location对象
window.location.hash //地址栏上#及后面的内容
window.location.host //主机名及端口号
window.location.hostname //主机名
window.location.pathname //文件的路径---相对路径
window.location.port //端口号
window.location.protocol //协议
window.location.search //搜索的内容
## 设置跳转的页面的地址
location.href="域名";属性----跳转
location.assign("域名");方法---跳转
location.reload();重新加载--刷新
location.replace("域名");浏览没有历史记录
## history对象
back() 返回 window.history.back()
forward() 前进
go() 正负数控制返回和前进
## navigator对象
userAgent 通过UA获取浏览器的类型 window.navigator.userAgent
platform 获取浏览器所在系统的类型
## 计时器
第一个定时器
window.setInterval(); 参数一：函数，参数二：时间（毫秒）类似时钟
window.clearInterval() 上面定时器的返回值，填到里面就是停止
第二个定时器，一次性定时器
window.setTimeout（同上面的定时器一样）；
## offset系列 元素的大小+padding+border
变量名.offsetLeft 返回左边位置 未脱离文档流时，父级(padding+margin+border)+自己margin
变量名.offsetTop 返回上边位置，整数型 脱离后，只有margin+left，跟父级无关系了
变量名.offsetHeight 返回元素高，整数型
变量名.offsetWidth 返回元素宽，整数型
## scroll系列 滚动偏移 滚动条往下拉后，内容总体长度 元素的大小+padding
var box = document.getElementById('box');
console.log(box.scrollLeft) 元素边框的左边框大小
console.log(box.scrollTop) 元素边框的上边框大小
console.log(box.scrollWidth) 包括边距的元素大小
console.log(box.scrollHeight)
## client系列 客户区大小 可视区，无边框，边框内部的宽度 内容的大小+padding
var box = document.getElementById('box');
console.log(box.clientLeft); 向左滚动条后距离0的位置
console.log(box.clientTop); 向下滚动条后距离0的位置
console.log(box.clientWidth); 可视区域
console.log(box.clientHeight); 可视区域