JavaScript-DOM操作
文本框事件
- onfocus 获取焦点
dom.onfocus ---> 获取焦点时候触发事件
- onblur 失去焦点
dom.onblur ---> 失去焦点触发事件
鼠标事件
- onmouseenter 鼠标进入事件【没有事件冒泡】
dom.onmouseenter = function() { }
- onmouseleave 鼠标离开事件
dom.onmouseleave = function() { } 备注： onmouseenter 和 onmouseleave 是对应的一组
- onmouseover 鼠标放到标签之上【会有事件冒泡，少用】
dom.onmouseover = function() { }
- onmouseout 鼠标离开
dom.onmouseout = function() { }
- 多个标签注册事件，获取索引方式
实现的功能： 用户点击（鼠标悬停）到标签上，获取该标签对应的索引方式： 1.通过给标签（对象）动态添加一个表示索引的属性，并赋值 2.通过代码获取该索引值即可案例
隔行变色鼠标移动高亮显示案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li { line-height: 50px; } li:nth-child(even) { background-color: green; } li:nth-child(odd) { background-color: yellow; } </style> </head> <body> <ul> <li>哈哈</li> <li>嘿嘿</li> <li>嘻嘻</li> <li>嗯嗯</li> </ul> <script> var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { lis[i].onmouseenter = function () { for (var j = 0; j < lis.length; j++) { lis[j].style.background = ''; } this.style.background = 'red'; } } </script> </body> </html>
tab栏切换案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-size: 20px; font-weight: 700; color: #999; } .nav { width: 100%; height: 55px; line-height: 55px; background-color: #ccc; } .nav .w { width: 980px; margin: 0 auto; } .nav li { float: left; } .nav li a { display: block; height: 55px; padding: 0 30px; } .active { background-color: orange; color: #fff; } </style> </head> <body> <div class="nav"> <div class="w"> <ul> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">前端培训</a></li> <li><a href="javascript:;">PHP培训</a></li> <li><a href="javascript:;">Java培训</a></li> <li><a href="javascript:;">联系我们</a></li> </ul> </div> </div> <script> // 获取a标签 var aBtns = document.querySelectorAll('.nav a'); // 遍历所有a标签注册鼠标进入事件 for(var i = 0; i < aBtns.length; i++) { aBtns[i].onmouseenter = function() { this.classList.add('active'); } //鼠标离开移除原来的样式 aBtns[i].onmouseleave = function() { this.classList.remove('active'); } } </script> </body> </html>
标签属性操作方式
- 系统属性
☞ 获取属性的值： dom.getAttribute(属性名)； 备注： 1.通过getAttribute可以获取标签属性对应的值 2.如果标签没有对应的属性，那么getAttribute返回null ☞ 设置 dom.setAttribute(属性名,值); 备注： 1.通过setAttribute可以给标签添加新的属性 2.如果该标签已经存在某个属性，是对该属性值得修改 ☞ 删除 dom.removeAttribute(属性名)； 备注： 1.通过removeAttribute可以将属性移除
- 自定义属性（ 通过H5中提供的方式设置自定义属性）
概念：以data-* 开始的属性，为自定义属性 作用：保存数据(处理业务中的数据) 注意：H5提供的这种方式就是用来操作自定义属性的,不能操作内置属性 ☞ 获取 dom对象.dataset ---> 返回自定义属性的对象【该属性只能获取自定义属性】 dom对象.dataset.属性名称 dom对象.dataset["属性名称"] ☞ 设置 Dom.dataset.自定义属性名称=值; 备注： getAttribute()也可以用来获取自定义属性案例
利用自定义属性实现tab栏切换效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 300px; border: 1px solid #ccc; margin: 50px auto; } .title { width: 100%; height: 60px; line-height: 60px; } .title a { display: block; height: 100%; width: 100px; text-align: center; text-decoration: none; float: left; background-color: yellowgreen; color: black; } .content { width: 100%; height: 300px; } .public { width: 100%; height: 100%; } a.active { background-color: orange; color: #fff; } </style> </head> <body> <div class="box"> <div class="title"> <a href="javascript:;" class="active" data-myID="one">百度</a> <a href="javascript:;" data-myID="two">淘宝</a> <a href="javascript:;" data-myID="three">京东</a> </div> <div class="content"> <div class="public item1" id="one" style="display: block;">百度对应的内容</div> <div class="public item2" id="two" style="display: none;">淘宝对应的内容</div> <div class="public item3" id="three" style="display: none;">京东对应的内容</div> </div> </div> <script> var aBtns = document.querySelectorAll('a'); var items = document.querySelectorAll('.public'); //先完成tab栏切换 for (var i = 0; i < aBtns.length; i++) { //点击每一个a标签 aBtns[i].onclick = function () { //排他思想去掉其他样式 for (var j = 0; j < aBtns.length; j++) { aBtns[j].classList.remove('active'); } //给当前a标签设置样式 this.classList.add('active'); //2. 点击当前标签的时候,获取标签身上的自定义属性值(其实就是内容区域对应的id值) var id = this.dataset.myid; // console.log(id); //利用排他思想,将其他盒子先隐藏 for (var k = 0; k < items.length; k++) { items[k].style.display = 'none'; } // 3. 通过id获取对应的内容盒子 var box = document.getElementById(id); // 4. 将盒子显示 box.style.display = 'block'; } } </script> </body> </html>
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！