排他思想之百度换肤
——如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1.所有的元素全部清除样式（干掉其他人）；
2.给当前元素设置样式（留下我自己）。
注意：顺序不能颠倒，首先干掉其他人，再设置自己。
百度换肤案例
分析：
1.这个案例练习的是给一组元素注册事件；
2.给5张图片利用循环注册点击事件；
3.当我们点击了这个图片，让我们页面背景改为当前的图片；
4.核心算法：把当前图片的src路径取过来，给body做背景即可。
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>百度换肤</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 body{ 12 background: url(图片/01百度换肤/1.jpg) no-repeat; 13 } 14 .bc{ 15 overflow: hidden; 16 margin: 100px auto; 17 background-color: #fff; 18 width: 620px; 19 padding: 2px; 20 } 21 .bc li{ 22 list-style: none; 23 float: left; 24 margin: 2px; 25 height: 80px; 26 cursor: pointer; 27 } 28 img{ 29 width: 120px; 30 height: 80px; 31 } 32 </style> 33 </head> 34 <body> 35 <ul class="bc"> 36 <li><img src="图片/01百度换肤/1.jpg"></li> 37 <li><img src="图片/01百度换肤/2.jpg"></li> 38 <li><img src="图片/01百度换肤/3.jpg"></li> 39 <li><img src="图片/01百度换肤/4.jpg"></li> 40 <li><img src="图片/01百度换肤/5.jpg"></li> 41 </ul> 42 <script> 43 //1.获取所有的图片元素 44 var imgs = document.querySelector(".bc").querySelectorAll("img"); 45 var body = document.getElementsByTagName("body"); 46 //2.循环注册事件 47 for(var i=0;i<imgs.length;i++){ 48 imgs[i].onclick=function(){ 49 //this.src是我们点击图片的路径 50 //把这个路径this.src给body 51 document.body.style.backgroundImage="url("+this.src+")"; 52 } 53 } 54 </script> 55 </body> 56 </html>
（有一个多月没学前端的东西了，好多东西又开始陆续忘了，😔，这个假期过得太颓废了，加油吧）
