js-dom操作
1.dom树介绍
dom:文档对象模型。dom 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
dom就是由节点组成的:html加载完毕,渲染引擎会在内存中把html文档,生成一个dom树。
在html当中,一切都是节点:(非常重要)
- 元素节点:html标签。
- 文本节点:标签中的文字(比如标签之间的空格、换行)
- 属性节点::标签的属性。
整个html文档就是一个文档节点。所有的节点都是object。
object节点维护的内容
dom操作的内容
2.节点查找
2.1直接查找
dom节点的获取方式其实就是获取事件源的方式
操作元素节点,必须首先找到该节点。有三种方式可以获取dom节点:
var div1 = document.getelementbyid("box1"); //方式一:通过id获取单个标签 var arr1 = document.getelementsbytagname("div1"); //方式二:通过 标签名 获得 标签数组,所以有s var arr2 = document.getelementsbyclassname("hehe"); //方式三:通过 类名 获得 标签数组,所以有s //其中方式二、方式三获取的是标签数组,那么习惯性是先遍历之后再使用。
即便如此,这一个值也是包在数组里的。这个值的获取方式如下: document.getelementsbytagname("div1")[0]; //取数组中的第一个元素 document.getelementsbyclassname("hehe")[0]; //取数组中的第一个元素
特殊情况:数组中的值只有1个。
2.2间接查找
dom的节点并不是孤立的,因此可以通过dom节点之间的相对关系对它们进行访问。如下:
节点的访问关系,是以属性的方式存在的。
js中的父子兄访问关系:
这里我们要重点知道parentnode和children这两个属性的用法。下面分别介绍。
2.2.1获取父节点
调用者就是节点。一个节点只有一个父节点,调用方式就是
节点.parentnode
2.2.2获取兄弟节点
下一个兄弟节点
版本说明 nextsibling:指的是下一个节点(包括标签、空文档和换行节点) 火狐、谷歌、ie9+版本:都指的是下一个节点(包括标签、空文档和换行节点)。 ie678版本:指下一个元素节点(标签)。 nextelementsibling:火狐、谷歌、ie9+版本:指的是下一个元素节点(标签)。
总结:为了获取下一个元素节点,我们可以这样做:在ie678中用nextsibling,在火狐谷歌ie9+以后用nextelementsibling.
前一个兄弟节点
版本说明 previoussibling: 火狐、谷歌、ie9+版本:都指的是前一个节点(包括标签、空文档和换行节点)。 ie678版本:指前一个元素节点(标签)。 previouselementsibling: 火狐、谷歌、ie9+版本:都指的是前一个元素节点(标签)。
总结:为了获取前一个元素节点,我们可以这样做:在ie678中用previoussibling,在火狐谷歌ie9+以后用previouselementsibling.
补充:获得任意一个兄弟节点:
节点自己.parentnode.children[index]; //随意得到兄弟节点
获取子节点——单个子节点
1、第一个子节点 | 第一个子元素节点:
版本说明 firstchild: 火狐、谷歌、ie9+版本:都指的是第一个子节点(包括标签、空文档和换行节点)。 ie678版本:指第一个子元素节点(标签)。 firstelementchild: 火狐、谷歌、ie9+版本:都指的是第一个子元素节点(标签)。
总结:为了获取第一个子元素节点,我们可以这样做:在ie678中用firstchild,在火狐谷歌ie9+以后用firstelementchild.
2、最后一个子节点 | 最后一个子元素节点:
版本说明 lastchild: 火狐、谷歌、ie9+版本:都指的是最后一个子节点(包括标签、空文档和换行节点)。 ie678版本:指最后一个子元素节点(标签)。 lastelementchild: 火狐、谷歌、ie9+版本:都指的是最后一个子元素节点(标签)。
总结:为了获取最后一个子元素节点,我们可以这样做:在ie678中用lastchild,在火狐谷歌ie9+以后用lastelementchild.
2.2.3获取子节点——所有子节点
childnodes:标准属性
子节点数组 = 父节点.childnodes; //获取所有节点。
返回的是指定元素的子元素节点的集合。【重要】 它只返回html节点,甚至不返回文本节点。 在ie6/7/8中包含注释节点(在ie678中,注释节点不要写在里面)。 虽然不是标准的dom属性,但它和innerhtml方法一样,得到了几乎所有浏览器的支持。
children:非标准属性(用的最多)
子节点数组 = 父节点.children; //获取所有节点。用的最多。
3.节点操作(重要)
节点的访问关系都是属性。而节点的操作都是函数(方法)。
3.1节点本身操作
3.1.1创建节点
新的标签(元素节点) = document.createelement("标签名");
比如,如果我们想创建一个li标签,或者是创建一个不存在的adbc标签,可以这样做:
<script type="text/javascript"> var a1 = document.createelement("li"); //创建一个li标签 var a2 = document.createelement("adbc"); //创建一个不存在的标签 console.log(a1); console.log(a2); console.log(typeof a1); console.log(typeof a2); </script>
结果:
3.1.2插入节点
父节点.appendchild(新的子节点);//方式1:父节点的最后插入一个新的子节点。 父节点.insertbefore(新的子节点,作为参考的子节点);//方式2:在参考节点前插入一个新的节点。如果参考节点为null,那么他将在父节点最后插入一个子节点。
3.1.3删除节点
父节点.removechild(子节点);//用父节点删除子节点。必须要指定是删除哪个子节点。 node1.parentnode.removechild(node1);//删除自己这个节点
3.1.4复制节点(克隆节点)
要复制的节点.clonenode(); //括号里不带参数和带参数false,效果是一样的。不带参数/带参数false:只复制节点本身,不复制子节点。 要复制的节点.clonenode(true); //带参数true:既复制节点本身,也复制其所有的子节点。
3.1.5替换节点
父节点.replacechild(newnode, 某个节点); //找到这个父标签里面的要被替换的子标签,然后用新的标签将该子标签替换掉
3.2节点属性操作
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们统一拿下面这个标签举例:
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
3.2.1获取节点的属性值
方式1:
元素节点.属性; 元素节点[属性]; <body> <img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1"> <script type="text/javascript"> var mynode = document.getelementsbytagname("img")[0]; console.log(mynode.src); console.log(mynode.classname); //注意,是classname,不是class console.log(mynode.title); console.log("------------"); console.log(mynode["src"]); console.log(mynode["classname"]); //注意,是classname,不是class console.log(mynode["title"]); </script> </body>
方式2:(推荐)
元素节点.getattribute("属性名称"); console.log(mynode.getattribute("src")); console.log(mynode.getattribute("class")); //注意是class,不是console.log(mynode.getattribute("title"));
方式1和方式2的区别在于:前者是直接操作标签,后者是把标签作为dom节点。推荐方式2。
3.2.2设置节点的属性值
方式1:
mynode.src = "images/2.jpg" //修改src的属性值 mynode.classname = "image2-box"; //修改class的name
方式2:(推荐)
元素节点.setattribute(属性名, 新的属性值); mynode.setattribute("src","images/3.jpg"); mynode.setattribute("class","image3-box"); mynode.setattribute("id","你好");
3.2.3删除节点的属性
元素节点.removeattribute(属性名); mynode.removeattribute("class"); mynode.removeattribute("id");
3.3节点文本操作
3.3.1获取文本节点的值
var divele = document.getelementbyid("d1") divele.innertext //输入这个指令,一执行就能获取该标签和内部所有标签的文本内容 divele.innerhtml //获取的是该标签内的所有内容,包括文本和标签
3.3.2设置文本节点的值
var divele = document.getelementbyid("d1") divele.innertext="1" divele.innerhtml="<p>2</p>" //能识别成一个p标签
3.4获取值操作
elementnode.value 适用于以下标签,用户输入或者选择类型的标签:input 、select 、textarea
var iele = document.getelementbyid("i1"); console.log(iele.value); var sele = document.getelementbyid("s1"); console.log(sele.value); var tele = document.getelementbyid("t1"); console.log(tele.value);
3.5class的操作
classname 获取所有样式类名(字符串) 首先获取标签对象 标签对象.classlist.remove(cls) 删除指定类 classlist.add(cls) 添加类 classlist.contains(cls) 存在返回true,否则返回false classlist.toggle(cls) 存在就删除,否则添加,toggle的意思是切换,有了就给你删除,如果没有就给你加一个
3.6指定css操作
obj.style.backgroundcolor="red"
对于没有中横线的css属性一般直接使用style.属性名即可
obj.style.margin obj.style.width obj.style.left obj.style.position
对含有中横线的css属性,将中横线后面的第一个字母换成大写即可
obj.style.margintop obj.style.borderleftwidth obj.style.zindex obj.style.fontfamily
4.事件
js是以事件驱动为核心的一门语言。
比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯的开和关。 再比如,网页上弹出一个广告,我点击右上角的x,广告就关闭了。这件事情里,事件源是:x。事件是:onclick。事件驱动程序是:广告关闭了。 于是我们可以总结出:谁引发的后续事件,谁就是事件源。 总结如下: 事件源:引发后续事件的html标签。 事件:js已经定义好了(见下图)。 事件驱动程序:对样式和html的操作。也就是dom。
事件的三要素:事件源、事件、事件驱动程序。
代码书写步骤如下:(重要)
(1)获取事件源:document.getelementbyid(“box”); //类似与ios语言的 uibutton *adbtn = [uibutton buttonwithtype:uibuttontypecustom]; (2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 }; (3)书写事件驱动程序:关于dom的操作
代码举例:
<body> <div id="box1"></div> <script type="text/javascript"> // 1、获取事件源 var div = document.getelementbyid("box1"); // 2、绑定事件 div.onclick = function () { // 3、书写事件驱动程序 alert("我是弹出的内容"); } </script> </body>
常见事件如下:
事件名 | 说明 |
---|---|
onclick | 鼠标单击 |
ondblclick | 鼠标双击 |
onkeyup | 按下并释放键盘上的一个键时触发 |
onchange | 文本内容或下拉菜单中的选项发生改变 |
onfocus | 获得焦点,表示文本框等获得鼠标光标 |
onblur | 失去焦点,表示文本框等失去鼠标光标 |
onmouseover | 鼠标悬停,即鼠标停留在图片等得上方 |
onmouseout | 鼠标移出,即离开图片等所在的区域 |
onload | 网页文档加载事件 |
onunload | 关闭网页时 |
onsubmit | 表单提交事件 |
onreset | 重置表单时 |
4.1获取事件源(dom节点的获取)
获取事件源的常见方式如下:
var div1 = document.getelementbyid("box1"); //方式一:通过id获取单个标签 var arr1 = document.getelementsbytagname("div1"); //方式二:通过 标签名 获得 标签数组,所以有s var arr2 = document.getelementsbyclassname("hehe"); //方式三:通过 类名 获得 标签数组,所以有s
4.2绑定事件的方式
4.2.1直接绑定匿名函数
<div id="box1" ></div> <script type="text/javascript"> var div1 = document.getelementbyid("box1"); //绑定事件的第一种方式 div1.onclick = function () { alert("我是弹出的内容"); } </script>
4.2.2先单独定义函数,再绑定
<div id="box1" ></div> <script type="text/javascript"> var div1 = document.getelementbyid("box1"); //绑定事件的第二种方式 div1.onclick = fn; //注意,这里是fn,不是fn()。fn()指的是返回值。 //单独定义函数 function fn() { alert("我是弹出的内容"); } </script>
绑定的时候,是写fn,不是写fn()。fn代表的是整个函数,而fn()代表的是返回值。
4.2.3行内绑定
<!--行内绑定--> <div id="box1" onclick="fn()"></div> <script type="text/javascript"> function fn() { alert("我是弹出的内容"); } </script>
绑定时,是写的"fn()"
,不是写的"fn"
。因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串。
4.3事件驱动程序
4.3.1操作标签的属性和样式
<head> <style> #box { width: 100px; height: 100px; background-color: pink; cursor: pointer; } </style> </head> <body> <div id="box" ></div> <script type="text/javascript"> var odiv = document.getelementbyid("box"); //点击鼠标时,原本粉色的div变大了,背景变红了 odiv.onclick = function () { odiv.style.width = "200px"; //属性值要写引号 odiv.style.height = "200px"; odiv.style.backgroundcolor = "red"; //属性名是backgroundcolor,不是background-color } </script>
上方代码的注意事项:
- 在js里写属性值时,要用引号
- 在js里写属性名时,是
backgroundcolor
,不是css里面的background-color
。记得所有的像css属性的text-,line-、backgroun-*等在js中都写成驼峰
4.3.2onload事件
当页面加载(文本和图片)完毕的时候,触发onload事件。
<script type="text/javascript"> window.onload = function () { console.log("小马哥"); //等页面加载完毕时,打印字符串 } </script>
js的加载是和html同步加载的。因此,如果使用元素在定义元素之前,容易报错。这个时候,onload事件就能派上用场了,我们可以把使用元素的代码放在onload里,就能保证这段代码是最后执行。
建议是:整个页面上所有元素加载完毕在执行js内容。所以,window.onload可以预防使用标签在定义标签之前。
onload事件(屏幕可视区域)
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> // 屏幕的可视区域 window.onload = function(){ // document.documentelement 获取的是html标签 console.log(document.documentelement.clientwidth); console.log(document.documentelement.clientheight); // 窗口大小发生变化时,会调用此方法 window.onresize = function(){ console.log(document.documentelement.clientwidth); console.log(document.documentelement.clientheight); } } </script> </html>
onload事件(offset系列)
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body style="height: 2000px"> <div> <div class="wrap" style=" width: 300px;height: 300px;background-color: green"> <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;"> </div> </div> </div> </body> <script type="text/javascript"> window.onload = function(){ var box = document.getelementbyid('box') /* offsetwidth占位宽 内容+padding+border offsetheight占位高 * offsettop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的top值 * offsetleft: 如果盒子没有设置定位 到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值 * */ console.log(box.offsettop) console.log(box.offsetleft) console.log(box.offsetwidth) console.log(box.offsetheight) } </script> </html>
4.4事件案例
4.4.1红绿灯
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> .outer{ border: solid darkgray 5px; display: inline-block; padding: 5px; border-radius: 10px; } .light{ float: left; height: 100px; width: 100px; border-radius: 50%; background-color: lightgray; margin-left: 5px; } .clearfix:after{ content: ''; clear: both; display: inline-block; } .red{ background-color: red; } .yellow{ background-color: yellow; } .green{ background-color: green; } </style> </head> <body> <div class="outer"> <div class="container clearfix"> <div class="light red"></div> <div class="light"></div> <div class="light"></div> </div> </div> <script> function change_color() { var lights = document.getelementsbyclassname('light') if(lights[0].classlist.contains('red')){ lights[0].classlist.remove('red') lights[1].classlist.add('yellow') }else if(lights[1].classlist.contains('yellow')){ lights[1].classlist.remove('yellow') lights[2].classlist.add('green') } else{ lights[2].classlist.remove('green') lights[0].classlist.add('red') } } setinterval(change_color,3000) </script> </body> </html>
4.4.2input框动态显示时间
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> input{ width: 200px; } </style> </head> <body> <input type="text" id="time"> <button id = 'switch'>开始</button> </body> <script> var btn = document.getelementbyid('switch') btn.onclick = function () { switch (this.innertext){ case '开始': this.innertext = '停止'; timer1 = setinterval(update,1000) break; case '停止': this.innertext = '开始'; clearinterval(timer1) break; } } function update() { var t = document.getelementbyid('time'); var dt = new date(); t.value= dt.tolocalestring(); } </script> </html>
4.4.3京东顶部广告栏关闭
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> body{ margin: 0; } .ad{ width: 100%; height: 60px; background-color: red; } .ad_content{ position: fixed; top: 0; padding: 20px; } #close{ position: fixed; top: 0; right: 0; background-color: lightgray; height: 20px; width: 20px; text-align: center; line-height: 20px; font-size: 30px; } .content{ height: 2000px; background-color: green; } </style> </head> <body> <div class="ad" id = 'ad'> <div class="ad_content"> 我是一个广告 </div> <div id="close"> x </div> </div> <div class="content"> 我是正文内容 </div> </body> <script> var closebtn = document.getelementbyid('close') closebtn.onclick = function () { var ad = document.getelementbyid('ad') ad.style.display = "none" } </script> </html>
4.4.4要求实现效果:当鼠标悬停在img上时,更换为另外一张图片;鼠标离开时,还原为本来的图片。
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //window.onload页面加载完毕以后再执行此代码 window.onload = function () { //需求:鼠标放到img上,更换为另一张图片,也就是修改路径(src的值)。 //步骤: //1.获取事件源 //2.绑定事件 //3.书写事件驱动程序 //1.获取事件源 var img = document.getelementbyid("box"); //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件) img.onmouseover = function () { //3.书写事件驱动程序(修改src) img.src = "image/jd2.png"; // this.src = "image/jd2.png"; } //1.获取事件源 var img = document.getelementbyid("box"); //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件) img.onmouseout = function () { //3.书写事件驱动程序(修改src) img.src = "image/jd1.png"; } } </script> </head> <body> <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/> </body> </html>
4.4.5模态框案例
需求:打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击x的时候会关闭当前的模态框
4.4.6select框的联动效果
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>啦</title> <style> </style> </head> <body> <select id="country" onchange="city_1(this)"> <option value="-1">--请选择--</option> <option value="0">辽宁</option> <option value="1">北京</option> <option value="2">吉林</option> </select> <select id="city1" onchange="city_2(this)"> <option value="-1">--请选择--</option> </select> <select id="city2"> <option value="-1">--请选择--</option> </select> </body> <script> var city0_list = [ ["沈阳","大连","抚顺"], ["海淀","大兴","朝阳"], ["长春","吉林市","清源"] ]; var city1_list = [ [["大东","铁西","沈河"],["大连1","大连2","大连3"],["抚顺1","抚顺2","抚顺3"]], [["海淀1","海淀2","海淀3"],["大兴1","大兴2","大兴3"],["朝阳1","朝阳2","朝阳3"]], [["长春1","长春2","长春3"],["吉林市1","吉林市2","吉林市3"],["清源1","清源2","清源3"]] ]; function city_1(obj) { var a = document.getelementbyid("city1"); var b = document.getelementbyid("city2"); a.options.length = 1; b.options.length = 1; for (var i = 0;i < city0_list[parseint(obj.value)].length;i++){ var opt = document.createelement("option"); opt.innertext = city0_list[parseint(obj.value)][i]; opt.value = i; a.options.add(opt); } } function city_2(obj) { var main = document.getelementbyid("country"); var b = document.getelementbyid("city2"); var val = main.value; b.options.length = 1; for (var i = 0;i < city1_list[parseint(val)][obj.value].length;i++){ var opt = document.createelement("option"); opt.innertext = city1_list[parseint(val)][obj.value][i]; opt.value = i; b.options.add(opt); } } </script> </html>
4.4.7简易留言板
需求:当在textarea中输入内容,点击留言按钮,会添加到浏览器中,效果图如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>留言板</title> <style type="text/css"> *{ padding: 0; margin: 0; } .close{ display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; cursor: pointer; background-color: rgba(0,0,0,.1); margin-left: 20px; } </style> </head> <body> <h1>简易留言板</h1> <div id="box"> <!--<ul> </ul>--> </div> <textarea id="msg"></textarea> <input type="button" id="btn" value="留言"/> <button onclick="sum()">统计</button> </body> <script type="text/javascript"> // 0 将ul标签添加到div#box标签中 var oul = document.createelement('ul'); var obox = document.getelementbyid('box'); obox.appendchild(oul); var obtn = document.getelementbyid('btn'); var omsg = document.getelementbyid('msg') // 控制留言的总数量 var count = 0; obtn.onclick = function(){ // 点击留言按钮事件操作 // 1.创建li标签 var oli = document.createelement('li'); //2.设置内容 oli.innerhtml = omsg.value + "<span class='close'>x</span>" // 3.如果想在插入的第一个li获取的前面继续添加li标签 //3.1获取li标签 var olis = document.getelementsbytagname('li'); //3.2 如果是第一次添加的li标签,则直接添加到ul的后面 if(olis.length == 0){ oul.appendchild(oli); count++; }else{ // 3.3 如果不是第一次添加的li标签,则插入到第一个li标签的前面 oul.insertbefore(oli,olis[0]); count++; } // 4.添加完成之后 清空textarea的值 omsg.value = ''; // 5.点击x的时候删除当前的一条数据 //5.1先获取所有的x var ospans = document.getelementsbytagname('span'); // 5.2for循环 对所有的x添加点击事件 for(var i = 0; i< ospans.length; i++){ ospans[i].onclick = function(){ // 5.3 移除当前的li标签 oul.removechild(this.parentnode) count--; } } } function sum(){ alert('一共发布了'+count+'条留言'); } </script> </html>
4.4.8使用js模拟选择器中hover代码解释:
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <style> button { margin: 10px; width: 100px; height: 40px; cursor: pointer; } .current { background-color: red; } </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //需求:鼠标放到哪个button上,改button变成黄色背景(添加类) var btnarr = document.getelementsbytagname("button"); //绑定事件 for(var i=0;i<btnarr.length;i++){ //要为每一个按钮绑定事件,所以用到了for循环 btnarr[i].onmouseover = function () { //【重要】排他思想:先把所有按钮的classname设置为空,然后把我(this)这个按钮的classname设置为current //排他思想和for循环连用 for(var j=0;j<btnarr.length;j++){ btnarr[j].classname = ""; } this.classname = "current"; //【重要】核心代码 } } //鼠标离开current时,还原背景色 for(var i=0;i<btnarr.length;i++){ //要为每一个按钮绑定事件,所以用到了for循环 btnarr[i].onmouseout = function () { //鼠标离开任何一个按钮时,就把按钮的背景色还原 this.classname = ""; } } </script> </body> </html>
鼠标悬停时,current栏变色,这里用到了排他思想:先把所有按钮的classname置空,然后把(this)按钮的classname设置为current,达到变色的效果。核心代码:
//排他思想:先把所有按钮的classname设置为空,然后把我(this)这个按钮的classname设置为current //排他思想和for循环连用 for(var j=0;j<btnarr.length;j++){ btnarr[j].classname = ""; } this.classname = "current";
核心代码
4.4.9tab栏选项卡
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } #tab{ width: 480px; margin: 20px auto; border: 1px solid red; } ul{ width: 100%; overflow: hidden; } ul li{ float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a{ text-decoration: none; color:black; } li.active{ background-color: red; } p{ display: none; height: 200px; text-align: center; line-height: 200px; background-color: red; } p.active{ display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="active"> <a href="#">首页</a> </li> <li> <a href="#">新闻</a> </li> <li> <a href="#">图片</a> </li> </ul> <p class="active">首页内容</p> <p>新闻内容</p> <p>图片内容</p> </div> </body> <script type="text/javascript"> window.onload = function(){ // //需求:鼠标放到上面的li上,li本身变色(添加类),对应的p也显示出来(添加类); //思路:1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 var tabli = document.getelementsbytagname('li'); var tabcontent = document.getelementsbytagname('p') for(var i = 0; i < tabli.length; i++){ // 绑定索引值(新增一个自定义属性:index属性) tabli[i].index = i; tabli[i].onclick = function(){ // 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想) for(var j = 0; j < tabli.length; j++){ tabli[j].classname = ''; tabcontent[j].classname = ''; } this.classname = 'active' tabcontent[this.index].classname = 'active';//【重要代码】 } } } </script> </html>
4.4.10购物车案例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 500px; height: 400px; margin: 100px auto; background-color: rgba(255,255,255,0.4); position: relative; } .car{ width: 150px; height: 30px; background-color: #fff; padding-left: 30px; position: absolute; left: 130px; top: 3px; z-index: 3; border: 1px solid green; } .shop{ width: 310px; height: 70px; background-color: #fff; position: absolute; top:33px; left: 0; display: none; } div.c{ border-bottom-width: 0; } div.t{ border: 1px solid green; } </style> </head> <body> <div class="box"> <div class="car" id="mycar">我的购物车</div> <div class="shop t" id="shop"></div> </div> <script type="text/javascript"> var mycar = document.getelementbyid('mycar'); var shop = document.getelementbyid('shop'); mycar.onmouseover = function(){ shop.style.display = 'block'; mycar.classname +=' c'; } mycar.onmouseout = function(){ shop.style.display = 'none'; mycar.removeattribute('class'); mycar.classname = 'car'; } </script> </body> </html>
4.4.11计时器案例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> div span{ display: inline-block; height: 150px; line-height: 150px; font-size: 50px; } .num { background-color: lightgray; width: 100px; text-align: center; border-radius: 10px; } .btn{ padding: 20px; text-align: center; } </style> </head> <body> <div> <div> <span class="num" id="hour0">0</span> <span class="num" id="hour1">0</span> <span>:</span> <span class="num" id="minute0">0</span> <span class="num" id="minute1">0</span> <span>:</span> <span class="num" id="second0">0</span> <span class="num" id="second1">0</span> </div> <div class="btn"> <button id = 'start'>开始计时</button> <button id = 'stop'>停止计时</button> <button id = 'reset'>重置计时</button> </div> </div> <script> var start = document.getelementbyid('start') var stop = document.getelementbyid('stop') var reset = document.getelementbyid('reset') start.onclick = function () { interval = setinterval('change_bar("second",6)',1000) } function change_bar(idval,maxval) { var s1 = document.getelementbyid(idval+'1'); var s1_value = parseint(s1.innertext) s1_value++ if(s1_value===10){ s1_value = 0; var s0 = document.getelementbyid(idval+'0'); var s0_value = parseint(s0.innertext) s0_value++ if(s0_value===maxval){ s0_value=0 if(idval === 'second'){ change_bar('minute',6) }else if(idval === 'minute'){ change_bar('hour',10) } } s0.innertext = s0_value } s1.innertext = s1_value } stop.onclick = function () { clearinterval(interval) } reset.onclick = function () { clearinterval(interval) var spans = document.getelementsbyclassname('num') for(var i=0;i<spans.length;i++){ spans[i].innertext=0 } } </script> </body> </html>
4.4.12字体随机变色
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <div> <span id = 'content'>热烈庆祝23期学生全体就业</span> </div> <script> setinterval(f,200) function f() { var content = document.getelementbyid('content'); var color = parseint(math.ceil(math.random()*16777216),16) content.style.color = '#'+color } </script> </body> </html>