Manipulation JavaScript-DOM
Événement de zone de texte
- onfocus se concentrer
dom.onfocus ---> 获取焦点时候触发事件
- onblur perd le focus
dom.onblur ---> 失去焦点触发事件
Événement souris
- onmouseenter mouse enter événement [pas d'événement bouillonnant]
dom.onmouseenter = function() { }
- événement onmouseleave mouse left
dom.onmouseleave = function() { } 备注: onmouseenter 和 onmouseleave 是对应的一组
- onmouseover Mettez la souris sur l'étiquette [Il y aura des événements bouillonnants, utilisez moins]
dom.onmouseover = function() { }
- onmouseout mouse away
dom.onmouseout = function() { }
- Événements d'enregistrement de balises multiples, méthode d'obtention d'index
实现的功能: 用户点击(鼠标悬停)到标签上,获取该标签对应的索引方式: 1.通过给标签(对象)动态添加一个表示索引的属性,并赋值 2.通过代码获取该索引值即可
Cas
Cas de mise en évidence du mouvement de la souris à changement de couleur entrelacé
<!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>
Cas de commutation de la barre d'onglets
<!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>
Mode de fonctionnement des attributs d'étiquette
- Propriétés du système
☞ 获取属性的值: dom.getAttribute(属性名); 备注: 1.通过getAttribute可以获取标签属性对应的值 2.如果标签没有对应的属性,那么getAttribute返回null ☞ 设置 dom.setAttribute(属性名,值); 备注: 1.通过setAttribute可以给标签添加新的属性 2.如果该标签已经存在某个属性,是对该属性值得修改 ☞ 删除 dom.removeAttribute(属性名); 备注: 1.通过removeAttribute可以将属性移除
- Attributs personnalisés (définir des attributs personnalisés via la méthode fournie dans H5)
概念:以data-* 开始的属性,为自定义属性 作用:保存数据(处理业务中的数据) 注意:H5提供的这种方式就是用来操作自定义属性的,不能操作内置属性 ☞ 获取 dom对象.dataset ---> 返回自定义属性的对象【该属性只能获取自定义属性】 dom对象.dataset.属性名称 dom对象.dataset["属性名称"] ☞ 设置 Dom.dataset.自定义属性名称=值; 备注: getAttribute()也可以用来获取自定义属性
Cas
Utilisez des attributs personnalisés pour obtenir l'effet de changement de barre d'onglets
<!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>
S'il y a des lacunes, veuillez aviser, pour
continuer, continuez à mettre à jour!
Progressez ensemble!