JavaScript基础学习笔记
Js基础
null和undifined
null专门用来表示一个为空的对象
使用typeof检查一个null时，会返回object
当声明一个变量未赋值时，表示undifined
1 | var a = null; |
将其他数据类型转换为 String
法一：调用被转换数据类型的toString()方法 该方法不会影响原值 会将转换的结果返回
null和undifined没有toString()方法
1 | var a = 123; |
法二：调用String()函数
会将null直接转换为“null”
会将undifined直接转换为“undifined”
1 | a = String(a); |
将其他数据类型转换为 Number
法一：使用Number()函数
1 | * 若是纯数字的字符串 则直接转数字 |
法二：parseInt()函数把字符串转整数 可将一个字符串中有效的整数内容取出来
parseFloat()函数把字符串转浮点数 可获得有效的小数
若对非String使用 会先转为String再操作
进制数字
16进制数字：0x开头
1
2var a = 0x123;
console.log(a) //以十进制输出8进制数字：0开头 070有些浏览器会当成8进制解析 有些会当成十进制
可以在parseInt()中传递第二个参数来统一进制
1
2var a = 070
parseInt(a,10)2进制数字：0b开头 但不是所有浏览器都支持
将其他数据类型转换为Boolean
Boolean()函数
Infinity 无穷
typeof的返回值为字符串
/*%1 -0 +a(a为参数)都可将一个值转换为Number
+a可以一个值转为String
！取反 若为非布尔值 则先转换为布尔值再取反 ！！a可将任意数值a转换为布尔值
关系运算符
- 任何值和NaN做任何比较都是false
- 比较俩字符串时，比较的是字符串的编码 一位一位进行比较 多余字符串不比较
- 比较中文时没有意义
相等运算符==
- 运算时会自动转成Number类型
- null == 0为false
- undifined衍生自Null 所以俩者==返回true
- NaN不和任何值相等 包括它本身 可以通过isNaN()函数来判断一个值是否是NaN
条件运算符（三元）
- 条件表达式？语句1：语句2
- 执行时先执行条件表达式 若为true则执行语句1 并返回执行结果 反之则执行语句2
- 若条件表达式为非布尔值 会先转为布尔值
优先级
- 越靠上越优先计算
- . 、[] 、new
- ()
- ++、–
- !、~、+、-（单目）、typeof、void、delete
- %、*、/
- +、-（双目）
- <<、>>、>>>
- <、<=、>、>=
- ==、!==、===
- &
- ^
- |
- &&
- ||
- ?
- =、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
- ，
- 越靠上越优先计算
自增和自减
a++（–）的值等于原变量的值
++（–）a的值等于自增后的值
break和continue
- break关键字可以用来退出switch或循坏语句 只对最近的循环产生影响
可以为循环语句创建一个名字 来标识当前的循环 在break后添加标识名来应用其他循环
1 | outer: |
用来开启一个计时器 需要一个字符串作为参数 将会作为计时器标识
console.timeEnd(“计时器名字”)停止计时器
对象
- 内建对象
- 由ES标准定义的对象 如Math Function Object
- 宿主对象
- 由JS的运行环境提供的对象 主要为由浏览器提供的对象 如BOM DOM
- 自定义对象
- 由开发人员自己的创建的对象
in运算符
检查一个对象中是否含有指定的属性 返回布尔值
语法：”属性名” in 对象
基本与引用数据类型
- 基本数据类型：string number boolean null undifined
- 引用数据类型：object
- js变量都存储在栈内存中
- 对象都存储在堆内存中 每创建一个新的对象就会在堆内存中开辟一个空间 而栈内存中的变量保存的是对象的内存地址
- 如果两个变量保存的是同一个对象引用 当一个通过一个变量修改属性时，另一个也会受到影响
- 当比较两个引用数据类型时，比较的是内存地址
立即执行函数
立即执行 只执行一次
1 | （function(){ |
作用域
var创建一个变量时，会作用于全局
调用函数时创建函数作用域 函数执行完毕之后 函数作用域销毁 每调用一次函数就会创建一个新的作用域
this
函数执行的上下文对象
根据函数的调用方式不同 this指向不同的对象
1 | * 以函数的形式调用 this指向永远都是window |
构造函数/类
构造函数使用new关键字来调用 函数名大写
执行流程
1 | * 立刻创建一个新的对象 |
instanceof可以检查一个对象是否是一个类的实例
所有的对象都是Object的后代
原型对象
- 将函数定义在全局作用域 污染了全局作用域的命名空间 而且定义在全局作用域中也很不安全 所以尽量不在全局定义域中定义函数
- 原型prototype
- 每创建一个函数 解析器都会向函数中添加一个属性prototype
- 这个属性对应一个对象 这个对象就是原型对象
- 如果函数作为普通函数调用prototype没有任何作用
- 当函数以构造函数的形式调用时 它所创建的对象中会有一个隐含的函数
- 指向该构造函数的原型对象 可以通过__proto__来访问该属性
- 原型对象相当于一个公共区域 所有同一个类的实列都可以访问到这个原型对象 可以将对象中公共的内容 统一设置到原型对象中
1
2
3function Tx(){}
//设置原型对象
Tx.prototypr.a = 123; - 当访问对象的一个属性或方法时 会先在对象自身中寻找 如果有则直接使用 如果没有则去原型对象中寻找
- 使用in检查对象中是否含有某个属性时 如果对象中但是原型有 也会返回true
- 可以使用对象的hasOwnProperty()来检查对象自身是否含有该属性
- 原型对象也是对象 所以它也有原型 当使用一个对象的属性或方法时，会在自身属性和原型中寻找 若都没有 则去原型的原型中寻找 直到找到Object的原型 若Object的原型中依然没找到 则返回undifined
toString()
当直接在页面上打印一个对象时 实际上是输出对象的toString()方法的返回值
若希望在输出对象时不输出[Object Object] 可以为对象添加一个toString()方法
垃圾回收
当一个对象没有任何的变量或属性对他进行引用 我们将永远无法操作该对象 此时这种对象就是一个垃圾 这种对象过多会占用大量的内存 我们需要对这些垃圾进行清理
JS中拥有自动的垃圾回收机制 会自动将这些辣鸡对象从内存中销毁 我们只需要将不再使用的对象设置为null即可
数组
- 读取不存在的索引 会返回undifined
- length
- 对于连续数组使用length 会获取到数组的个数（长度）
- 对于不连续的数组 length会获取到数组的最大的索引+1
- 若修改length大于原长度 则多出部分会空出来 若小于原长度 则多出的元素会被删除
- 向数组的最后一个位置添加元素可以使用：数组[数组.length] = 值
- push()向数组的末尾添加一个或多个元素 并返回数组的新长度
- pop()删除数组的最后一个元素 并返回被删除的元素
- unshift()向数组的开头添加一个或多个元素 并返回新的长度
- shift()删除数组的第一个元素 并将被删除的元素作为返回值返回
- forEach()需要一个函数作为参数
- 像这种函数 由我们创建但不由我们调用的 称为回调函数
- 数组中有几个元素函数就会执行几次
- 每次执行时 浏览器会将遍历到的元素以实参的形式传递进来
- 我们可以来定义形参 来读取这些内容
- 浏览器会在回调函数中传递三个参数 第一个参数就是当前正在遍历的元素 第二个参数就是当前正在遍历的元素的索引 第三个参数就是正在遍历的数组
- slice()从已有数组截取指定元素
- 参数一为开始位置的索引 参数二为结束位置的索引
- 结果包含开始索引 不包含结束索引
- 该方法不改变原数组 而是将截取到的元素封装到一个新数组中返回
- 第二个参数如果不写 会截取从开始索引往后的所有元素
- 索引若传递负值 则从后往前计算
- splice()删除数组中的指定元素
- 会影响到原数组 会将指定元素从原数组中删除 并将被删除的元素作为返回值返回
- 参数一表示开始位置的索引 参数二表示删除的数量 参数三及以后可以传递一些新的元素 这些元素会自动插入到开始位置索引前边
- concat（）连接两个或多个数组 并将新的数组返回 不会对原数组产生影响
- join()将数组转换为字符串 不会被原数组产生影响 将转换后的字符串作为结果返回 在join()中可以指定一个字符串作为参数 这个字符串将会数组中元素的连接符 若不指定连接符 则默认使用,作为连接符
- reverse()反转数组 会直接修改原数组
- sort()对数组中的元素进行排序 会直接修改原数组
- 默认按unicode编码进行排序 所以对数字进行排序时
- 可能会得到错误的信息 可以添加一个回调函数 来指定排序规则
- 回调函数中需要定义两个形参 浏览器将会分别使用数组中的元素作为实参去调用回调函数 使用哪个元素调用不确定 但肯定是a一定在b前边
- 浏览器会根据回调函数的返回值来决定元素的顺序 如果返回一个大于0的值 则元素交换位置 若小于0 则元素位置不便 若返回一个0 则认为两个元素相等 也不交换位置
- 如果需要升序排列 则返回a-b 降序则返回b-a
1
2
3
4let arr = [5,3,8,1,0,7,3,8]
arr.sort(function(a,b) {
return a-b
})
call()和apply()
都是函数对象的方法 需要通过函数对象来调用
当调用这俩方法时都会调用函数执行
调用时可以将一个对象指定为第一个参数 此时这个对象会称为函数执行时的this
1
2
3
4
5function fun(){
console.log(this.name)
}
var obj = {name:"obj"}
fun.apply(obj)//输出objcall()方法可以将实参放在对象之后依次传递
apply()方法需要将实参封装到数组中统一传递
1
2fun.call(obj,2,3)
fun.apply(obj,[2,3])
arguments
调用函数时 浏览器每次都会传递进两个隐含的参数：this和封装实参的对象arguments
是一个类数组对象 也可以通过索引来操作数据 也可以获取长度
调用函数时 传递的实参都会在arguments中保存
arguments[0]表示第一个实参 以此类推
有一个callee属性 对应一个函数对象 就是当前正在执行的函数对象
Date
直接使用构造函数创建一个Date对象（new Date()） 则会封装为当前代码执行的时间
可以在构造函数中传递一个表示时间的字符串作为参数 日期的格式：月份/日/年 时:分:秒
1
var d1 = new Date("12/13/2011 11:10:30")
getDate()获取当前日期对象是几日
getDay()获取当前日期对象是周几 返回值为0-6
getMonth()获取当前日期对象的月份 返回0-11
getFullYear()获取当前日期对象的年份
getTime()获取当前日期对象的时间戳 时间戳指从格林威治标准时间1970年0时0分0秒到当前时间所花费的毫秒数（1秒 = 1000毫秒）计算机底层保存时间使用的是时间戳
获取当前时间戳 Date.now() 利用时间戳可以来测试代码的执行性能
Math
属于一个工具类不用创建对象 里边封装了数学运算相关的属性和方法
Math.PI表示圆周率
Math.abs()用来计算一个数的绝对值
ceil(）对一个数进行向上取整 小数位只有有值就自动进1
floor()对一个数进行向下取整 小数位会被舍掉
round()四舍五入取整
random()用来生成0-1之间的随机数 生成一个0-10的随机数就*10 生成0-x之间的一个随机数Math.round(Math.random()x) 生成x-y之间的随机数Math.round(Math.random()(y-x)+x)
max()获取多个数中的最大值 min()获取多个数中的最小值
pow(x,y)返回x的y次幂
sqrt()对一个数进行开方
包装类
JS提供三个包装类 可以将基本数据类型的数据转换为对象 给浏览器自己调用
- String()将基本数据类型字符串转换为String对象
- Number()将基本数据类型的数字转换为Number对象
- Boolean()将基本数据类型的布尔值转换为Boolean对象但开发中不使用这个方式
1
2var num = new Number(3)；
var bool = new Boolean(true)； - 方法和属性能添加给对象 不能添加给基本数据类型 当我们对一些基本数据类型的值去调用属性和方法时 浏览器会临时使用包装类将其转换为对象 然后在调用对象的属性和方法 调用完以后 再将其转换为基本数据类型
字符串对象的方法
在底层字符串都是以字符数据的形式保存 所以引用方法类似数组 有length属性 有索引
charAt()返回字符串中指定位置的字符 根据索引获取指定的字符
charCodeAt()获取指定位置字符的字符编码（Unicode编码）
String.formCharCode()根据字符编码获取字符
concat()用来连接两个或多个字符串 作用和+一样
indexOf()检索字符串中是否含有指定内容 若有改内容 则会返回第一次出现的索引 若没有该内容 则返回-1 可以指定第二个参数为开始查找的位置
lastIndexOf()用法和indexOf()一样 不同的是该方法是从后往前寻找指定内容
slice()可以从字符串中截取指定的内容 不会影响原字符串 用法和数组一样
substring()截取一个字符串 和slice()类似 不同的是这个方法不能接收负值为参数 若传递负值默认为0 而且会自动调整参数的位置 如果第二个参数小于第一个参数 则会自动交换
substr()截取字符串 不同的是参数一为开始位置的索引 参数二为截取的长度（es语法为定义）
split()将一个字符串拆分为一个数组 需要一个字符串作为参数 将会根据该字符串去拆分为数组 不指定全局匹配也会全的拆分
- 若传递一个空串作为参数 则会将每个字符都拆分为数组中的一个元素
- 可以传递一个正则表达式作为参数 根据正则表达式来拆分
toUpperCase()将一个字符串转换为大写并返回
toLowerCase()将一个字符串转换为小写并返回 都不会影响原变量
search()搜索字符串中是否含有指定内容 搜索到指定内容返回第一次出现的索引 没有搜索到返回-1 可以接收正则表达式作为参数 根据正则表达式去检索字符串 只会查找第一个 即使设置全局匹配也无效
match()根据正则表达式将字符串中符合条件的提取出来 默认情况下只会找到第一个符合要求的内容 找到以后就停止检索 可以设置正则表达式为全局匹配模式 这样就可以匹配所有的内容 可以为一个正则表达式设置多个匹配模式 且顺序无所谓 会将匹配到的内容封装到一个数组中返回 即使只查询到一个结果
replace()可以将字符串中指定内容替换为新的内容 参数一为被替换的内容 可以接收正则表达式 参数二位新的内容 默认只替换第一个 可以设置位全局模式
正则表达式
语法：var 变量 = new RegExp(“正则表达式”,”匹配模式”) 或使用字面量创建：var 变量 = /正则表达式/匹配模式
例var reg = new RegExp(“a”)可以用来检查一个字符串中是否含有a 区分大小写
第二个参数匹配模式可以是i忽略大小写 g全局匹配模式
test()方法可以哦你过来检查一个字符串是否符合正则表达式的规则 符合则返回true
正则表达式中使用 | 表示或的意思 []里面的内容也是或的关系 [ab]==a|b [a-z]任意小写字母 [A-Z]任意大写字母 [A-z]任意字母
[^ x]表示除了x以外的
量词可以设置一个内容出现的次数 默认只对它前边的一个内容起作用 若要表示前面的一个整体可以用() 语法：
- {n}正好出现n次
- {m,n}出现m-n次
- {n,}出现n次以上
- +表示至少一个 相当于{1,}
- *表示0或多个 相当于{0,}
- ?表示0或1个 相当于{0,1}
- ^表示开头 $表示结尾
.表示任意字符 若要检查字符串是否含有. 可以在正则表达式中使用\作为转义字符 .表示. \表示\ 注意：使用构造函数时 由于参数是一个字符串 而\是转义字符 如果要使用\则需要使用\来代替
文档对象模型 通过JS来操作HTML文档
节点
- 构成HTML文档最基本的单元
- 分类
- 文档节点 整个HTML文档
- 元素节点 HTML文档中的标签
- 属性节点 元素的属性
- 文本节点 标签中的文本内容
- 节点的属性
- 浏览器已经为我们提供文档节点对象 这个对象就是window属性 文档节点代表的是整个网页 即document
1
2
3<button id = "btn">按钮</button>
var btn = document.getElementById("btn")//获取标签对象
btn.innerHTML= "修改按钮的文字"
innerHTML通过这个属性可以获取到元素内部的html代码 对于自结束标签没有意义
innerText可以获取到元素内部的文本内容
通过document对象调用：
- getElementById()通过id属性获取一个元素节点对象
- getElementsByTagName()通过标签名获取一组元素节点对象 返回数组对象
- getElementsByName()通过name属性获取一组元素节点对象
- 元素.属性名可以读取元素节点属性 class属性不能采用这种方式 读取class属性需要使用.className
获取元素节点的子节点
- getElementsByTagName()通过标签名获取一组元素子节点对象
- childNodes当前节点的所有子节点 会获取包括文本节点在内的所有节点 标签间的空白也会被当成文本节点 在IE8及以下的浏览器中不会将空白文本当成子节点
- children属性会获取当前节点的所有子元素（标签 不包括空白）
- firstChild表示当前节点的第一个子节点（包括空白文本节点）
- firstElementChild会获取当前节点的第一个子元素 不支持IE8及以下的浏览器
- lastChild表示当前节点的最后一个子节点
获取父节点和兄弟节点
- parentNode表示当前节点的父节点
- previousSibling表示当前节点的前一个兄弟节点 也可能获取到空白文本
- previousElementSibling当前节点的前一个兄弟元素
- nextSibling表示当前节点的后一个兄弟节点
其余查询方法
- 直接获取body标签:document.body
- 直接获取html根标签:document.documentElement
- 获取页面中的所有元素：ducoment.all 但它是undifined类型 或 document.getElementsByTagName(“*”)
- 根据元素的class属性值查询一组元素节点对象：document.getElementsByClasssName(“”) 只兼容IE9以上浏览器
- document.querySelector(“”)根据一个CSS选择器来查询一个元素节点对象 需要一个选择器的字符串作为参数 使用该方法总会返回一个唯一的一个元素 若有多个元素 只会返回第一个 支持IE8
- document.querySelectorAll(“”)方法同上 但可以查询所有元素节点 返回一个数组
增删改方法
- document.createElement(“span”)可以用于创建一个元素节点对象 需要一个标签名作为参数 会根据该标签名创建元素节点对象 并将创建号的对象作为返回值返回
- document.createTextNode(“广州”)创建一个文本节点对象 需要一个文本内容作为参数 将会根据该内容创建文本节点 并将新的节点返回
- appendChild()向一个父节点添加一个新的子节点 语法：父节点.appendChild(子节点)
- insertBefore()在指定的子节点前插入新的子节点 语法：父节点.appendChild(新节点，旧节点)
- replaceChild()使用指定的子节点替换已有的子节点 语法同上
- removeChild()删除一个子节点 语法：父节点.removeChild(子节点)
样式操作
- 修改元素的样式 语法：元素.style.样式名 = 样式值
- 含有-的样式名 需改为驼峰命名法
- 元素.style.样式名 此方法只能获取内联样式
- 元素.currentStyle.样式名 获取元素的当前显示的样式 如果当前元素没有设置该样式 则会获取到默认值 只有IE浏览器支持
- 其他浏览器可以使用getComputedStyle()来获取元素当前的样式 这是window的方法 可以直接使用 需要两个参数
- 第一个为要获取样式的元素
- 第二个可以获取一个伪元素 一般传null
- 该方法返回一个对象 对象中封装了对应的样式
- 可以通过对象.样式名来读取样式
- 如果获取的样式没有设置 则会获取到真实的值 而不是默认值 比如没用设置width 则不会返回auto 而是具体的长度 不支持IE8及以下
- 例：getComputedStyle(box1,null).width
- 通过currentStyle和getComputedStyle()读取到的样式都是只读的 不能修改
其他样式用法（以下）
- clientWidth和clientHeight获取元素的可见宽度和高度 用法：元素.clientWidth 以下属性都不带px 都返回一个数字 可见宽度和高度包括内容区和内边距 不包括边框 这些属性都只读 不能修改
- offsetWidth和offsetHeight获取整个元素的高度和宽度 包括内容区和内边距 包括边框
- offsetParent获取当前元素的定位父元素 会获取到离当前元素最近的开启了定位（只要position值不是static就是开启了定位）的父元素 若所有的父元素都没有开启定位 则返回body
- offsetLeft 当前元素相对于其定位父元素的水平偏移量
- offsetTop当前元素相对于其定位父元素的垂直偏移量
- scrollWidth和scrollHeight可以获取整个区域 包括滚动区的宽度和高度
- scrollLeft和scrollTop可以获取水平滚动条和垂直滚动条滚动的距离
- 当满足scrollHeight -scrollTop = clientHeight时 说明垂直滚动条滚动到底 水平同理
事件
- window.onload事件会在整个页面加载完之后才触发 该事件对应的相应函数会在页面加载完成之后执行 这样可以确保代码执行时所有的DOM对象已经加载完毕了
- onclick单击事件 ondblclick双击事件
- onscroll该事件会在元素的滚动条滚动时触发
- 拖拽相关
- onmousedown按下开始拖拽
- onmousemove鼠标移动事件
- onmouseup松开时固定
- 鼠标滚轮滚动事件onmousewheel 不支持火狐 火狐中使用DOMMouseScroll来绑定滚动事件 该事件通过addEventListener()来绑定
- event.wheelDelta获取滚动方向 向上滚是正值 向下滚的负值 火狐中使用event.detail
- 当滚轮滚动时 如果浏览器有滚动条 滚动条会随之滚动 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为（return false）
- 通过addEventListener()来绑定的函数 取消默认行为不能使用return false 需要使用event.preventDefault() 不支持IE8 所以要使用event.preventDefault() && event.preventDefault()判断
- 键盘事件
- onkeydown按键被按下 对于按下一定间隔后不松开的事件会连续触发
- onkeyup按键被松开
- 键盘事件一般会绑定给获取获取焦点的对象或document
- 可以往事件中传递event 通过event.keyCode返回按键的unicode编码
- 还有altKey ctrlKey shiftKey三个属性 分别判断alt ctrl shift是否按下 返回布尔值
- 在文本框中输入内容，属于onkeydown的默认行为 如果在onkeydown中取消了默认行为 则输入的内容不会出现在文本框中
- 使文本框中不能输入数字
事件对象
当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递进函数
在事件对象中封装了当前事件相关的一切信息 比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮的方向
clientX可以获取鼠标指针的水平坐标
1
2
3
4
5
6
7
8
9
10
11btn.onmousemove = function(event){
let x = event.clientX
let y = windon.event.clientY//IE8中响应函数被触发时 浏览器不会传递事件对象 所有在IE8及以下的浏览器中 是将事件对象作为window对象的属性保存的 要用此种用法
//或者采用如下写法
event = event || window.event
//或
if(!event) {
event = window.event
}
}clientY可以获取鼠标指针的垂直坐标 (当前可见窗口的坐标) div的偏移量是相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标 IE8不支持 可以使用scrollTop获取到滚动条距离 使偏移量加上滚动距离来代替pageX
事件冒泡Bubble
指事件的向上传导 当后代元素上的事件被触发时 其父元素的相同事件也会被触发
可以通过事件对象来取消冒泡event.cancelBubble = true
事件委派
将事件统一绑定给元素的共同的祖先元素 这样当后代元素上的事件触发时，会一直冒泡到祖先元素 从而通过祖先元素的响应函数来处理事件
事件委派利用了冒泡 通过委派可以减少事件绑定的次数 提高程序的性能
event事件对象的targrt表示的触发事件的对象
事件绑定
使用对象.事件 = 函数的形式绑定响应函数 它只能同时为一个元素的一个事件绑定一个响应函数 不能绑定多个 如果绑定多个 则后边会覆盖掉前边的
addEventListener()通过这个方法也可以为元素绑定响应函数 不支持IE8及以下
- 参数一为事件的字符串 不要on 如”click”
- 参数二为回调函数 当事件触发时该函数会被调用
- 参数三为是否在捕获阶段触发事件 需要一个布尔值 一般都传false
- 可以同时为一个元素的相同事件绑定多个响应函数 这样当事件被触发时 会按函数的绑定顺序执行
- 里面的this是绑定事件的对象obj
attachEvent()可以在IE8中使用来绑定事件
微软公司认为事件应该由内向外传播 也就是事件触发时应该先触发当前元素上的事件 然后再向当前元素的祖先元素上传播 就是事件应该在冒泡阶段执行
W3C将事件传播分成了三个阶段
- 捕获阶段：从最外层的祖先元素向目标元素进行事件的捕获 但默认此时不会触发事件
- 目标阶段：事件捕获到目标元素 捕获结束后开始在目标元素上触发事件
- 冒泡阶段：事件从目标元素向祖先元素传递 依次触发祖先元素上的事件
- 如果希望在捕获阶段就触发事件 可以将addEventListener()的第三个参数设置为true 一般情况下不采用 IE8及以下浏览器没有捕获阶段
当调用一个元素的setCapture()方法以后 这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上 chrome中使用此方法会报错
BOM
浏览器对象模型 通过JS来操作浏览器
包括 均作为window的属性保存 可以通过window对象来使用 也可以直接使用
由于历史原因 大部分属性都已经不能啊帮助识别浏览器了 一般使用userAgent属性
userAgent是一个字符串 包括描述浏览器信息的内容
IE11中已经将微软和IE相关的标识去除 所以不能userAgent
所以还可以通过浏览器特有的属性来判断 比如window.ActiveXObject 有这个对象则是IE 没有则不是IE eg:if(“ActiveXObject” in window)
history
length属性可以获取到当前访问过的网页数量
back()方法可以回退到上一个页面 作用和浏览器的回退按钮一样
forword()可以跳转到下一个页面 作用和浏览器的前进用途一样
go()跳转到指定页面 需要指定一个整数为参数 1表示向前跳转一个 2表示向前跳转2个 -1向后跳转一个
location
直接打印location 可以获取到地址栏的信息（当前页面的完整路径）
如果直接将location属性修改为一个完整的路径 或相对路径 则页面会自动跳转到该路径 并且会生成相应的历史记录
assign()方法用来跳转到其他的页面 作用和直接修改lication一样
reload()方法重新加载当前页面 作用和刷新按钮一样 如果在方法中传递true作为参数 则会强制清空缓存刷新页面
replace()方法可以使用一个新的页面替换当前页面 调用完毕也会跳转页面 不会生成历史记录 不能使用回退按钮回退
定时器
如果希望一段程序可以每隔一段时间执行一次 可以使用定时调用
setInterval()
- 参数一为回调函数 该函数会每隔一段时间执行一次
- 参数二为每次调用间隔的时间 单位是毫秒
- 返回值为Number类型的数据 这个数字用做定时器的唯一标识
clearInterval()用来关闭定时器 需要一个定时器的表示作为参数
setTimeout()延时调用一个函数不马上执行 而是隔一段时间以后再执行 而且只执行一次
clearTimeout()关闭延迟调用 使用方法同上
在定时器执行前关闭上一次定时器 防止一直按按钮会一直加快定时器
a的链接问题
点击超链接以后默认跳转页面
可以通过在响应函数的最后return false来取消默认跳转行为
或设置标签a的属性href=”javascript:;”
类的操作
直接操作style的方法渲染性能较低 所以可以采用修改类名的方式来改变整个样式 若任需要保留原样式 可以使用box.className +=” “ +”新类名”
JSON
- 特殊格式的字符串 可以被任意的语言识别
- JavaScript Object Notation JS对象标识法
- 格式与JS对象格式一样 不过JSON的属性名必须加双引号 其他与JS语法一致
- 分类:对象{} 数值[]
- 允许的值：字符串 数值 布尔值 Null 对象 数组
- JSON工具类
- JSON.parse()将json转js对象 参数为json字符串
- JSON.stringify()将JS对象转JSON字符串 参数为JS对象
- IE7不支持
- eval()可以用来执行一段字符串形式的JS代码 并将执行结果返回 所以IE7中可以使用此方法 若执行的字符串中含有{} 会将{}当成是代码块 如果不希望将其解析成代码块 则需要在字符前后各加一个()
- 但eval()在开发者尽量不使用 执行性能比较差 且具有安全隐患 若要兼容 IE7 可以引入JSON.js
1
eval("("+字符串代码+")")
注意
- for循环会在页面加载完成之后立即执行 而点击函数则在for循环执行完成之后才执行
- ES6新语法：for（let i in arr）i为数组下标 for(let book of arr) book为数组元素
- 高级函数
- filter(回调函数（）)
1
2
3
4let newArr = arr.filter(function（n）{
retuen n<100
}) //回调函数有一个要求：必须返回布尔值 返回值若是false则过滤掉 如retuen n<100则返回小于100的
//箭头函数写法：let newArr = arr.filter(（n）=>n<100)1
* map(回调函数（）)
1
let newArr = arr.map(function（n）{retuen n*2}) //遍历返回新的值
1
* reduce(回调函数（）)对数组中所有的内容进行汇总
1
let total =arr.reduce(function(preValue,n){return preValue+n}，0)//0为preValue的初始值 n为数组中的元素值 total为一个值
- filter(回调函数（）)
- :input用法
1
2
3
4
5
6<input :value="message" ：input="valueChange"/>
valueChange(event) {
this.message = event.target.value//获取到输入框的value
}
//也可以直接在标签内写方法
<input :value="message" ：input="message = $even.target.valuet"/>
