本文链接：https://blog.csdn.net/2401_84435866/article/details/138250551

前些天发现了一个比较好的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。
点击跳转到网站：人工智能学习

上期传送门：
👉初识 JavaScript（揭开javascript的神秘面纱）
👉javascript中的数据类型
👉javascript中的数据类型转换
👉javascript 基础案例（循环）
👉面试官最爱考的 javascript 预解析，你搞明白了吗？
👉“撩过”c++的对象，“拿捏”了python的对象，你还怕拿不下javascript的对象吗？
👉javascript 内置对象Math总结及其案例
👉 javascript 内置对象Date总结及案例
👉解锁前端密码框常见功能做法
👉前端实现动态生成表格，是蒸的C
👉四行js代码让别人无法复制你的网站文字，八行程序员都哭了

🐟前言

在学习前端js操作元素的时候，往往有很多的案例的做法的思想都是一样的，我们一定要会。本篇文章将从几个小demo入手，带你领略js的风采。
很常见的一些案例，一定要学会哦！！！

🐋排他思想（算法）

排他思想在我们前端开发中十分的常见，因此我打算在写这些案例之前简单讲一讲排他思想，不只在这篇博客，我后面的前端小demo也会用到排他思想，这在我们前端开发中很常见，用处很广，所以你一定要掌握哦！

一句话总结排他思想：

💙💙干掉其他人,留下我自己💙💙

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1．所有元素全部清除样式（干掉其他人）
2．给当前元素设置样式（留下我自己）
3．注意顺序不能颠倒，首先干掉其他人，再设置自己

🐬案例-点击按钮变色

分析：首先循环为每一个按钮注册事件，然后点击按钮添加背景色之前，清除之前以点击过的样式，最终为点击的按钮添加新样式。

🍂🍂🍂1.代码🍂🍂🍂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 button{
 border-radius: 10%;
 background-color:skyblue;
 }
 </style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
 //排他思想
 var btn = document.querySelectorAll('button');
 for (var i=0;i<btn.length;i++){
 // 为每一个按钮注册事件
 btn[i].onclick = function(){
 //点击后添加背景色之前，清除之前以点击过的样式（干掉所有人）
 for (var i=0;i<btn.length;i++){
 btn[i].style.backgroundColor = '';
 }
 // 留下我自己
 this.style.backgroundColor = 'pink';
 }
 }
 </script>
</body>
</html>

🍃🍃🍃2.动图演示🍃🍃🍃

请添加图片描述

🐋案例-换肤效果

分析：为列表框的图片循环注册事件就行，点击列表框的图片改变body的backgroundImage的属性值url就行。

🍂🍂🍂1.代码🍂🍂🍂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 \*{
 margin: 0;
 padding: 0;
 }
 li{
 list-style: none;
 }
 body{
 background:url('img/201.jpg') no-repeat;
 background-size: cover;
 }
 .box{
 overflow: hidden; /\*清除浮动\*/
 width: 410px;
 background-color: #fff;
 margin-top: 100px;
 margin-left: 70%;
 padding:3px 0;
 }
 .box li{
 float:left;
 width: 100px; 
 margin: 0 1px; 
 }
 img{
 width: 100%;
 vertical-align: bottom; /\*li盒子是图片按比例撑高的，图片和盒子下边默认是基线对齐，有间隙\*/
 }
 </style>
</head>
<body>
    <ul class="box">
        <li><img src="img/201.jpg" alt=""></li>
        <li><img src="img/202.jpg" alt=""></li>
        <li><img src="img/203.jpg" alt=""></li>
        <li><img src="img/204.jpg" alt=""></li>
    </ul>
    <script>
 // js实现换肤效果 循环注册事件就行，用不到排他思想
 var imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');
 for (var i=0;i<imgs.length;i++){
 imgs[i].onclick = function(){
 var arr = this.src.split('/');
 imgUrl = arr[arr.length-2] + '/' + arr[arr.length-1]; //切割链接为 img/\*\*\*.jpg
 document.body.style.backgroundImage = 'url(' + imgUrl + ')';
 }
 }
 </script>
</body>
</html>

🍃🍃🍃2.动图演示🍃🍃🍃
请添加图片描述

🐋案例-表格隔行变色

分析：这个案例我们完全可以用css中的:hover实现而且非常简单，这里我们练一下js,同样的还是循环注册事件，当鼠标滑动到对应的行时，将该行的class属性改为带有背景色的bg,当鼠标滑出该行时，去除掉该行的class属性就行。

🍂🍂🍂1.代码🍂🍂🍂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 
 table{
 border: 1px solid #999;
 border-collapse: collapse;
 text-align: center;
 margin: 0 auto;
 }
 th,td{
 border-bottom: 1px solid #999;
 padding: 5px;
 }
 .bg{
 background-color: #87ceeb8c;
 }
 </style>
</head>
<body>
    <table>
        <thead>
            <tr class="bg">
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>0001</td>
                <td>公司1</td>
                <td>1075</td>
                <td>1086</td>


**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/8087f8c06b129975b3b7be228aa41f0d.png)

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)

**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)