[TOC] # 4.5排他思想 （当前变一个，其余不变）  如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 1.所有元素全部清除样式(干掉其他人) 2.给当前元素设置样式(留下我自己) 3.注意顺序不能颠倒,首先干掉其他人，再设置自己 ~~~ <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> //1获取元素 var btns = document.getElementsByTagName('button'); //btns 得到的时伪元素组 里面的每一个元素 byns[i] 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 = ''; } //2.让当前的元素背的颜色为'pink' this 当前元素 this.style.backgroundColor = 'pink' } } </script> ~~~ # 实验百度换肤 （点击图片，整个页面背景图片替换） ## 案例分析 1.这个案例练习的是给一组元素注册事件 2.给4个小图片利用**循环注册点击事件**（for 循环给每一个绑定一个事件） 3.当我们点击了这个图片，让我们页面背景改为当前的图片 4.核心算法:把当前（this）图片的src路径取过来，给body做为背景即可 ~~~ 1、获取元素 2、for循环把图片地址绑定事件（每一个图片的地址都被获取了） 3、执行 （获取想要替换的元素。样式。背景=url（修改来源）当前地址） document.body.style.backgroundImage = 'url(' + this.src + ')'; ~~~ ~~~ * { margin: 0; padding: 0; } body { background: url(api1.html) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; height: 100px; } <\script> //1.获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img'); //console.log(imgs); //2.循环注册事件 for (vari = 0; i < imgs.length; i++) { imgs[i].onclick = function() { //this.src 就是我们图片的路径 //console.log(this.src); //把路径 this.src 给body 就行了 document.body.style.backgroundImage = 'url(' + this.src + ')'; } } </script> ~~~ # 案例:表格隔行变色（鼠标经过 当行颜色改变）  ## 案例分析 ①用到新的鼠标事件鼠标经过onmouseover鼠标离开onmouseout ②核心思路:鼠标经过tr行,当前的行变背景颜色，鼠标离开去掉当前的背景颜色 ③注意:第一行(thead里面的行)不需要变换颜色,因此我们获取的是tbody里面的行 ## 实验代码  ## js实现 1、获取元素 2、for循环 每一个绑定同一个事件 3、执行**经过**（获取属性）**离开**（获得属性清零） ~~~ <script> //1.获取元素 获取的是 tbody 里面的所有行 var trs = document.querySelector('tbody').querySelectorAll('tr'); //2.利用循环绑定事件 for (vari = 0; i < trs.length; i++) { //3.鼠标经过 onmouseover trs[i].onmouseover = function() { // console.log(11); this.className = 'bg' } //鼠标离开onmouseout trs[i].onmouseout = function() { this.className = '' } } </script> ~~~ # 表单全选取消全选案例 （重点）  ## 基本样式代码  ## 代码实验 ### 第一步 1、获取元素 2、（全选的id）绑定事件 3、同过获取他的复选框属性（this.checked） 把他赋予给 （for循环所有小选项）他就可以跟随全选框改变了   ### 第二步   # 4.6自定义属性的操作 （获取自定义属性） element.getAttribute( '属性名");  ## 1.获取属性值 ~~~ element.属性获取属性值。 element.getAttribute( '属性"); ~~~ ~~~ 区别: element.属性获取内置属性值(元素本身自带的属性) element.getAttribute( '属性'); 主要获得自定义的属性（标准）我们程序员自定义的属性 ~~~ ## 2.设置属性值 （获取后没有就=添加，存在就=修改） (**修改属性值**如 id='aa' 修改为id='bb') element(元素名 如 div.)**.setAttribute('属性'，'值');** **修改元素属性** ~~~ 1. div.id = 'test' //把id 设置为'test' element.属性='值'设置内置属性值。 2.div. setAttribute( ' index',2); //主要针对自定义属性 element.setAttribute('属性'，'值'); ~~~ 区别: ~~~ element.属性设置内置属性值 element.setAttribute ( '属性);主要设置自定义的属性（标准) ~~~ ## 3.移除属性 （ .removeAttribute('index'（删除的属性））） ~~~ element. removeAttribute(·属性'); ~~~ ### 所有代码 ~~~ <div id="demo" index="1" class="nav"></div> var div = document.querySelector('div'); //1.获取元素的属性值 //（1）element.属性 console.log(div.id); //(2).dlement.getAttrbute('属性') console.log(div.getAttribute('id')); //get获得 Attribute属性 //我们程序员 添加的属性 叫自定义属性 index console.log(div.getAttribute('index')); //2.设置元素属性值 //（1）element.属性 = '值' div.id = 'test'; div.className = 'navs'; //(2)element.serAttribute('属性','值')； 注意针对自定义属性 div.setAttribute('index', 2); div.setAttribute('class', 'footer'); //class 特殊 这里写的是class 不是className //3.移除属性 element.removeAttribute('属性') div.removeAttribute('index') ~~~ # 案例: tab栏切换(重点 前端必学) （商品页面跳转） 当**鼠标点击上面相应的选项卡**( tab)，下面**内容跟随变化**  ## 案例分析  ## 代码实验 ### div+css  ### js实现 （自定义属性） ~~~ //1.上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想)修改类名的方式//获取元素 var tab_list = document.querySelector('.tab_list'); varlis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); //for循环绑定点击事件 for (vari = 0; i < lis.length; i++) { //设置给5个li 设置索引号 lis[i].setAttribute('index', i); lis[i].onclick = function() { //1.点那个 那个变红 （排他思想） // 干掉所有人 其余的li清除 class 这个了 for (vari = 0; i < lis.length; i++) { lis[i].className = ''; } //留下我自己 this.className = 'current'; //2. 下面的显示内容模块 var index = this.getAttribute('index'); console.log(index); for (vari = 0; i < items.length; i++) { items[i].style.display = 'none'; } //留下我自己 items[index].style.display = 'block'; } } ~~~ # 自H5定义属性  ## 设置自定义属性规范 （给元素添加 或修改属性）  ## 2.获取H5自定义属性 重点 （下面2.属性 \[ \] ） 1.兼容性获取element.getAttribute( 'data-index' ); ~~~ 1．兼容性获取element.getAttribute( 'data-index’); 2.H5新增element.dataset.index或者 element.dataset['index’ ] ie 11才开始支持 //带有date名字的集合属性 ~~~ 演式代码 ~~~ <div getTime="20" data-index="2" data-list-name="andy"></div> var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); //H5自定义属性 以 date- 开头 div.setAttribute('data-time', 3); console.log(div.getAttribute('data-time')); console.log(div.getAttribute('data-index')); console.log(div.getAttribute('data-list-name')); //h5 新增的获取自定义属性的方法 //dataset 是一个集合里面存放所有 data 开头的自定义属性 console.log(div.dataset); console.log(div.dataset.index); console.log(div.dataset['index']); console.log(div.dataset.listName); //驼峰命名法 console.log(div.dataset['listName']); ~~~