1、将html元素转化成数组
因为数组的方法很强大,所以很多时候要对元素进行操作时,转化成数组很方便。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> <script> /*html元素集合是一种类数组对象,拥有数据两大特征:从0递增的自然数索引;有length属性*/ var li = document.getElementsByTagName('li'); /*获取到li元素*/ /*第一种转换方式 array.slice()*/ var arr1=Array.prototype.slice.call(li,0); /*利用数组的构造函数和原型属性,利用slice.call这个方法, 第一个参数是元素对象,第二个参数是从第几个开始获取,填0表示从头到尾所有*/ console.log(arr1); /*第二种转换方式 from(),仅适用于ES6*/ var arr2=Array.from(li); /*利用数组的构造函数,利用from方法,参数是元素对象,获取到所有的*/ console.log(arr2); </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、比较数组的slice() 和 splice()
slice()适合于截取数组部分数据。
splice()适合对数组进行 增删改查 的操作。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /*slice() ,从数组中截取出部分数据,返回所取数据组成的数组*/ var arr=['hong','cheng','huang','lv','lan']; var arr3=arr.slice(1,2); /*两个参数代表开始索引和结束索引,但不包括 结束索引对应的数据*/ console.log(arr3); /*只有'cheng'*/ /*splice(),可删除、增加、修改数组中的部分数据*/ var arr4=arr.splice(0,1);/*删除时,第一个参数是开始索引,第二个位置代表删除的量,返回被删除数据 组成的数组*/ console.log(arr4);/*返回'hong'*/ var arr5=arr.splice(2,0,'hua','cao');/*插入时,第一个参数是开始索引,第二个参数必须是0,第三个参数起是要插入的数据,*/ console.log(arr5); var arr6=arr.splice(0,2,'shan','hai');/*更新 就是先删除再插入,所以第二个参数=添加的数量*/ console.log(arr6); </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3、原生属性和自定义属性
原生属性在获取时,要注意class稍有不同。
自定义属性特别适合实际项目情况,尤其是data命名开头时,还有专门的操作方法。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="hua" class="huahua" style="color: lightgreen" data-weidao="xiang" data-daxiao="10cm" > 这是一个div标签 </div> <script> var div1=document.getElementsByTagName('div'); /*把元素看做对象,获取原生属性可以用对象的方式,用点语法*/ console.log(div1.className);/*class是保留字 所以不能直接用*/ console.log(div1.style.color); /*获取自定义属性*/ console.log( div1.getAttribute('data-weidao')); /*getAttribute()既可以获取自定义属性又可以获取原生属性*/ console.log( div1.dataset.daxiao);/*适合 data-为前缀的自定义属性*/ /*原生属性和自定义属性 都可以读和写*/ div1.id='hua1;'; div1.getAttribute('data-weidao','chou'); console.log( div1.id); console.log( div1.getAttribute('data-weidao')); </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4、通过classList实现对象数据的增删改查和自动切换
通过classList可实现对元素class属性值的增删改查,特别是css类样式的切换
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*这是一个css类*/ .red{ color: red; } </style> </head> <body> <h1 class="one two three">classList</h1> <script> /*classList*/ var h1 = document.getElementsByTagName('h2').item(0); console.log( h1.className );/*普通方法获取class值*/ console.log( h1.classList.value);/*通过classList获取*/ h1.classList.add('four');/*通过classList添加*/ h1.classList.replace('one', '111');/*通过classList替换*/ h1.classList.remove('four');/*通过classList删除*/ console.log( h1.classList.item(0) );/*通过classList获取第一个*/ /*实现自动切换的反转操作,当h1有这个red类时,就删除,没有就增加*/ h1.addEventListener('click', function (event) { h1.classList.toggle('red'); /*red是指一个css类,上面有定义*/ },false); </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5、定时器练习
setTimeout()是设置一个定时生效的操作。
setInterval()是让一段操作 间歇式地不断重复。
事件模拟器是通过对象的构造函数生成一个点击对象,再通过dispatchEvent()方法去触发这个点击事件,从而实现系统的自动执行效果。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <button>登录</button> <button>取消登录</button> <p></p> <hr> <button>播放</button> <button>停止</button> <hr> <img src="images/banner1.jpg" alt="" width="500"> <div style="width: 200px;height: 150px;background-color: lightgreen">广告</div> <p id="price"></p> <script> /*1、setTimeout(),等一段时间再执行*/ var btn1 = document.getElementsByTagName('button').item(0); var btn2 = document.getElementsByTagName('button').item(1); var tex = document.getElementsByTagName('p').item(0); var timer = null; btn1.addEventListener('click', function (ev) { /*点击“登录”后,跳转到百度*/ tex.innerText="正在努力加载中"; timer=setTimeout(function () { location.assign('http://www.baidu.com'); },2000) }, false); btn2.addEventListener('click',function (ev) { clearTimeout(timer); /*点击“取消登录”后,就不再跳转*/ tex.innerText = '已取消跳转'; }); /*2、setInterval(),间隙式地 不断重复执行*/ var btn3 = document.getElementsByTagName('button').item(2); var btn4 = document.getElementsByTagName('button').item(3); var img = document.images.item(0); btn3.addEventListener('click',function () { timer = setInterval(function () { var a=Math.random();/*随机产生一个0-1之间的小数*/ var index=Math.ceil(a*3);/*产生1-3之间随机整数*//*Math.ceil()是向上取整*/ img.src = 'images/banner' + index.toString() + '.jpg'; /*改变图片路径*/ /* toString()把数字转换为字符串*/ },1000 ) }, false); btn4.addEventListener('click', function () { clearInterval(timer); /*清除 间隙式定时器*/ },false); /*3、事件模拟器,让系统自动生成一个点击对象,代替鼠标点击来触发*/ var div = document.getElementsByTagName('div').item(0); var price = document.getElementById('price'); var num = 0; var shouru = 0.5; var click = new Event('click'); /*利用对象的构造函数生成一个点击对象*/ setInterval(function () { div.dispatchEvent(click); /*通过dispatchEvent()这个事件触发器方法 触发点击事件*/ num += 1; /*num + shouru 起始值是1.5 每次+1*/ price.innerHTML = '广告收入: '+ '<span style="color:red">'+(num + shouru).toString()+'</span>' + '元'; /*JS中用html语法要用引号引起来*/ }, 2000); </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6、朱老师的定时器算法思路
1、DOM结构:三张图片,三个小点,两个左右切换按钮。为了让小点数量自动和图片匹配,所以只写了小点的父级标签,并没有定义小点的每个标签及其属性,后期在自动定义小点时,会让小点的自定义属性=图片的自定义属性。
2、实现小点的自动增加(小点数量=图片数量),尤其注意小点的自定义属性=图片的自定义属性。
3、为每个小点增加点击事件,点击以后 更改小点的样式(利用classList的切换类样式) 和 图片。
4、为左右切换按钮设置 图片切换,通过判断显示图片的节点来决定如何切换。
5、利用事件模拟器来实现图片的轮播,鼠标移出就启动 间歇式重复定时器,鼠标移入就取消定时器。