排他思想的理解以及百度换肤，表格隔行变色的使用

1）排他思想 （需要重点掌握，后面这种思想很重要）

        如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想

                1）所有元素全部清除他们的样式（干掉他们）

                2）给当前选择的元素设置样式（保留自己）

                3）注意的是顺序不能进行颠倒，要先干掉他们，这样才能设置自己想要的

例如：我们要给5个按钮添加点击事件之后，当我们点击某一个时，当前这个显示颜色，其他的不显示颜色

按钮1按钮2按钮3按钮4按钮5

2)排他思想的使用（百度换肤案例）

案例分析： 
         1）这个案例练习的是个一组元素注册事件。
         2）给4个小图片利用循环注册点击事件。
         3）当我们点击这个图片，让我们页面背景改为当前的图片。
         4）核心算法，把当前图片的src路径取过来，给body作为背景就可以了 。

3)排他思想的使用（表格隔行变色案例）

案例分析
        1）用到新的鼠标事件，鼠标经过onmouseover  鼠标经过onmouseout 
        2)核心思路：鼠标经过tr 行，当前的行改变背景颜色，鼠标离开去掉当前的背景颜色 
        3）注意：第一行（thead里面的行）不需要变化颜色，因此我们获取的是tbody里面的行 

代码
名称
最新公布净值
累计净值
前单位净值
净值增长率
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%

 百度换肤案例，js方法总结（目前已知的方法）

新闻
hao123
地图
贴吧
视频
图片
网盘
更多
查看天气信息
设置
换肤
皮肤一
皮肤二
皮肤三
皮肤四
百度一下

// 方法一： 通过创造一个图片的索引让图片与换图按钮相对应var skinlists = document.querySelectorAll('.skinlist>li');var baidu = document.querySelector('.baidu');// console.log(skinlists);// console.log(baidu);for (var i = 0; i < skinlists.length; i++) {skinlists[i].setAttribute('index', i + 1);skinlists[i].onclick = function() {baidu.style.background = 'url(image/' + this.getAttribute('index') + '.jpg)no-repeat center';baidu.style.backgroundSize = 'cover';}}// 这个就是一一匹配的进行实现换肤，这只是一个思路的理解，不介意该方法实现// skinlists[0].onclick = function() {//     baidu.style.background = 'url(image/1.jpg)no-repeat center';//     baidu.style.backgroundSize = 'cover';// }// skinlists[1].onclick = function() {//     baidu.style.backgroundImage = 'url(image/2.jpg)';//     baidu.style.backgroundSize = 'cover';// }// skinlists[2].onclick = function() {//     baidu.style.background = 'url(image/3.jpg)no-repeat center';//     baidu.style.backgroundSize = 'cover';// }// skinlists[3].onclick = function() {//         baidu.style.background = 'url(image/4.jpg)no-repeat center';//         baidu.style.backgroundSize = 'cover';//     }// 方法二：通过将对象转化为数组的形式，然后通过indexOf获取里面的数组信息var skinlist = document.querySelector('.skinlist');skinlist.addEventListener('click', function(e) {// var item = e.target;// e.target 返回的是触发事件的对象（元素）var skinlists = Array.from(skinlist.querySelectorAll('.skinlist>li'));// Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组var num = skinlists.indexOf(e.target);baidu.style.background = 'url(image/' + (num + 1) + '.jpg) no-repeat center';baidu.style.backgroundSize = 'cover';// 	// if(num==0){// 	// baidu.style.background = 'url(image/' + (num+1)+ '.jpg)';// 	// baidu.style.backgroundSize = 'cover';// 	// }else if(num==1){// 	// baidu.style.background = 'url(image/' + (num+1)+ '.jpg)';// 	// baidu.style.backgroundSize = 'cover';// 	// }else if(num==2){// 	// baidu.style.background = 'url(image/' + (num+1)+ '.jpg)';// 	// baidu.style.backgroundSize = 'cover';// 	// }else{// 	//  baidu.style.background = 'url(image/' + (num+1)+ '.jpg)';// 	//  baidu.style.backgroundSize = 'cover';// 	// }		 // })

下面这个是实现了点击一个按钮，就能将里面的图片进行切换，一个按钮的切换所有图片的效果

// 设置一个按钮切换里面的任意一个图片var skinlists = document.querySelectorAll('.skinlist>li');for (var k of skinlists) { //一个按钮循环背景var j = 1;k.onclick = function() {baidu.style.background = 'url(image/' + j + '.jpg)';baidu.style.backgroundSize = 'cover';j < skinlists.length ? j++ : j = 1;}}

以上的实现，重点还是排他思想的理解以及运用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！