1、数据类型转换
1).转数值
◉number()
语法：Number(想要转换的内容)
结果：转换好数值类型的结果
var s1 = "1"
console.log(typeof Number(s1)) //number
◉parseInt()
语法：parseInt(想要转换的内容)
结果：转换好数值类型的结果
var s2 = '1'
console.log(typeof parseInt(s1)) //number
◉paserFloat()
与parseInt区别：parsetFloat可以解析小数部分
语法：paserFloat(想要转换的内容)
结果：转换好数值类型的结果console(String(b1)) //true
var s2 = '12.12'
console.log(parseInt(s1)) //12
console.log(paserFloat(s1)) //12.12
2).转字符串
◉String()
语法：String(想要转换的内容)
结果：转换好字符串类型的结果
var b1 = true
console(String(b1)) //true
console(typeof String(b1)) //string
◉toString()
语法：要转换的内容.toString()
结果：转换好字符串类型结果
var b2 = true
consolr.log(b2.toString()) //true
3).转布尔
◉Boolean()
语法：要转换的内容.Boolean()
结果：转换好的布尔类型结果
false: 0 NaN null undefined “”
true: 除以上全部为true
var c1 = "123"
console.log(c1.Boolean()) //true
2、运算符
1).== && ===
等于比较==：比较 值 是否相等，不考虑数据类型
全等比较===：值和数据类型全相同时，才是true
2).!= && !==
不等于比较!=：只要值不相等就是false
不全等比较!==：值和数据类型，任意一个不等就是false
3、作用域
4、数据类型
1).对象数据类型
增
var b = {}
b.name = "小米" //方法一 {name:"小米"}
b['age'] = 16 //方法二 {name:"小米",age:16}
删
var b = {}
delete b.name //方法一
delete b['age'] //方法二
改
//与增加方法相同，如果原来有 键值对 则是修改，没有则是新增
查
var b = {}
b.name
b['age']
2).数组数据类型
3).冒泡排序
4).选择排序
5).数组常用方法
◉push()——末尾添加
语法：数组.push(数据)
返回值：追加数据后的新数组长度
◉pop()——末尾删除
语法：数组.pop()
返回值：被删除的数据
◉unshift()——头部添加
语法：数组.unshift(数据)
返回值：添加数据后新数组的长度
◉shift()——头部删除
语法：数组.shift()
返回值：被删除的数据
◉reveres()——数组反转
语法：数组.reveres()
返回值：反转后的数组
◉splice()
语法：数组.splice( 开始索引 ，多少个 ，要插入的数据 )
开始索引默认为：0 多少个默认：0 要插入的数据默认：0
作用：删除数组中若干数据，并选择是否插入新数据
返回值：以新数组形式返回被删除的数据
◉sort()——排序
语法：
数组.sort() 按照位排序 1,12,2,25,31,35,4,41
数组.sort( function(a,b) {return a-b} ) 从小到大
数组.sort( function(a,b) {return a-b} ) 从大到小
返回值：排序好的数组
◉join()——将数组用符号连接成字符串
语法.数组.join( 符号 )
返回值：连接好的字符串
◉concat()——拼接数组
语法：数组.concat( 其他数组 )
返回值：拼接好的数组
◉slice()——截取
语法.slice( 开始索引，结束索引 )
返回值：以数组形式返回被截取的数据
◉indexOf()——查找数据在数组中的位置
语法：数组.indexOf( 数据 )
作用：查找该数据在数组中的位置
返回值：
有该数据，返回第一次出现的位置
没有该数据，返回 -1
◉forEach()——遍历数组
语法：数组.forEach( function( item, index,arr ){ } )
item:每一项
index:数组索引
arr:原始数组
没有返回值
◉map()——映射数组
语法：数组.map( function( item, index,arr ){ } )
返回值：映射好的数组
◉filter()——过滤数组
语法：数组.filte( function( item, index,arr ){ } )
返回值：过滤好的新数组
◉every()——判断数组每一项是否满足条件
语法：数组.every( function( item, index,arr ){ return item > 50 } ) //判断是否每一项都大于50
返回值：一个布尔值
◉some()——判断数组是否有一项满足条件
语法：数组.some( function( item, index,arr ){ } )
6).字符串方法
◉charAt()——获取索引位置字符
语法：字符串.charAt( 索引 )
◉toLowerCase()——字母转换成小写
语法：字符串.toLowerCase()
返回值：转换好的字符串
◉toUpperCase()——字母转换成大写
语法：字符串.toUpperCase()
返回值：转换好的字符串
◉replace()——换内容
语法：字符串.replace( 换下内容，换上内容 )
作用：将字符串中第一个满足换下内容的片段换成换上内容，只能替换一个片段，且是第一个片段
返回值：替换好的字符串
◉trim()——去掉首尾空格
语法：字符串.trim()
返回值：去除空格后的字符串
◉split()——用分隔符切分字符串为数组
语法：字符串.split(分隔符)
返回值：切割后的数组
◉substr()–substring()–slice()——截取字符串
语法：
字符串.substr( 开始索引 ， 多少个 ) //包含开始所有
字符串.substring( 开始索引 ， 结束索引 ) //包前不包后
字符串.slice( 开始索引 ， 结束索引 ) // 包前不包后
返回值：截取出来的字符串
7).数字方法
◉random()——随机数
语法：Math.random()
返回值：
◉round()——四舍五入
语法：Math.round( 数组 )
返回值：取整以后的数字
◉ceil()–floor()——向上/下取整
语法：Math.ceil()–Math.floor()
返回值：取整后的数字
◉pow()——眯运算
语法：Math.pow( 底数，指数 )
返回值：计算后的结果
◉sqrt()——二次方根
语法：Math.sqrt( 数字 )
返回值：计算后的结果
◉abs()——取绝对值
语法：Math.abs( 数字 )
返回值：计算后的结果
◉max()——取最大值
语法：Math.max( 数字1，数字2，数字3 … )
返回值：最大值
◉min()——去最小值
语法：Math.min( )
返回值：最小值
◉PI——得到近似π的值
语法：Math.PI
返回值：π
8）时间方法
◉new Date()
创建时间对象，当前主机时间
创建规定的时间对象
◉new Data() .getFullYear()——获取年份信息
◉new Data() .getMonth()——获取月份信息
◉new Data() .getDate()——获取日期信息
◉new Data() .getHours()——获取小时信息
◉new Data() .getMinutes()——获取分钟信息
当为个位数时，前面加0
new Data() .getMinutes() < 10 ？‘0’ + new Data() .getMinutes() ： new Data() .getMinutes()；
◉new Data() .getSeconds()——获取秒钟信息
当为个位数时，前面加0
new Data() .getSeconds() <10 ? ‘0’ + new Data() .getSeconds() : new Data() .getSeconds()
◉new Data() .getDay()——获取星期信息
◉new Data() .getTime()——获取时间戳信息
5、BOM操作
一整套操作浏览器相关内容的属性和方法
1).获取浏览器可视窗口尺寸
◉获取可视窗口宽度：window.innerWidth
◉获取可视窗口高度：window.innerHeight
2).浏览器弹出层
◉提示框：window.alert( ‘提示信息’ )
◉询问框：window.confirm( ‘提示信息’ )——有确定/取消按钮，有返回值(布尔值)
◉输入框：window.promit( ‘提示信息’ )——有输入框、确定/取消按钮，返回值(输入的信息 / null)
3).开启/关闭标签页
open：在新窗口中打开
◉开启：window.open( ‘地址’ )
◉关闭：window.close( ‘’ )
4).浏览器常见事件
◉资源加载完毕：window.onload = function ( ) { }
◉可视尺寸改变：window.resize = function ( ) { }
◉滚动条位置改变：window.onscroll = function ( ) { }
5).浏览器历史记录操作
◉回退页面：window.history.back()
◉前进页面：window.history.forward()
6).浏览器卷去的尺寸
◉卷去的高度：
document.documentElement.scrollTop 当页面有标签时使用
document.body.scrollTop 当页面没有标签时使用
◉卷去的宽度：
document.documentElement.scrollLeft 当页面有标签时使用
document.body.scrollLeft 当页面没有标签时使用
7).浏览器滚动的位置
◉滚动到：window.scrollTo( )
参数方式1：window.scrollTo( left , top )
left：浏览器卷去的宽度
top：浏览器卷去的高度
参数方式2：window.scrollTo( { left:xx, top:yy, behavior:‘smooth’ } )
behavior：定位方式；smooth：表上平滑滚动；
6、定时器
1).间隔定时器
◉setInterval( 函数，时间 ) clearInterval()
函数：每次执行的内容
时间：单位是毫秒
2）延时定时器
◉setTimeout( 函数，时间 ) clearTimeout()
函数：每次执行的内容
时间：单位是毫秒
7、DOM操作
一整套操作文档流相关内容的属性和方法
1).获取元素
◉根据Id获取 document.getElementById( ‘Id名称’ )
作用：获取 id 对应的一个元素
◉根据类名获取 document.getElementsByClassName( ‘元素名称’ )
作用：获取classname 对应的所有元素
◉根据标签名获取 document.getElementsByTagName( ‘标签名’ )
作用：获取所有标签名对应的元素
◉根据选择器获取 document.querySelector( ‘选择器’ )
选择器：.class #id
作用：获取满足选择器规则的第一个元素
◉通过选择器获取一组元素 document.querySelectorAll( ‘选择器’ )
作用：获取满足选择器规则的所有元素
2).操作元素内容
◉操作文本内容
获取：元素.innerText
设置：元素.innerText = ‘新内容’
◉操作超文本内容
获取：元素.innerHTML
设置：元素.innerHTML = ‘新内容’
3).操作元素属性
◉原生属性
获取：元素.属性名
设置：元素.属性名 = ’属性值‘
◉自定义属性
获取：元素.getAttribute( ‘属性名’ )
设置：元素.getAttribute( ‘属性名’，‘属性值’ )
删除：元素.removeAttribute( ‘属性名’ )
4).操作元素类名
获取：元素.className
设置：元素.className = ‘新类名’
5).操作元素行内样式
获取：元素.style.样式名
设置：元素.style.样式名 = ’样式值‘
6).获取元素非行内样式
获取：window.getComputedStyle(元素).样式名
可以取行内样式，也可以取非行内样式
设置：只能通过代码设置行内样式
7).节点操作
◉创建
语法：document.createElement( ‘标签名’ )
◉插入
语法：父节点.appendChild( 子节点 ) 把子节点放在父节点里，并且放到最后的位置
父节点.insertBefore( 要插入的节点，哪一个子节点前面 ) 把子节点放在父节点里，并且放到指点的子节点前面
◉删除
语法：父节点.removeChild( ‘子节点’ ) 从父节点删除一个子节点
节点.remove() 把自己删除
◉替换
语法：父节点.replaceChild( 换上节点，换下节点 )
◉克隆
语法：节点.cloneNode( 是否克隆后代节点 )
8).获取元素尺寸
◉元素.offsetHeight
元素.offsetWidth
获取 内容 + padding + border 的尺寸
◉元素.clientHeight
元素.clientWidth
获取 内容 + padding 的尺寸
8、事件
1).事件绑定三要素
◉事件源：和 谁 约定
◉事件类型：约定什么行为
◉事件处理函数：事件执行的代码
2).语法
◉事件源.on事件类型 = 事件处理函数
3).事件类型
4).事件对象信息
通过function( e )获取
◉鼠标事件
offsetX/Y：触发事件的元素的位置（盒子）
clientX/Y：相对应浏览器可视窗口的坐标位置
pageX/Y：相对应页面文档流的位置
◉键盘事件
键盘编码 事件对象.keyCode 根据编码判断是哪个按键
5).事件传播
浏览器响应事件的机制：
6).阻止事件传播
语法：事件对象.stopPropagation( )