目录
内容持续更新中~
一、DOM 简介
1.DOM 概念
- 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。
- 它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。
- DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。
总结：W3C 已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构、样式。
2. DOM 树
DOM 又称为文档树模型
（1）文档：一个网页可以称为文档，DOM中使用 document 表示
（2）节点：网页中的所有内容都是节点 （标签、属性、文本、注释等），DOM中用 node 表示
（3）元素：网页中的标签，DOM中使用 element 表示
（4）属性：标签的属性
*注：DOM 把文档、节点、元素都看作是对象
3. DOM 经常进行的操作
（1）获取元素
（2）对元素进行操作（设置其属性或调用其方法）
（3）动态创建元素
（4）事件（什么时机做相应的操作）
二、获取元素
1.根据getElementById获取元素
语法： document.getElementById('id值')
console.dir() 可以打印我们返回的元素对象 更好的查看里面的属性和方法
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="time"> 2022-10-5</div> <p></p> <h1></h1> <script> var timer= document.getElementById('time'); console.log(timer); console.log(typeof timer); // console.dir() 可以打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer) </script> </body> </html>2.通过getElementsByTagName获取元素
element.getElementsByTagName("标签名") 父元素必须是指定的单个元素
返回的是 获取过来的元素对象的集合 以伪数组形式存储
3.H5新增获取元素的方法
.getElementsByClassName() 根据类名获得某些元素
querySelector 返回指定选择器的第一个元素对象 切记！里面的选择器需要加符号
querySelectorAll() 返回指定选择器的所有元素
4.获取特殊元素（body、html）
（1）获取 body 元素
document.body
（2）获取 html 元素
document.documentElement
5.总结
9. 总结
（1）没有兼容问题
- getElementById()
- getElementsByTagName()
（2）了解
- getElementsByName()
- getElementsByClassName()
- querySelector()
- querySelectorAll()
三、DOM 事件
1.事件
（1）事件：在什么时候做什么事
（2）执行机制：触发–响应机制 （例：轮播图、下拉菜单等）
（3）绑定事件(注册事件)三要素：
- 事件源 被触发的对象
- 事件类型 如何触发 （例：click 点击 ）
- 事件处理程序 事件发生后执行什么内容，写在函数内部（采用函数赋值形式）
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="tbh">唐伯虎</button> <script> // 点击按钮 弹出对话框 显示点秋香 // (1)事件源 被触发的对象 按钮 var btn=document.getElementById("tbh"); // (2)事件类型 如何触发 点击 // (3)事件处理程序 btn.onclick=function(){ alert("点秋香"); } </script> </body> </html>
2.执行事件步骤
1.获取事件源
2.绑定事件（注册事件）
3.添加事件处理程序
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>中奖了</div> <script> // 点击div控制台输出中奖了 // 1.获取事件源 var div=document.querySelector("div"); // 2.绑定事件（注册事件） // div.onclick // 3.添加事件处理程序 div.onclick=function(){ console.log("中奖了"); } </script> </body> </html>3.操作元素之改变元素内容
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>显示当前时间</button> <div>请显示</div> <script> // 点击按钮 div里面的文字发生变化 // 1.获取元素 var btn = document.querySelector("button"); var div = document.querySelector("div"); // 2.注册事件 btn.onclick = function () { div.innerHTML = getDate(); } function getDate() { var data = new Date(); var year = data.getFullYear(); var month =data. getMonth()+1; var datas =data.getDate(); var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; var day = data.getDay(); return "今天是" + year + "年" + month + "月" + datas + "日" + arr[day]; }; </script> </body> </html>4.操作元素之修改元素属性
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="rw1">人物1</button> <button id="rw2">人物2</button> <img src="图片地址1" title="rw1"> <script> // 修改元素属性 scr // 1.获取元素 var rw1 = document.getElementById("rw1"); var rw2 = document.querySelector("#rw2"); var img = document.querySelector("img"); // 2.注册事件 // 3.处理程序 rw2.onclick = function () { img.src = "更改后的图片地址"; img.title = "更改后的title" } ldh.onclick = function () { img.src = "更改后的图片地址"; img.title = "更改后的title" } </script> </body> </html>5.innerText 和 innerHTML的区别
1.innerText 不识别html标签 非标准 去除了空格和换行
2.innerHTML 识别html标签 W3C标准
这两个属性是可读写的 可以获得元素里面的内容 保留了空格和换行
6.取消a标签默认行为
- 方法一 加 return false
<代码演示>
<script> // 方法一 加 return false // 1.获取事件源 var a=document.querySelector("a"); // 2.绑定事件 // 3.处理程序 a.onclick=function(){ console.log(666); return false; //阻止了a标签的默认跳转行为 } </script>
法二 给a标签 href属性 增加值 javascript:
<a href="https://www.baidu.com" target="_blank">取消我的跳转功能</a> <a href="javascript:;">百度</a> <a href="javascript:alert(111);">百度</a>7.常见的鼠标样式
onclick 鼠标点击左键才能触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedowm 鼠标按下触发
8.通过修改元素的className来更改元素样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: pink; } .change{ width: 300px; height: 300px; background-color: purple; } </style> </head> <body> <div class="first"></div> <script> // 1.获取元素 var div=document.querySelector("div"); div.onclick=function(){ this.className="change"; // 保留原来的类名 多类名选择器 this.className="first change"//加入原先的div就已经有了类名 按照此种方法既能有修改后的样式又能保留原来的样式 } </script> </body> </html>9.排他思想
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button { width: 60px; height: 20px; line-height: 20px; border: 1px solid #333; } </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1.获取元素 var btns = document.getElementsByTagName("button"); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { // (1)干掉所有人 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ""; } // 留下我自己 this.style.backgroundColor = "blue"; } } </script> </body> </html>四、自定义属性
1. 获取元素的属性
(1)通过 element.属性 只能获得元素自身的属性 自定义属性获得不到
(2) element.getAttribute("属性名") 这种方式可以获得元素自身的属性 也可以获得程序员自定义的属性
2. 设置属性 element.setAttribute("属性","属性值"); 主要针对于自定义属性
注意：添加类名 用class 不用className
3.移除属性 removeAttribute("属性")
五、H5自定义属性
- H5新增的获得自定义属性的方法 只获得以 data 开头的
dataset 获得来的是一个集合 里面存放着所有以data开头的自定义属性
如果自定义属性里面有多个以-连接的单词 我们采用驼峰命名法
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div data-time="30" data-list-name="baby"></div> <script> var div=document.querySelector("div"); // console.log(div.data-time); 因为这种方式只能获得 元素子真的属性 console.log(div.getAttribute("data-time")); div.setAttribute("data-index",20) console.log(div.getAttribute("data-list-name")); // dataset 获得来的是一个集合 里面存放着所有以data开头的自定义属性 console.log(div.dataset); console.log(div.dataset.time);//这样还可以单独获得data里面的某个属性 // 如果自定义属性里面有多个以-连接的单词 我们采用驼峰命名法 console.log(div.dataset.ListName); console.log(div.dataset["ListName"]); </script> </body> </html>六、子节点/父节点/兄弟节点
- 父节点：parentNode
- 子节点：
（1）父节点.childNodes;获取的子节点包含[文本]和[元素] W3C标准推荐
（2） 父元素.children; 获取的子节点仅包含[元素] （实际开发写法）
（3） 父节点.firstElementChild;获取[第一个]子元素节点,IE9以上才认识
（4） 父节点.lastElementChild;获取[最后一个]子元素节点
（5） firstChild lastChild 获取第一个和最后一个子节点 不限制类型
- 兄弟节点：
（1）nextSibling 获取的是下一个兄弟节点 包含文本节点和元素节点 等等
（2）previousSibling 上一个兄弟节点 包含文本节点和元素节点 等等
（3）nextElementSibling 下一个兄弟元素节点 IE9以上才支持
（4） previousElementSibling 上一个兄弟节点
注意：找不到兄弟元素节点的话 就返回null
七、创建、添加、删除和克隆节点
创建节点：createElement("li")
添加节点：
（1） 语法: node.appendChild(child)
（2） 语法: node.insertBefore(child,指定元素位置) 从指定位置添加
删除元素 ：语法: 父元素.removeChild(子元素)
克隆元素 ：语法: node.cloneNode(true或false);
返回一份新的克隆后的元素 false为浅拷贝 只复制标签 不复制里面的内容；true 深拷贝 既拷贝标签又拷贝内容
八、三种创建元素方式的区别
1.document.write() 创建元素 如果我们页面文档流(从上到下)加载完毕 再来调用这句话就会导致页面重绘
2.inner.HTML 创建元素 拼接字符串 每次会开辟新的内存 比较浪费且效率低 耗时间
innerHTML 数组形式 拼接 效率最高 结构复杂
3.document.createElement() 创建元素 省内存 结构比较清晰
经典面试题 三种动态创建元素的区别
1. document.write() 文档流加载完毕,会导致页面重绘
2. innerHTML 将内容写入某个DOM节点,不会导致页面重绘
3. innerHTML 创建多个元素的效率更高(前提是不要拼接字符串,采取数组拼接的形式),结构稍微复杂
4. document.createElement() 创建多个元素效率稍低一点点,但是结构清晰
九、事件监听注册的两种方式
- 传统注册方式 以on开头 特点:注册事件的唯一性 以最后一个为准
<代码演示>
<script> btns[0].onclick=function(){ alert(0); } btns[0].onclick=function(){ alert(1); } </script>
事件监听注册事件 W3C标准 未来推荐使用
1. addEventListener() 它是一个方法 ie9以上支持 ; ie9之前可以用attachEvent()代替
2. 事件源.addEventListener("事件类型",事件处理程序,是否捕获)
3.特点:
(1)里面的事件类型是字符串 必须加引号 不加on
(2)同一个元素可以添加多个监听器(事件处理程序) 按照顺序依次执行
(3)是否捕获 布尔类型 默认是false
<代码演示>
<script> btns[1].addEventListener("click",function(){ alert(2); }) btns[1].addEventListener("click",function(){ alert(3); }) </script>十、删除事件
1.传统方式删除事件
divs[0].onclick = null;
2 .removeEventListener删除事件
<代码演示>
<script> var divs = document.querySelectorAll("div"); divs[0].onclick = function () { alert(111); // 1.传统方式删除事件 divs[0].onclick = null; } // 2.removeEventListener 删除事件 divs[1].addEventListener("click", fn);//特殊记忆,里面的fn不需要调用 不需要加括号 function fn() { alert(222); divs[1].removeEventListener("click", fn); } </script>十一、DOM事件流的三个阶段
捕获阶段（网景提出） 目标阶段 冒泡阶段（ie提出）
1. js代码在执行过程中只能执行捕获或者冒泡中的一个阶段
2. 传统注册方式onclick 和 attachEvent(ie) 只能得到冒泡阶段
3. 捕获阶段 addEventListener("事件类型"，事件处理程序，"是否捕获") ture 捕获阶段 false 冒泡阶段； ture 捕获阶段（从上往下） false 冒泡阶段（从下往上）
注意：
1.我们更关注冒泡 实际开发中比较少用到捕获阶段
2.onfocus(获得焦点) onblur(失去焦点) onmouseenter() onmouseleave() 这四个事件没有冒泡阶段<代码演示>
<script> // 捕获阶段 true 从上往下 // document--->html--->body--->father--->son 执行顺序 var son=document.querySelector(".son"); son.addEventListener("click",function(){ alert("son"); },true); var father=document.querySelector(".father"); father.addEventListener("click",function(){ alert("father"); },true) // 冒泡阶段 第三个参数为false或者省略 从下往上 // son--->father--->body--->html--->document 执行顺序 var son=document.querySelector(".son"); son.addEventListener("click",function(){ alert("son"); },false); var father=document.querySelector(".father"); father.addEventListener("click",function(){ alert("father"); },false) document.addEventListener("click",function(){ alert("document"); },false); </script>十二、事件对象
12.1 事件对象
1.event 就是一个事件对象 写在我们监听函数的小括号里 当形参看
2.事件对象的产生必须有事件的存在才可以 （如：点击 鼠标经过 等） 它是系统自动创建的，不需要向他传递参数
3.事件对象 是我们事件的一系列相关数据的集合 跟事件有关系
4.事件对象的命名 是自定义的 常用：event evt e（实际开发中常用）
5.事件对象也有兼容性问题 ie678 不认识
兼容性写法 window.event e=e || window.event
<代码演示>
<script> div.addEventListener("click",function(event){ console.log(event);},false) </script>12.2 事件对象e.target
- e.target 返回的是触发这个事件的对象
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>123</div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // e.target 返回的是触发这个事件的对象 // this 返回的是绑定这个事件的元素（对象） var div=document.querySelector("div"); div.addEventListener("click",function(e){ console.log(e.target); console.log(this); }) console.log("-------------------------------"); var ul=document.querySelector("ul"); ul.addEventListener("click",function(e){ console.log(e.target);//li console.log(this);//ul //了解 跟this有非常相似的属性 .currentTarget 只有ie9以上才能用 ie678不认识 开发不常用 常用this console.log(e.currentTarget); }) </script> </body> </html>12.3 事件对象阻止默认行为
1.返回事件类型 e.type
2.阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
(1)DOM标准写法 （开发中最常用到的）阻止a跳转 preventDefault()是一种方法 别忘了写小括号 普通浏览器（ie9以上）
(2)低版本浏览器 (ie678) e.returnValue 属性 它不用加括号
3.可以利用 return false 阻止默认行为 没有兼容性问题 只限于传统注册方式 不能应用于addEventListener注册事件
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>123</div> <a href="http://www.baidu.com">百度</a> <form action="http://www.baidu.com"> <input type="submit" value="提交" name="sub"> </form> <script> // 常见事件对象的属性和方法 // 1.返回事件类型 e.type var div = document.querySelector("div"); div.addEventListener("click", fn); div.addEventListener("mouseover", fn); div.addEventListener("mouseout", fn); function fn(e) { console.log(e.type);//返回事件类型不带on } // 2.阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交 var a = document.querySelector("a"); a.addEventListener("click", function (e) { //DOM标准写法 （开发中最常用到的）阻止a跳转 preventDefault()是一种方法 别忘了写小括号 e.preventDefault(); }) // 3.传统注册方式 a.onclick = function (e) { //普通浏览器（ie9以上） e.preventDefault(); // 低版本浏览器 (ie678) returnValue 属性 它不用加括号 e.returnValue; // 我们可以利用 return false 阻止默认行为 没有兼容性问题 // 特点: return 后面的代码不执行 只限于传统注册方式 不能应用于addEventListener注册事件 return false; alert("11") } </script> </body> </html>12.4 阻止事件冒泡
- 【stopPropagation ie9以上 W3C标准】
- 【cancelBubble=true ie678 非标准】
12.5 事件委托
事件委托的原理：把监听器（点击事件）设置给父元素，然后通过冒泡元素来影响设置每个子节点
事件委托的作用：我们只操作了一次DOM 提高程序性能
十三、常见的鼠标事件
1.contextmenu 可以禁止右键菜单
2.selectstart 禁止选中文字
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 我是一段不想被复制的文字 <script> // 1.contextmenu 可以禁止右键菜单 document.addEventListener("contextmenu",function(e){ e.preventDefault();//阻止默认行为 }) //2. selectstart 禁止选中文字 document.addEventListener("selectstart",function(e){ e.preventDefault(); }) </script> </body> </html>13.1鼠标事件对象
- 鼠标事件对象 MouseEvent
1. client 鼠标在可视区域的x和y坐标
2. page 鼠标在页面文档的x和y坐标
3.screen 鼠标在电脑屏幕的x和y坐标
十四、键盘事件
1. keyup 按键谈起的时候触发
2.keydown 键盘按下的时候出发 识别功能键
3.keypress 键盘按下的时候触发 不识别功能键 例如：ctrl shift alt 左右箭头上下箭头等
*三个事件的执行顺序 keydown--->keypress--->keyup
14.1 键盘事件的keyCode属性
1.keyCode 获得的是该按键对应的 ASCII值
2.keyup 和 keydown 事件不区分字母大小写 a和A的ASCII都是65
3.keypress事件 区分大小写
十五、案例
案例1-分时显示不同内容
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 200px; } </style> </head> <body> <img src="https://img2.baidu.com/it/u=3801426601,1868049147&fm=253&fmt=auto&app=138&f=GIF?w=240&h=240"> <div>下午好</div> <script> // 根据系统时间判断 用到日期内置对象 // 利用多分支语句来设置不同的问候语和图片 // 根据事件来修改图片 img src // div innerHTML // 1.获取事件源 var img = document.querySelector("img"); var div = document.querySelector("div"); // 2.得到当前系统时间的小时数 var date = new Date(); var h = date.getHours(); console.log(h); // 3.根据小时数判断应该更改的文字和图片 if (h > 0 && h < 12) { img.src = "https://img2.baidu.com/it/u=2045730279,2680024617&fm=253&fmt=auto&app=120&f=GIF?w=240&h=240"; div.innerHTML = "上午好"; } else if (h < 18) { img.src = "https://img2.baidu.com/it/u=3801426601,1868049147&fm=253&fmt=auto&app=138&f=GIF?w=240&h=240"; div.innerHTML = "下午好"; } else { img.src = "https://img0.baidu.com/it/u=1431576814,188891959&fm=253&fmt=auto&app=138&f=GIF?w=240&h=240" div.innerHTML = "晚上好"; } </script> </body> </html>案例2-操作元素之改变表单属性
- 表单里的文字不能通过innerHTML修改，只能通过value修改
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>按钮</button> <input type="text" value="请输入您的姓名"> <script> // 1.获取元素 var input=document.querySelector("input"); var btn=document.querySelector("button"); // 2.3. 注册事件 事件处理程序 btn.onclick=function(){ input.value="你被点击了"; //this指向调用者，这里是btn被调用，所以btn被禁用 this.disabled=true;//按钮禁用 } // 注册事件 onfocus 获得焦点 onblur 失去焦点 input.onfocus=function(){ //获得焦点输入框默认的内容消失 input.value=""; } input.onblur=function(){ input.onblur="请输入您的姓名" } </script> </body> </html>案例3-密码的显示与隐藏
案例4-js简单实现关闭淘宝二维码
案例5-js简单实现循环精灵图操作
案例6-显示与隐藏文本内容
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ color: #999; } </style> </head> <body> <input type="text" value="手机"> <script> // 1.获取元素 var input=document.querySelector("input"); // 2. 3. 注册事件 处理程序 input.onfocus=function(){ if(input.value=="手机"){ this.value=""; } this.style.color="#000" } // 失去焦点 input.onblur=function(){ if(input.value==""){ this.value="手机" } this.style.color="#999" } </script> </body> </html>案例7-js简单实现注册页面校验
案例8-桌面换肤
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background: url(../img/syx5.jpg) no-repeat center top; } li { list-style: none; float: left; } img { width: 100px; vertical-align: bottom; /* 图片对齐方式 */ } ul { overflow: hidden; /*清除浮动带来的不利影响 */ margin: 100px auto; width: 400px; border: 2px solid #fff; } </style> </head> <body> <ul class="baidu"> <li><img src="1" alt=""></li> <li><img src="2" alt=""></li> <li><img src="3" alt=""></li> <li><img src="4" alt=""></li> </ul> <script> // 1.获取元素 var imgs = document.querySelector(".baidu").querySelectorAll("img"); // 2.循环注册事件 点击事件 for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = function () { // this.scr//获得当前点击图片的地址 document.body.style.backgroundImage = "url(" + this.src + ")"; } } </script> </body> </html>案例9-js简单实现表格隔行换色
案例10-js实现全选
案例11-tab切换栏
案例12-发布留言板
案例13-删除留言板
案例14-动态生成表格
案例15-跟随鼠标的天使
案例16-模拟京东快递获得焦点
案例17-模拟京东快递查询
十六.扩展
1.通过a可以打开电话应用
<a href="tel:">打电话</a>2.通过a可以打开电子邮件应用
<a href="mailto:">打开邮件</a>
