方法总结
第一天
数据类型与方法
Boolean 布尔型
Number 数字型
undefined 声明未定义
null 空值
String 字符型
length 长度
typeof 检测数据类型
isNaN() 检测是否是字符型
parseInt 取整
parseFloat取浮点数
continue 退出本次循环
break 退出整个循环
第二天
内置对象 Array
arguments 存储函数传过来的所有实参（每个函数自带的方法）
Array方法
检测是否是数组的方法
变量 instanceof Array 运算符
Array.isArray（数组） h5 新增的
常用的方法
1.push() 在数组末尾添加
2.unshift() 在数组前面添加
3.pop() 删除数组最后一个 一次删除一个
4.shift() 删除第一个 只能删除一个
5.reverse 翻转数组
6.sort 冒泡排序
更多方法查看文档
indexof() 从前面查找索引值
join() 不选默认为逗号分隔
第三天
字符串常用方法
charAt(index) 返回指定位置的字符
charCodeAt(index) 获取指定位置的ascll码 a = 97
str[index] h5新增的
substr['起始位置' ，‘截取长度’] 从什么地方截取 截取的长度
更多方法查看文档
DOM获取元素的方法
document.getElementById('id')//获取id 而且以obj形式返回
document.getElementsByTagName('li')//获取所有元素标签 以伪数组返回
document.getElementsByClassName('box') //获取所有的class类名为box
document.querySelector('.box')//顺序执行 遇到第一个的class类名为box的
document.querySelectorAll('.box')//获取全部class类名为box的
document.body; //获取body标签
document.documentElement;//获取html标签
// 获取某个标签下的所有li元素
document.getElementById('ol')
ol.getElementsByTagName('li')
DOM改变元素内容的方法
//不能识别html标签 去除空格和换行
element.innerText
//能识别html标签 保留空格和换行
element.innerHtml
DOM改变样式的方法
element.style //行内样式
//添加少的样式可以使用这个
element.calssName //类名样式操作
//添加多的样式 使用这个添加整个类
DOM操作属性
//获取属性
element.属性
element.getAttribute('属性')
//区别：
element.属性 获取内置属性值（元素本身自带的属性值）
element.getAttribute('属性')； 主要获取自定义属性值
//设置属性
element.属性
element.setAttribute('属性')
//区别：
element.属性 获取内置属性值（元素本身自带的属性值）
element.setAttribute('属性','值');主要修改自定义属性值
//删除属性值
element.removeAttribute('属性');主要删除自定义属性值
都是重点
join() 可以分割数组里面的值
replace( '被替换的字符','替换为的字符') 替换字符 一次只替换一个
split（'分隔符'）可以把一个字符串通过分隔符 割成数组
第四天
自定义属性
<div getTime='20'></div>
//用这个方法能获取到属性 但是不知道是自定义属性还是内置属性
div.getAttribute('getTime')
//于是h5就想到了方法 规范自定义属性（data-XXXX）以data-命名
div.dataset //里面放了所有以data开头的自定义属性
div.dataset.index
DOM节点操作
重点
children //获取子节点（建议）
parentNode //获取上一级 （父节点）
lastElementChild //最后一个节点
firstElementChild //第一个节点
ol.children[0] //获取第一个
ol.children[ol.children.length -1] //获取最后一个
// 获取兄弟元素节点不包扩标签 兼容i9以上
div.nextElementSibling //下一个
div.previousElementSibling//上一个
parentNode //获取上一级 （父节点）
childNodes //获取子节点（麻烦不建议）
children //获取子节点（建议）
//获取
//获取第一个子节点
firstChild // 获取第一个子元素节点 包含标签等等
lastChild // 获取最后一个子元素节点 包含标签等等
//于是就有了下面中 但是兼容i9以上
lastElementChild //最后一个节点
firstElementChild //第一个节点
//开发都这样子写 因为兼容性好
ol.children[0] //获取第一个
ol.children[ol.children.length -1] //获取最后一个
// 获取兄弟元素节点 包括标签什么什么的节点
div.nextSibling
div.previousSibling
// 获取兄弟元素节点不包扩标签 兼容i9以上
div.nextElementSibling
div.previousElementSibling
//创建
var li = document.createElement('li')
//获取ul节点（父级）
var ul = document.querySelector('ul')
//添加节点 父级.appendChild(添加的子集)
ul.appendChild(li)
ul.insertBefore(li,ul.children[0])//添加到第一条
ul.appendChild()//在尾部添加
//删除
ul.removeChild(ul.children[0])//删除第一条
cloneNode //复制
需要复制的内容.cloneNode(true)//true深拷贝 false浅拷贝
DOM事件侦听
//可以添加多个侦听器
var btn = document.querySelector("button")
btn.addEventListener("click", function() {
alert("11")
})
btn.addEventListener("click", function() {
alert("22")
})
//删除事件(解绑事件)
//1.传统删除事件
var box = document.querySelectorAll('div')
box[0].onclick = function() {
lert('11111')
box[0].onclick = null
}
//2.使用removeEventListener
box[1].addEventListener('click',fn1);
function fn1() {
alert('222')
box[1].removeEventListener("click", fn1);
}
//3.IE8 attachEvent监听 detacgEvent 删除
box[2].attachEvent("onclick",fn2);
function fn2() {
box[2].detacgEvent('onclick',f2)
}
DOM事件对象(重)
var div =document.querySelector('div')
div.onclick = function(event) {
}
//event就是一个事件对象
//事件就是 点击事件这些
//事件对象只有有了事件才会存在 系统自动创建
//触发了事件后 会把跟事件相关的一系列信息数据的集合都放在event
常见的event属性及其方法
1. e.target 和this 的区别
1. e.target 点击那个元素就返回那个
2. this是哪个绑定了就返回哪个
2. e.type 返回触发事件的名字
3. e.preventDefault();阻止默认行为（事件）让链接不跳转啥啥啥的
4. e.stopPropagation() 阻止冒泡 //兼容性问题
5. e.cancelBubble = true //冒泡兼容ie浏览器
//鼠标在可视区的xy轴
6. e.clientX
7. e.cliectY
//鼠标相对文档页面的xy距离
8. e.pageX
9. e.pageY
// 鼠标距离电脑屏幕的xy轴
10. e.screenX
11. e.screenY
DOM事件 触发条件 (重点)
用addEventListener监听事件前面不用加on 比如onclick
click //鼠标点击左键触发
mouseover //鼠标经过触发 子类会触发 （冒泡）
mouseenter //鼠标经过触发 只有自己会触发
mouseout //鼠标离开触发
useleave //鼠标离开触发 只有自己触发
focus //获得鼠标焦点触发
blur //失去鼠标焦点触发
mousedown //鼠标按下
mousemove //鼠标移动触发
mouseup //鼠标松开
keyup //某个键盘被松开
keydown //某个键盘被按下 不区分大小写
keypress //某个键盘按键被按下时候触发 不识别ctrl和shift 箭头 区分大小写
textmenu //禁止右键
selectstart //禁止选中文字
focus //得到焦点
blur //失去焦点
scroll //滚动事件
change //当数据发生改变的时候
第五天
定时器（重要）
// 1. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
// 2. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这 个函数
location对象(获取地址栏内容)
重点几个
//对象方法
location.assign() //跟href一样，可以跳转页面 可以后退
location.replace()//替换当前页面 不记录历史 没得后退
location.reload() // 重新加载页面 就是刷新页面
history对象 （前进后退）
back() 可以后退
forward() 前进功能
go（参数）前进后退功能 参数是整数就前进 负数就后退
offset (获取位置与属性)
element.offsetParent
//返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
element.offsetTop
//返回元素相对带有定位父元素上方的偏移
element.offsetLeft
//返回元素相对带有定位父元素左边框的偏移
element.offsetWidth
//返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight
//返回自身包括padding、边框、内容区的高度,返回数值不带单位
client与offset差不多
获取元素的宽高等等 不包括padding、边框、内容区的宽度
用法查看mdn
scroll 滚动条系列
scroll滚动事件
element.scrollTop //距离顶部 返回值不带参数
element.scrollLeft //距离右侧 返回值不带参数
element.scrollWidth //实际高度 不含边框 返回值不带参数
element.scrollHeigh //实际宽度 不含边框 返回值不带参数
//页面被卷去的头部
window.pageYOffset
window.pageXOffset
//一般用法
scrollTop-pageYoffset
offset、client、scroll总结
1. offset 系列经常用于获取的元素位置 offsetleft offsettop
2. client 经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面滚动的距离通过window.pagexOffset 获得
第六天
移动端的事件
touchstart // 手机触摸到一个DOM元素时触发 ('点击')
touchmove // 手指在一个DOM元素上滑动触发 ('点击移动')
touchend // 手指从一个DOM元素上移开触发 ('点击松开')
//拖动事件
touchstart
touchmove
touchend
//等全部执行完 再去判断 监听事件
transitionent
e的掌握点
// console.1og(e);
//touches正在触摸屏幕的所有手指的列表
// targetTouches 正在触摸当前DOM元素的手指列表
// 如果侦听的是一 个DOM元素，他们两个是一样的
// changedTouches 手指状态发生了改变的列表从无到有或者从有到无
sessionStorage 与localStorage本地存储
sessionStorage
//关闭浏览器就自动清除
sessionStorage.setItem(key,value) //存储数据
sessionStorage.getItem(key)//获取数据
sessionStorage.removeItem(key)//删除数据
sessionStorage.clear()//清除全部
localStorage
//永久生效 除非手动删除
localStorage.setItem(key,value) //存储数据
localStorage.getItem(key)//获取数据
localStorage.removeItem(key)//删除数据
localStorage.clear()//清除全部
增加删除切换类名
pc端的是 className 移动端是classList
classList.add()//添加
classList.remove()//删除
classList.toggle()//切换
插件
fastclick插件清除所有点击事件延迟
swiper插件 国服最强轮播图
www.swiper.com.cn/usage/index…
superslide 组件库
www.superslide2.com/howToUse.ht…
