API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能
获取元素
根据ID获取
语法:document.getElementById(id)
返回值:元素对象 或 null
根据标签名获取元素
语法:document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
返回值:元素对象集合(伪数组,数组元素是元素对象)
根据类名获取元素 (h5新增)
document.getElementsByClassName(‘类名’) //返回元素对象集合
根据选择器获取元素 (h5新增)
document.querySelector(‘选择器’) //返回第一个元素对象
document.querySelectorAll(‘选择器’) //根据指定选择器返回
获取body元素
document.body
获取html元素
document.documentElement
事件基础
事件三要素
执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
常见的鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
修改元素内容(获取或设置)
element.innerText 从起始到终止位置的内容,但不识别html标签,空格和换行也会去掉
element.innerHTML 从起始到终止位置的内容,但识别html标签,空格和换行也会保留
属性操作
获取属性的值: 元素对象.属性名
设置属性的值: 元素对象.属性名=值
样式属性操作
element.style 行内样式操作
element.className 类名样式操作
排他思想
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
自定义属性操作
获取属性值
1.element.属性 //获取内置属性(元素本身自带的属性)
2.element.getAttribute(’属性值’) //主要获得自定义的属性,程序员自定义的属性
设置属性值
1.element.属性 = ‘值’ //设置内置属性值
2.element.setAttribute(’属性值’,‘值’) //主要设置自定义的属性
移出属性
element.removeAttribute(‘属性’);
H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
比如:element.setAttribute('data-index',2)
获取H5自定义属性
element.dataset.属性名
element.dataset[’‘属性名’]
节点操作
元素节点 nodeType为1 //实际开发中的主要操作对象
属性节点 nodeType为2
文本节点 nodeType为3(包含文字、空格、换行等)
父级节点
node.parentNode //返回最近的一个父节点,没有则返回null
子节点
1.parentNode.childNodes //会返回所有节点
2.parentNode.children //只返回子元素节点,其余节点不返回,重点使用这个
第1个子节点:parentNode.firstElementChild
最后一个子节点:parentNode.lastElementChild
兄弟节点
node.nextElementSibling 返回下一个兄弟元素节点
node.previousElementSibling 返回上一个兄弟元素节点
创建节点
document.createElement(‘tagName’)
添加节点
node.appendChild(节点名) //将一个节点添加到指定父节点的子节点列表末尾,类似于css里的after伪元素
node.insertBefore(节点名,指定元素) //将一个节点添加到父节点指定的子节点前面,类似于css里的before伪元素
删除节点
node.removeChild(child)
说明:node.removeChild() 方法从 node节点中删除一个子节点,返回删除的节点。
复制(克隆)节点
node.cloneNode() ; // 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
node.cloneNode(true); //括号为true 深拷贝 复制标签复制里面的内容
document.write创建元素
语法:
区别:
方法事件监听addEventListener()
同一个元素同一个事件可以注册多个监听器(事件处理程序)
// 参数1:事件类型,它是字符串 必定加引号 而且不带on
// 参数2:事件处理程序
btns[1].addEventListener('click', function() {
alert(22);
})
btns[1].addEventListener('click', function() {
alert(33);
})
attachEvent()事件监听
eventTarget.attachEvent(eventNameWithOn, callback)
比如: btns[2].attachEvent('onclick', function() {
alert(11);
}) // attachEvent ie9以前的版本支持 这里的事件需要带on
删除事件(解绑事件)
1. eventTarget.removeEventListener(type, listener[, useCapture]);
//针对addEventListener()
2. eventTarget.detachEvent(eventNameWithOn, callback);
//针对attachEvent()
DOM 事件流
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。
注意:
事件对象
eventTarget.onclick = function(event) {
// 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt
})
事件对象的属性和方法
事件对象属性方法 | 说明 |
---|---|
e.target | 返回触发事件的对象 标准 |
e.srcElement | 返回触发事件的对象 非标准 ie6-8使用 |
e.type | 返回事件的类型 比如click mouseover 不带on |
e.cancelBubble=true | 该属性阻止冒泡排序 非标准 ie6-8使用 |
e.returnValue=false | 阻止默认事件(默认行为) 非标准 ie6-8使用 比如不让链接跳转 |
e.preventDefault() | 阻止默认事件(默认行为) 标准 比如不让链接跳转 |
e.stopPropagation() | 阻止冒泡排序 |
e.target 和 this 的区别
阻止默认行为
<a href="http://www.baidu.com">百度</a>
<script>
// 2. 阻止默认行为 让链接不跳转
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
});
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
e.returnValue = false;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
return false;
}
</script>
阻止事件冒泡
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation();
window.event.cancelBubble = true;
}, false);
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
事件委托
事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
禁止鼠标右键菜单
contextmenu事件:鼠标右键菜单事件。主要控制应该何时显示上下文菜单(右键菜单),主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
禁止鼠标选中
selectstart 事件:鼠标选中事件,用于界面文字防止选中
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
e.pageX | 返回鼠标相对于整个文档页面的X坐标 IE9+支持 |
e.pageY | 返回鼠标相对于整个文档页面的Y坐标 IE9+支持 |
e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
常用键盘事件
键盘事件 | 触发条件 |
---|---|
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 被按下时触发 |
onkeypress | 被按下时触发 但不识别功能键 比如ctrl shift 箭头等 |
onkeyCode | 返回该键的ASCII值 |
如果使用addEventListener 不需要加 on
三个事件的执行顺序是: keydown – keypress — keyup (按下–按住–抬起)
keyCode判断用户按下哪个键
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
console.log(e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log(e.keyCode);
})
</script>
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
页面(窗口)加载事件
第一种——语法:
window.onload = function(){}
或者
window.addEventListener("load",function(){});
第二种——语法:
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
调整窗口大小事件
语法:
window.onresize = function(){}
window.addEventListener("resize",function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
window.innerWidth 当前屏幕的宽度
定时器
setTimeout()
window.setTimeout(回调函数, [延迟的毫秒数]);
清除定时器:
window.clearTimeout(定时器名字)
setInterval() 闹钟定时器
window.setInterval(回调函数, [间隔的毫秒数]);
和setTimeout用法类似
清除定时器:
window.clearInterval(intervalID);
this指向问题
location对象
获取或设置窗体的 URL,并且可以用于解析 URL
URL 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
location 对象的属性
location 对象属性 | 返回值 |
---|---|
location.href | 获取或设置整个URL |
location.host | 返回主机(域名) |
location.port | 返回端口号 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容 常见于链接 锚点 |
location对象的常见方法
location对象方法 | 返回值 |
---|---|
location.assign() | 和href一样,可以跳转页面 |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退 |
location.reload() | 重新加载页面,相当于刷新按钮或者F5 如果参数为true 强制刷新 |
navigator对象
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值
下面前端代码可以判断用户那个终端打开页面,实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
history对象
与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL
history对象方法 | 作用 |
---|---|
back() | 后退功能 |
forward() | 前进功能 |
go(参数) | 前进后退功能 参数是1则前进1个页面 参数是-1 后退1个页面 |
JS执行机制
同步:先做一件事情,然后再做另一件事情。他是单线程,一个人依次做多件事情
异步:是两件事情同时去做,他是多线程,多个人同时做多个事情
元素偏移量 offset
offset属性 | 作用 |
---|---|
element.offsetParent | 返回该元素带有定位的父元素 如果父级都没有定位则返回body |
element.offsetTop | 返回该元素相对带有定位父元素上方的偏移量 |
element.offsetLeft | 返回该元素相对带有定位父元素左边的偏移量 |
element.offsetWidth | 返回自身padding、边框、内容区的宽度 |
element.offsetHeight | 返回自身padding、边框、内容区的高度 |
注意:返回的数值都不带单位
offset 与 style 区别
offset:想要获取元素大小位置,用offset更合适
style:想要给元素更改值,则需要用style改变
获取鼠标在盒子内的坐标
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})
client
通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等
client系列属性 | 作用 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.clientHeight | 返回自身包括padding、内容区的高度,不含边框,返回数值不带单位 |
立即执行函数
创建一个独立的作用域,避免了命名冲突问题
pageshow
元素滚动 scroll
scroll系列属性 | 作用 |
---|---|
element.scrollTop | 返回被卷去的上侧距离 |
element.scrollLeft | 返回被卷去的左侧距离 |
element.scrollWidth | 返回自身实际的宽度,不含边框 |
element.scrollHeight | 返回自身实际的高度,不含边框 |
返回数值均不带单位
页面被卷去的头部
可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset
注意,元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
页面被卷去的头部兼容性解决方案
需要注意的是,获取页面被卷去的头部高度,有兼容性问题,因此通常有如下几种写法:
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//使用的时候 getScroll().left
mouseenter 和mouseover的区别
mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发,因为mouseenter不会冒泡。
跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
简单动画函数封装
function animate(obj目标对象, target目标位置){…}
给不同元素记录不同定时器
核心原理:利用 JS 是一门动态语言,可以很方便的给当前对象添加属性。
function animate(obj, target) {
// 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
动画函数多个目标值之间移动
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路:
// 1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢落下来。
// 2. 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function () {
// 调用函数
animate(span, 500);
})
btn800.addEventListener('click', function () {
// 调用函数
animate(span, 800);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
</script>
动画完整版代码
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路:
// 1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢落下来。
// 2. 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
if (callback) {
// 调用函数
callback();
}
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function () {
// 调用函数
animate(span, 500);
})
btn800.addEventListener('click', function () {
// 调用函数
animate(span, 800, function () {
// alert('你好吗');
span.style.backgroundColor = 'red';
});
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
</script>
节流阀
当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发,利用回调函数,添加一个变量来控制,锁住函数和解锁函数
返回顶部
常见的触屏事件
触屏touch事件 | 说明 |
---|---|
touchstart | 手指触摸到一个DOM元素时触发 |
touchmove | 手指在一个DOM元素上滑动时触发 |
touchend | 手指从一个DOM元素上移开时触发 |
触摸事件对象(TouchEvent)
TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
触摸列表 | 说明 |
---|---|
touches | 正在触摸屏幕的所有手指的一个列表 |
targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
changedTouches | 手指状态发生了改变的列表,从无到有,从有到无的变化 |
因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes
移动端拖动元素
<script>
// (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置
// (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
// (3) 离开手指 touchend:
var div = document.querySelector('div');
var startX = 0; //获取手指初始坐标
var startY = 0;
var x = 0; //获得盒子原来的位置
var y = 0;
div.addEventListener('touchstart', function(e) {
// 获取手指初始坐标
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
div.addEventListener('touchmove', function(e) {
// 计算手指的移动距离: 手指移动之后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
// 移动我们的盒子 盒子原来的位置 + 手指移动的距离
this.style.left = x + moveX + 'px';
this.style.top = y + moveY + 'px';
e.preventDefault(); // 阻止屏幕滚动的默认行为
//如果不阻止,当粉色盒子滚出界面之后会出现滚动条
});
</script>
注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
transitionend
监听过渡完成的事件对象
语法: element.addEventListener(‘transitionend’,函数);
classList 属性
返回元素的类名。但是ie10以上版本支持
添加类:
element.classList.add(’类名’);
focus.classList.add('current');
移除类:
element.classList.remove(’类名’);
focus.classList.remove('current');
例:ol.querySelector('.sty').classList.remove('sty');
切换类:
element.classList.toggle(’类名’); 有这个类名则移除,没有则添加
focus.classList.toggle('current');
注意:以上方法里面,所有类名都不带点
click 延时解决方案
移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
解决方案:
1. 禁用缩放: 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。
<meta name="viewport" content="user-scalable=no">
2.利用touch事件自己封装这个事件解决300ms 延迟。
原理就是:
当我们手指触摸屏幕,记录当前触摸时间
当我们手指离开屏幕, 用离开的时间减去触摸的时间
如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击
代码如下:
//封装tap,解决click 300ms 延时
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener('touchstart', function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener('touchmove', function (e) {
isMove = true; // 看看是否有滑动,有滑动算拖拽,不算点击
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function(){ // 执行代码 });
3.使用插件:fastclick 插件解决300ms 延迟
Swiper 插件
中文官网地址: https://www.swiper.com.cn/
其他移动端常见插件
lsuperslide: http://www.superslide2.com/
l iscroll: https://github.com/cubiq/iscroll
1.打开demo实例文件,查看需要引入的相关文件,并且引入
2.复制demo实例文件中的结构html,样式css以及js代码
移动端视频插件
zy.media.js
Bootstrap
Bootstrap JS插件使用步骤:
1.引入相关js 文件
2.复制HTML 结构
3.修改对应样式
4.修改相应JS 参数
本地存储
1、容量较大,sessionStorage约5M、localStorage约20M
2、只能存储字符串,可以将对象JSON.stringify() 编码后存储
window.sessionStorage (session:会话)
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据:
sessionStorage.setItem('key', 存的内容)
获取数据:
sessionStorage.getItem('key')
删除数据:
sessionStorage.removeItem('key')
清空数据:(所有都清除掉)
sessionStorage.clear()
window.localStorage
1、声明周期永久生效,除非手动删除 否则关闭页面也会存在
2、可以多窗口(页面)共享(同一浏览器可以共享)
3、以键值对的形式存储使用
存储数据:
localStorage.setItem('key', value)
获取数据:
localStorage.getItem('key')
删除数据:
localStorage.removeItem('key')
清空数据:(所有都清除掉)
localStorage.clear()
change事件
当选框发生改变的时候可以使用change事件