-3 WebAPI
WebAPI
-
WebAPI
-
API: Application programming Interface，应用程序编程接口
-
Web API 提供的一套操作浏览器功能和页面元素的API
-
通过DOM接口可以改变网页的内容、解构和样式
-
DOM
-1 创建元素
- document.write
- innerHTML 常用
- createElement
-2 增加元素
- appendChild
- insertBefore
-3 删除元素
- removeChild
-4 修改元素
- 修改属性： src href title
- 修改普通元素内容： innerHTML innerText
- 修改表单元素： value type disabled
- 修改元素样式： style className
-5 查找元素
- DOM提供的API方法： getElementById getElementsByTagName
- H5提供的新方法： querySelector querySelectorAll 常用
- 利用节点操作获取元素： (父)parentNode (子)children previousElementSibling
nextElementSibling
-6 属性操作
- setAttribute 设置DOM属性
- getAttribute 得到DOM属性
- removeAttribute 移除属性
-7. 事件操作
- onclick
- onmouseover
- onmouseout
- onfocus
- onblur
- onmousemove
- onmouseup
- onmousedown
1.1 获取标签
1 web_API
#1_ DOM:Document Object Model
- 文档：一个页面就是一个文档，DOM中使用 document 表示
- 元素(element):页面中的所有的标签都是元素,元素可以看成是对象
- 节点(node):页面中所有的内容都是节点:标签,属性,文本
- 树状图(DOM树):由文档及文档中的所有的元素(标签)组成的一个树形结构图
--- #1 获取标签
-- document.getElementById("btn")
-- document.getElementsByTagName("p") //根据标签名字获取元素,返回的是一个伪数组
-- document.getElementsByTagName("a")[0]
-- document.getElementsByName("name属性的值") //根据name属性的值获取元素,返回来的是一个伪数组
-- document.getElementsByClassName("cls")
-- document.querySelector("#btn") //根据选择器获取元素,可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素
-- document.querySelector(".box") //万用属性获取元素，较常用
-- document.querySelector("li")
-- document.querySelectorAll(".cls") //根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
-- var bodyEle = document.body // 返回body元素对象
-- var htmlEle = document.documentElement //返回html元素对象
-- #2节点操作，利用节点层次关系获取元素
- nodeType: 节点的类型,1---标签节点,2----属性节点,3---文本节点
- nodeName: 标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text
- nodeValue: 标签---null,属性---属性的值,文本---文本内容
- ulObj.parentNode.nodeType
- ulObj.parentNode.nodeName
- ulObj.parentNode.nodeValue
- dvObj.childNodes //获取子节点，包括元素节点，文本节点等
- var nodes=dvObj.childNodes[i]; //获取里面的每个子节点，返回一个集合
- if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") //判断这个子节点是不是p标签
- dvObj.children //只获取子元素节点，常用
- ulObj.children[0] //获取第一个子元素节点，常用
- ulObj.children[ul.children.length -1] //获取最后一个子元素节点，常用
- ulObj.firstElementChild //获取第一个子元素节点
- ulObj.lastElementChild
- .nextSibling //某个元素的后一个兄弟节点，包含文本节点，元素节点等等
- .previousSibling
- .nextElementSibling //后一个兄弟元素节点，常用
- .previousElementSibling
- 获取元素/节点操作对比
- ulObj.parentNode - ulObj.parentElement //父级节点 //父级元素
- ulObj.childNodes - ulObj.children
- ulObj.firstChild - ulObj.firstElementChild
- ulObj.lastChild - ulObj.lastElementChild
- .previousSibling - .previousElementSibling //某个元素的前一个兄弟节点；某个元素的前一个兄弟元素
- .nextSibling - .nextElementSibling//某个元素的后一个兄弟节点；某个元素的后一个兄弟元素
- 节点选择比元素选择多一个中间空白#text
- var node=dvObj.getAttributeNode("id"); //获取的是属性的节点
1.2 元素的样式操作
--- #2 元素的样式操作
-- JS 修改的 style 样式，产生的是行内样式，CSS 权重比较高
-- src,title,alt,href,id //操作基本标签的属性
-- name,value,type,checked,selected,disabled,readonly //操作表单标签的属性
-- .style.属性=值; //元素的样式操作
-- .className=值;
-- element.style 行内样式类操作
-- element.className 类名样式类操作，会覆盖原先类名，可以写多个保留原来的类名
-- img
- imObj.src="images/liuyan.jpg"; //设置图片的大小
- imObj.width="300";
- imObj.height="400";
- imObj.style.width = "300px";
- imObj.style.backgroundColor = "pink";
-- btn/a
- btnObj.innerText="设置文字";
- btnObj.href = "http://www.itcast.cn";
- btnObj.checked=true;
- this.src=document.getElementById("ak").href;
- this.value.length
-- div
- dvObj.style.width = "300px";
- dvObj.style.backgroundColor = "yellow";
- dvObj.style.border = "10px solid red";
- dvObj.style.display="none";
- dvObj.display="block";
- dvObj.className="cls"; //设置类样式
-- 表单
- inputObJ.value = '设置输入框内的文字'
-- 伪数组
- 循环遍历这个数组，
- imgObjs[0].alt = "改了";
- imgObjs[0].title = "现实吧";
- inputs[i].value = "设置文字";
- inputs[i].type != "button";//判断
- imgObjs[i].onclick;
-inputs[i].value
1.3 元素内容操作
--- #3 元素内容操作
- pObjs[i].innerText="设置文字"; //直接显示，不识别html标签
- document.getElementsByTagName("p")[0].innerText //获取文本框的值
- textContent
- .innerHTML="这是一个p
" //设置新的html标签内容,识别html标签。常用
-- 函数操作。常用
- imgObjs[i].onclick //注册点击事件
- list[i].onmouseover //注册事件
- list[i].onmouseout
- .onblur //注册失去焦点的事件
- .onfocus //注册获取焦点的事件
- return false //阻止超链接默认的跳转事件
-- 获取属性值
- element.属性 获取属性值，获取的是本身自带的属性值
- element.getAttribute('属性') 获取的是自定义的属性值
-- 设置属性值
- element.属性= '值' 获取属性值，获取的是本身自带的属性值
- element.setAttribute('属性'，'值') 获取的是自定义的属性值
-- 自定义属性
- list[i].setAttribute("score",(i+1)*10); /setAttribute("属性的名字","属性的值");
- this.getAttribute("score") /getAttribute("属性的名字")
- my$("dv").removeAttribute("score") / 移除自定义属性:removeAttribute("属性的名字")
- my$("dv").removeAttribute("class") /移除元素自带的样式属性
--H5自定义属性
- 为了保存并使用数据，data-开头作为属性并且赋值
-
- element.setAttribute('data-index',2) //设置属性
- element.getAttribute('data-index') //获取属性值
//dataset 是一个集合里面存放了所有以data开头的自定义属性,只能获取data-开头
- element.dataset.index //获取属性值
- element.dataset[ 'index' ] //获取属性值
1.4 元素的创建和移除
--- #4 元素的创建
-- document.write("标签代码及内容");
//如果在页面加载完毕后创建元素.页面中的内容会被干掉，会导致页面重绘
- document.write("这是一个p
");
-- 父级对象.innerHTML="标签代码及内容"; //创建并插入
- my$("dv").innerHTML="窗前明月光,疑是地上霜,举头望明月,低头思故乡
";
// 拼接字符串较耗时，数组方式可提高效率
-- document.createElement("标签名字"); //创建元素节点，常用
- var pObj = document.createElement("p"); //先创建，再插入
- divObj.appendChild(pObj)
- setInnnerText(元素对象，"元素内容"); //插入内容
- setInnnerText(pObj, "这是一个标签p");
- 父级元素.appendChild(子级元素对象); //添加节点，后面追加元素
- my$("dv").appendChild(obj)
//添加节点，选择位置追加元素
- 父级元素.inerstBefore(新的子级对象,参照的子级对象);
- my$("dv").insertBefore(obj,my$("dv").firstElementChild)
- 父级元素.removeChild(要干掉的子级元素对象); //删除节点
- my$("dv").removeChild(my$("dv").firstElementChild)
-- node.cloneNode() //克隆节点，默认只复制标签，不复制内容
-- var li = ul.children[0].cloneNode(true);
ul.appendChild(li);//括号内为true，为深拷贝,会复制节点本身以及里面所有的子节点
1.5 事件
--- #5 事件的绑定和解绑
-- 1. 对象.on事件名字=事件处理函数 /如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了
事件源.事件类型 = 事件处理程序
- my$("btn").onclick=function(){};
- onclick
- onmousenter
- onmouseover
- onmouseout
- onfocus
- onblur
- onmousemove
- onmouseup
- onmousedown
-- 为同一个元素绑定多个相同的事件
-- 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);
- my$("btn").addEventListener("click",function(){},false);
- my$("btn").addEventListener("click",f1,false);
- my$("btn").removeEventListener("click",f1,false); //解绑
- divs[0].onclick = null; //解绑
-- 3. 对象.attachEvent("有on的事件名字",事件处理函数); /仅IE8支持
- my$("btn").attachEvent("onclick",function(){});
- my$("btn").attachEvent("onclick",f1);
-- my$("btn").detachEvent("onclick",f1);
-- 事件对象
- event 是一个事件对象，是事件的一系列相关数据的集合
- div.addEventListener('click',function(event){
consoel.log(event);
})
- e.target 返回触发事件的对象
- e.currentTarget 返回触发事件的对象， ie6-8不兼容
- e.srcElement 返回触发事件的对象， ie6-8使用
- e.type 返回事件的类型，如 click mouseover 不带on
- e.cancelBubble 该属性阻止冒泡， ie6-8使用
- e.returnValue 该属性阻止默认事件，如不让链接跳转， ie6-8使用
- e.preventDefault() 该方法阻止默认事件，如不让链接跳转
- e.stopPropagation() 阻止冒泡，标准
-- 鼠标事件 mouseEvent -mousemove
- e.clientX 返回鼠标相对于浏览器窗口可视区域的X
- e.clientY 返回鼠标相对于浏览器窗口可视区域的Y
- e.pageX 返回鼠标相对于文档页面的 X 坐标，IE9+ 常用
- e.pageY 返回鼠标相对于文档页面的 Y 坐标，IE9+ 常用
- e.screenX 返回鼠标相对于电脑屏幕的 X 坐标
- e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标
-mouseenter mouseenter不会冒泡，只会经过自身盒子触发
-mouseleave
-mouseover 会冒泡
-mouseout
-- 键盘事件
- onkeyup 某个键盘按键被松开时触发，不区分字母大小写
- onkeydown 某个键盘按键被按下时触发，不区分字母大小写
- onkeypress 某个键盘按键被按下时触发，不能识别功能键，区分字母大小写
- 执行顺序 keydown -- keypress -- keyup
- e.keyCode 相应键的ASCII值
-
-- 事件委托
- 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
- 案例： 给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
-- 为同一个元素绑定多个不同的事件,指向相同的事件处理函数
- switch(e.type)-case
--- #6 事件冒泡
-- 多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
-- document > html > body > div
-- e.stopPropagation(); // 谷歌和火狐支持
-- window.event.cancelBubble=true; // IE特有的
#3_ 思维
-- 动态选择效果 先设置好静态效果，再循环遍历注册元素点击事件，在点击时去清除样式和添加样式。
-- 排他功能 循环遍历每次点击设置一次属性值的初始化
-- 命名函数 如果是循环的方式添加事件,推荐用命名函数
-- 匿名函数 如果不是循环的方式添加事件,推荐使用匿名函数
--- #7 动画函数封装
-核心原理：通过定时器 setInterval() 不断移动盒子位置
1.5 事件实例代码
//1 阻止默认事件，让链接不跳转，或让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e){
e.preventDefault();
})
//传统写法
a.onclick = function(e){
e.preventDefault(); //普通浏览器
e.returnValue; // 低版本浏览器 ie6~8
return false; // 但是return 后面的代码不执行
}
//2 阻止冒泡兼容方案
if (e && e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
//3 事件监听
- 点击弹框
- 点击弹框
- 点击弹框
- 点击弹框
- 点击弹框
//事件委托核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click',function(){
// alert('点击弹框');
// e.target 可以得到点击对象
e.target.style.backgroundColor = 'black';
})
//4 禁止复制页面中的文字
//1 contextmenu 禁止右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
//2 selectstart禁止选中文字
document.addEventListener('selectstart', function(e){
e.preventDefault();
})
//5 跟随鼠标移动的图标
//每次移动鼠标，能获取最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
//图片要移动距离，且不占位置，需使用绝对定位
//6 常用键盘事件
document.onkeyup = functon(){
console.log('keyup');
}
document.addEventListener('keyup', function(){
console.log('keyup');
})
document.addEventListener('keydown', function(){
console.log('keydown');
})
document.addEventListener('keypress', function(){
console.log('keypress');
})
//7 按下s键自动定位搜索框
//检测到用户按下了s键，就把光标定位到搜索框里面
var search = document.querySelector('input');
document.addEventListener('keyup', function(e){
if(e.keyCode === 83){
search.focus();
}
})
//8 输入框上方显示放大内容
//给表单添加键盘事件，把表单内容值 value 获取过来赋值给放大盒子
123
1.6 元素实例代码
//1分时显示不同图片
上午好
//2用户登录框，切换登录框
//一个按钮两个状态，点击一次切换为文本框继续点击一次切换为密码框
//3点击关闭二维码图片
X
//1. 获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
//2. 注册事件,程序处理
btn.onclick = function(){
box.style.display = 'none'; //改变属性,隐藏
}
//4循环精灵图背景
//背景图为竖向排列的一个精灵图,让循环里边的i索引号*44就是每个图片的y坐标
//1.获取元素,所有的小 li
var lis = document.querySelectorAll('li');
for(var i = 0;i < lis.length;i++){
//让索引号乘以44,就是每个人 li 的背景y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -'+index+ 'px'; //(x y) (0 -44px)
}
//5显示隐藏文本框内容
//当鼠标点击文本框时,里面的文字隐藏,当鼠标离开文本框时,里面的文字显示
// 1. 获取元素
var text = document.querySelector('input');
// 2. 注册事件，获取焦点事件 onfocus
text.onfocus = function(){
if(this.value ==== '手机'){
this.value = '';
}
// 获得焦点时需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
//3. 注册事件，失去焦点事件 onblur
text.onblur = function(){
if(this.value === ''){
this.value = '手机'
}
// 失去焦点时需要把文本框里面的文字颜色变黑
this.style.color = '#999'
}
//6密码提示框显示
//1. 获取元素
var pit = document.querySelector('.ipt');
var message = document.querySeletor('.message');
//2. 注册事件 失去焦点
ipt.onblur = function(){
// 根据表单里面值的长度 ipt.value.length
if (this.value.length <6 || this.value.length > 16){
message.className = 'messaga wrong';
message.innerHTML = '输入的位数要求是6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确！';
}
}
//7排他思路
//1. 获取所有的6个按钮标签
var btns = document.getElementsByTagName('button');
// btns 得到的是伪数组，
for(var i = 0; i< btns.length;i++){
btn[i].onclick = function(){
// 先把所有的按钮的背景色都去掉
for(var i = 0;i < btns.length;i++){
btns[i].style.backgroundColor = '';
}
// 然后设置当前点击的元素背景颜色
this.style.backgroundColor = 'pink';
}
}
//8点击切换背景图片
// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
//2. 循环注册事件
for(var i = 0; i< imgs.length;i++){
imgs[i].onclick = function(){
// this.src 是点击图片的路径，把这个路径给 body
document.body.style.backgroundImage = 'url(' +this.src+ ')';
}
}
//9 hover表格行高亮
// 1.获取元素，获取 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for(var i = 0;i< trs.length;i++){
// 3.鼠标经过事件 onmouseover
trs[i].onmouseover = function(){
this.className = 'bg';
}
// 4.鼠标离开事件 onmuseout
trs[i].onmouseout = function(){
this.className = '';
}
}
//10 全选按钮
//1. 获取元素
var j_cbALL = document.getELememtById('j_cbAll');
var j_tbs = document.getELementById('j_tb').getElementByTagName('input');
//2. 注册事件
j_cbAll.onclick = function(){
for(var i =0;i< j_tbs.length; i++){
j_tbs[i].checked = this.checked; //this.checked获取当前复选框的选中状态
}
}
//3. 下面复选框需要全部选中，上面全选按钮才选中
//给下面每个复选框注册点击时事件，每次点击都循环判断4个小按钮是否全部选中
for(var i = 0; i < j_tbs.length;i++){
j_tbs[i].onclick = function(){
var flag = true; //flag 控制全选按钮是否选中
for(var i=0; i< j_tbs.length; i++){
// 每次点击下面的复选框都要循环检查4个小按钮是否全部被选中
if(!j_tbs[i].checked){
flag = false;
break //只要有一个没有选中，就退出for循环
}
}
j_cbAll.checked = flag;
}
}
//11 点击tab切换对应的内容
- 商品介绍
- 规格与包装
- 售后保障
- 商品评价
- 手机社区
内容1
内容2
内容3
内容4
内容5
//12 下拉菜单
//鼠标经过li，里面的第二个孩子ul显示，鼠标离开，则ul隐藏
//1. 获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; //得到4个小li
//2. 循环注册事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
//获取第二个子元素节点
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function () {
this.children[1].style.display = 'none';
}
}
//13 简单版发布留言案例
//点击按钮，动态创建一个li，添加到ul里面
//1.获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
//2.注册事件
btn.onclick = function () {
if (text.value == '') {
alert('请输入内容！');
return false;
} else {
//-1.创建元素
var li = document.createElement('li');
// 先有li 才能赋值,添加一个a标签
li.innerHTML = text.value + "删除";
//-2.添加元素
//ul.appendChild(li); 添加到后面
ul.insertBefore(li, ul.children[0]); //添加到最前面
//-3.删除元素，删除的是当前的链接的父元素li
var as = document.querySelectorAll('a')
for (var i = 0; i > as.length; i++) {
as[i].onclick = function () {
//node.removeChild(child)
ul.removeChild(this.parentNode);
}
}
}
}
//14 依次删除元素
-
BOM
#2_ BOM:Browser Object Model 即浏览器对象模型，与浏览器窗口进行交互的对象
window
|
— document
|
— location
|
— navigation
|
— screen
|
— history— #1 系统对话框
- window.alert(“您好啊”);
- window.prompt(“请输入帐号”); //有返回值
— #2 窗口加载事件
- window.onload // 页面加载完毕执行
- window.onunload // 页面关闭后才触发的事件
- window.onbeforeunload // 页面关闭之前触发的
- window.onresize // 调整窗口大小加载事件
— #3 location对象中的属性和方法，获取或设置窗体的URL
-
window.location.hash //返回片段，地址栏上#及后面的内容，锚点
-
window.location.host //返回主机名及端口号
-
window.location.hostname //返回主机名
-
window.location.pathname //返回文件的路径—相对路径
-
window.location.port //返回端口号
-
window.location.protocol //返回协议
-
window.location.search //返回参数，搜索的内容
-
地址栏上的地址的操作
-
location.href=“http://www.jd.com”; //设置跳转的页面的地址
-
location.assign(“http://www.jd.com”); //记录浏览历史，可以实现后退功能
-
location.reload(); //重新加载–刷新
-
location.replace(“http://www.jd.com”); //没有历史记录
-
window.history.forward(); //历史记录的后退和前进
-
window.history.back();
-
window.navigator.userAgent /判断用户浏览器的类型
-
window.navigator.platform /判断浏览器所在的系统平台类型
— #4 API
-
定时器
-
setInterval(fn,time); clearInterval(timeId);
-
var timeId=window.setInterval(函数,间隔时间毫秒);
-
setTimeout(fn,time);
-
var timeId=window.setTimeout(fn,3000);
-
clearTimeout(timeId);
-
区别
-
setInterval(fn,time) 方法重复调用一个函数，每间隔这个时间，就去调用一次回调函数
-
随机数
-
var x = parseInt(Math.random() * 100 + 1);(0~99 1-100)
-
获取当前时间
-
var dt = new Date();
var hour = dt.getHours();
var second = dt.getSeconds(); -
this的指向问题
-
this的指向在函数定义时确定不了，一般情况下this最终指向的是那个调用它的对象
— #5 三组属性 offset scroll client
– offset系列:动态获取该元素的位置、大小。获得元素距离带有定位父元素的位置-
element.offsetParent:返回作为该元素带有定位的父级元素，如果父级元素没有定位则返回body
-
element.offsetWidth:返回 自身 包括padding、边框、内容区的宽度，返回数值不带单位
-
element.offsetHeight:返回 自身包括padding、边框、内容区的高度，返回数值不带单位
-
element.offsetLeft:返回元素相对带有定位父元素左边框的偏移
-
element.offsetTop:返回元素相对带有定位父元素上方的偏移
-
没有脱离文档流:
-
element.offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin
-
脱离文档流
-
是自己的left和自己的margin
– scroll系列:卷曲 -onscroll事件
- element.scrollWidth: 返回元素中 内容的 实际的宽(没有边框),如果没有内容就是元素的宽
- .scrollHeight: 返回元素中 内容的 实际的高(没有边框),如果没有内容就是元素的高
- element.scrollTop ;返回元素被向上卷曲出去的距离，数值不包含单位
- element.scrollLeft :返回元素向左卷曲出去的距离，数值不包含单位
- window.pageYOffset :页面被卷曲的距离 IE9+ //获取页面的滚动距离
- window.pageXOffset
– client系列:可视区域
- clientWidth:返回 自身 包括padding，内容区的宽度，不含边框，返回数值不带单位，常用
- clientHeight:返回 自身 包括padding，内容区的高度，不含边框，返回数值不带单位，常用
- clientLeft:左边边框的宽度
- clientTop :返回上面的边框的宽度
–总结
-返回 自身 的宽度
element.offsetWidth 内容区+padding+border
clientWidth 内容区+padding
element.scrollWidth 实际的宽度-- offset 常用于获取元素位置 offsetLeft offsetTop -- client 常用于获取元素大小 clientWidth clientHeight -- scroll 常用于获取滚动的距离 scrollTop scrollLeft— #6 JS执行机制
- 先执行执行栈中的同步任务。
- 异步任务(回调函数)先放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
— #7 立即执行函数
- 不需要调用，立马能够自己执行的函数
- 作用：独立创建一个作用域，里面的变量都是局部变量，不会有命名冲突
-1. 第二个小括号可以看作是调用函数
()()
(function(a,b){
console.log(a)
})(1,2)
-2. (fn()())
(function sum(a,b){
console.log(a +b);
}(2,3));
2.1 实例代码
//1 5秒之后关闭广告
var ad = document.querySelector('.ad');
setTimeout(function(){
ad.style.display = 'none';
}, 5000)
//2 倒计时效果
//倒计时不断变化，使用setInterval使其自动变化
0
0
0
0
//3 开启和关闭定时器
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; //全局变量，null 是一个空对对象
begin.addEventListener('click',function(){
timer = setInterval(function(){
console.log('定时器已开启');
}, 1000);
})
stop.addEventListener('click', function(){
clearInterval(timer);
})
//4 定时控制输入框
//点击按钮，禁用按钮，显示倒计时
手机号码：
//5 使用URL传递参数
//第一个登陆页面，里面有提交表单，action提交到 index.html页面
//第二个页面使用第一个页面的参数，实现数据在不同页面之间传递
-login.html
-index.html
//6 计算鼠标在盒子内的坐标
//在盒子内点击，想要得到鼠标距离盒子左右的距离
//鼠标在页面中的坐标 (e.pageX, e.pageY)
//得到盒子在页面中距离 (box.offsetLeft, box.offsetTop)
var box = document.querySelctor('.box');
box.addEventListener('click', function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + 'y坐标是' +y;
})
//7 模态框拖拽
//页面中的弹出框随鼠标拖拽
//鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置
//8 放大镜效果
//-1.鼠标经过小图片盒子，黄色的遮挡快和大盒子显示，离开隐藏2个盒子功能
//-2.黄色的遮挡层跟随鼠标移动
//-3.移动黄色遮挡层，大图片跟随移动功能
//9 flexible 分析
(function flexible(window, document) {
// 获取HTML根元素
var docEl = document.documentElement
// dpr 物理像素比
var dpr = window.devicePixelRatio || 1
// adjust body font size
// 设置body的字体大小
function setBodyFontSize() {
//如果页面有body这个元素，就设置body的字体大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
//如果没有body，则等着页面主要的DOM元素加载完毕再去设置body的字体大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
// 设置 html 元素的大小
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
// 当页面尺寸大小发生变化的时候，要重新设置 rem的大小
window.addEventListener('resize', setRemUnit)
// pageshow 事件，页面重新加载事件
window.addEventListener('pageshow', function(e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
//有的移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
//10 仿淘宝固定右侧边栏
// 原先是绝对定位，当页面滚动到一定位置，侧边栏改为固定定位，页面继续滚动，显示返回顶部按钮
// 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document，滚动到某个位置，就去判断页面被卷去的上部值
// 元素被卷去的头部是 element.scrollTop, 页面被卷去的头部则是 window.pageYOffset
头部区域
主体部分
//11 简单动画
盒子
div{
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: black;
}
var div = document.querySelector('div');
var timer = setInterval(function() {
if (div.offsetLeft >= 400){
//停止定时器，即停止动画
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
}, 30);
//12 动画函数封装
123
//13 动画函数封装优化
function animate(obj, target) {
//让元素只有一个定时器，先清除以前的定时器，只保留当前一个定时器
clearInterval(obj.timer);
// 将timer添加为对象的属性，节省内存空间
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer );
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
animate(div, 300);
//14 缓动动画封装
//让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
//核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长
//15 动画封装添加回调函数
3 PC网页特效
- 节流阀
- 防止轮播图按钮连续点击造成播放过快
- 目的： 让上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
- 思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
开始设置一个变量 var flag = true;
if (flag){ flag=false; do something} 关闭水龙头
利用回调函数，动画执行完毕， flag=true 打开水龙头
3.1 实例代码
//1 鼠标经过 silderbar 让con盒子滑动出来
//2 网页轮播图-综合案例
//3 返回顶部
// 滚动窗口文档中的特定位置，window.scroll(x,y)
// 当点击了返回顶部模块，就让窗口滚动到页面的最上方
goBack.addEventListener('click', function(){
// x y 不跟单位，直接写数字
window.scroll(0,0);
//窗口滚动，对象是window
animate(window,0);
})
//改为上下滚动函数
function animate(obj, target, callback) {
//让元素只有一个定时器，先清除以前的定时器，只保留当前一个定时器
clearInterval(obj.timer);
// 将timer添加为对象的属性，节省内存空间
obj.timer = setInterval(function() {
// 步长值写到定时器里面,并取整数.判断正负数，正则取大，负则取小
//var step =Math.ceil()
var step = (target - window.pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (window.pageYOffset == target) {
clearInterval(obj.timer);
//回调函数写到定时器结束里面
//if (callback) {
// callback();
// }
callback && callback();
}
//obj.style.left = window.pageYOffset + step + 'px';
window.scroll(0, window.pageYOffset + step);
}, 15);
}
//4 筋斗云特效
// 鼠标进过某个小li，筋斗云会飞到当前小li的位置，鼠标离开，筋斗云复原
// 鼠标点击某个小li，筋斗云就会留在点击的这个小li的位置
4 移动端网页特效
-
触屏事件 -touch
-touchstart 手指触摸到一个元素时触发
-touchmove 手指从一个DOM元素上滑动时触发
-touchend 手指从一个DOM元素上移开时触发 -
触摸事件对象 TouchEvent
-touches 手指触摸屏幕的所有的手指的一个列表
-targetTouches 正在触摸当前 DOM 元素上的手指的一个列表
-changedTouches 手指状态发生了改变的列表，从无到有变化 -
H5新属性 — classList
-返回元素的类名，可以用来在元素中添加，移除，切换CSS类 -
移动端 click 事件会有 300ms 的延时，因为移动端屏幕双击会缩放(double tap to zoom)页面
解决方案：- 禁用缩放
-
插件
----fastclick插件解决 300 ms延迟if (‘addEventListener’ in document) {
document.addEventListener(‘DOMContentLoaded’, function() {
FastClick.attach(document.body);
}, false);
}----Swiper 插件
----superslide 插件
----isscroll 插件
----zy.media.js 视频插件
-
移动端常用开发框架
-
本地存储
```javascript
-1
window.sessionStorage- 生命周期为关闭浏览器窗口，关闭窗口就删除
- 在同一个窗口下数据可以共享
- 以键值对的形式储存使用
//示例
var ipt = document.querySelector(‘input’);
var set = document.querySelector(’.set’);
var get = document.querySelector(’.get’);
var remove = document.querySelector(’.remove’);
set.addEventListener(‘click’ function(){
var val = ipt.value;
sessionStorage.setItem(‘uname’,val);
})
get.addEventListener(‘click’ function(){
consoel.log(sessionStorage.getItem(‘uname’));
})
remove.addEventListener(‘click’ function(){
sessionStorage.removeItem(‘uname’);
})
//清除所有sessionStorage
del.addEventListener(‘click’ function(){
sessionStorage.clear();
})
-2
window.localStorage - 生命周期永久生效，除非手动删除，即使页面关闭也会存在
- 同一浏览器可以多窗口页面共享
- 以键值对的形式储存使用
//示例
//示例
var ipt = document.querySelector(‘input’);
var set = document.querySelector(’.set’);
var get = document.querySelector(’.get’);
var remove = document.querySelector(’.remove’);
set.addEventListener(‘click’ function(){
var val = ipt.value;
localStorage.setItem(‘uname’,val);
})
get.addEventListener(‘click’ function(){
consoel.log(localStorage.getItem(‘uname’));
})
remove.addEventListener(‘click’ function(){
localStorage.removeItem(‘uname’);
})
//清除所有sessionStorage
del.addEventListener(‘click’ function(){
localStorage.clear();
})
4.1实例代码
1 触摸事件示例
//获取元素
var div = document.querySelector('div');
// 手指触摸DOM元素事件
div.addEventListener('touchstart', function() {
console.log('触摸事件触发')
})
// 手指在DOM元素上移动事件
div.addEventListener('touchmove', function(){
console.log('触摸事件持续')
})
// 手指在离开DOM元素事件
div.addEventListener('touchend', function(){
console.log('触摸事件结束')
})
//classList示例
var div = document.querySelector('div');
//1.添加类名
div.classList.add('three');
//2.删除类名
div.classList('one');
//3.切换类名
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
document.body.classList.toggle('bg');
})
2. div随手指移动
// 手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
//手指移动距离，手指滑动中的位置减去手指刚开始触摸的位置
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 = ths.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.preventDedault(); //阻止屏幕滚动的默认行为
})
3. 移动端轮播图
4. 点击按钮返回顶部
5. 记住用户名
//永久储存 使用localStorage
记住用户名
5.底部线