JavaScript12——排他思想等案例

最新推荐文章于 2024-05-05 16:12:15 发布
最新推荐文章于 2024-05-05 16:12:15 发布
阅读量489 收藏 2
点赞数 1
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37483148/article/details/109044879
版权

案例一：按钮的排他思想

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
        //兼容的话可以用tagname，不兼容用selectall
        //1.获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                //（1）先把所有的按钮颜色去掉
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';

                }
                //（2）再加自己的颜色
                this.style.backgroundColor = 'pink';
            }
        } //2.首先排除其他人，然后再设置自己的样式，这种排除其他人的思想称为排他思想
    </script>
</body>

</html>

效果如下：

案例二：换肤

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            list-style: none;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            width: 410px;
            padding-top: 3px;
            background-color: blanchedalmond;
        }
        
        li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
</body>
<script>
    var imgs = document.querySelector('.baidu').querySelectorAll('img');
    var bodys = document.body; //body怎么获取的得知道
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function() {
            //this.src就是点击的图片的路径，给body就好了
            bodys.style.backgroundImage = 'url(' + this.src + ')';
        }
    }
</script>

</html>

效果如下：

案例三：表格隔行变色（添加或去掉class属性）

<!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>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function() {
                this.className = 'bg';
            }
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>

效果如下：

案例四：全选、反选（重点案例，要考虑两种情况）

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        var j_cbAll = document.querySelector('#j_cbAll');
        var j_tb = document.querySelector('#j_tb').querySelectorAll('input');
        j_cbAll.onclick = function() {
            //console.log(this.checked);
            for (let index = 0; index < j_tb.length; index++) {
                j_tb[index].checked = this.checked;

            }
        }
        for (let index = 0; index < j_tb.length; index++) {
            j_tb[index].onclick = function() {
                //每次点击都要循环检查是否全被选中
                var flag = true;
                for (var i = 0; i < j_tb.length; i++) {
                    if (!j_tb[i].checked) {
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }

        }
    </script>
</body>

</html>

效果如下：

案例五：tab样式切换案例（用了两次排他思想，还自增了属性）

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .tab {
            width: 650px;
            height: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: brown;
            color: #ccc;
        }
        
        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        //1.上面的模块选项卡，点击某一个，当前的是红色，其余不变 采用排他思想

        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            //开始给5个小例设置索引号
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'current';
                //2.下面的显示内容模块 和上面一一对应的 
                var index = this.getAttribute('index');
                //干掉所有人 让其余的隐藏 排他思想
                for (var i = 0; i < lis.length; i++) {
                    items[i].style.display = 'none';
                }
                //留下我自己，让当前的item显示出来
                items[index].style.display = 'block';

            }
        }
    </script>
</body>

</html>

效果如下：

I have a lemon
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js之排他思想及案例
m0_61547956的博客
04-16 1085
案例一：五个按钮，点击谁谁的背景颜色变成粉色 var btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { //先把所有的背景颜色去掉 for (var i = 0; i < btns.lengt...
JS基础-排他思想案例
qq_43781887的博客
04-16 350
要实现的效果： 点击哪一个按钮，哪一个按钮就变成粉色。 思想：首先获取所有的按钮元素，然后采用循环遍历里面的按钮元素，在让按下的那个按钮变成粉色之前应当去除其他所有按钮的背景颜色。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g.
前端学习（834）：排他思想
歌谣的博客
04-13 461
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
javascript中的排他思想
最新发布
2301_80174941的博客
05-05 186
如果有同一组元素，想要其中某一个元素实现某种样式， 而其他元素为默认样式，需要用到循环的排他思想算法。3. 注意顺序不能颠倒，首先清除所有元素样式，再设置选中元素样式。点击不同按钮，当前按钮 变为粉色，其余按钮保持默认颜色。1. 所有元素全部清除样式。2. 给当前元素设置样式。
js 排他思想与案例演示 【className】【classList】【removeClass】【addClass】
hangshao_123的博客
11-15 1280
利用className进行排他思想实现 利用classList进行排他思想的实现 利用jQuery进行排他思想的实现
JS排他思想
m0_63953314的博客
08-17 360
js排他思想应用案例
javascript基础——String
10-21
JS不是那么好学的，本身语言设计的时候就有很多不可思议的地方，这篇文章主要介绍了javascript基础——String。
javascript运算符——位运算符全面介绍
10-21
下面小编就为大家带来一篇javascript运算符——位运算符全面介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript运算符——逻辑运算符全面解析
10-22
下面小编就为大家带来一篇javascript运算符——逻辑运算符详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用JavaScript绘图 ——JS2D函数集
01-21
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
WebSocket实战之——JavaScript例子
02-25
一、详细代码案例详细解读一个简单html5WebSocket的Js实例教程,附带完整的javascriptwebsocket实例源码，以及实例代码效果演示页面，并对本实例的核心代码进行了深入解读。从WebSocket通讯三个阶段（打开握手、数据...
JavaScript【排他思想及其优化】
Coding
04-02 1926
JavaScript【排他思想及其优化】
JavaScript排他思想
qq_61716556的博客
05-22 2122
什么是排他思想？ 排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。 排他思想的优势 排他思想适用于为多个同类型元素设置样式或效果的情况。避免为单个元素重复设置相同样式，可以有效显示出用户操作下某一元素的改变。 实现排他思想的步骤 为全部元素设置一般效果 为特定元素设置特定效果 <!DOCTYPE html> <html lang="en"> <head&gt
JavaScript排他思想的实现代码案例
qq_36507046的博客
07-10 1161
需要实现效果为：点击当前按钮，当前按钮变成橙色，其余未点击的按钮颜色保持不变。具体实现算法分为三个步骤 1）使用for循环同时给多个按钮绑定事件2） 找出当前唯一的orange类删除3）给当前点击的按钮添加orange类注意：需要先将其中任意一个按钮添加orange类 第1个，否则会因为找不到当前按钮中的orange类，算法失效。 解决方法：........................
排他思想 （Js代码实现，有经典案例）
学习记录
03-19 1036
排他思想（js实现) 如果有同一组元素，外卖想要某一个元素实现某种样式，需要用到循环的排他思想算法： 所有元素全部清空样式（干掉其他人） 给当前元素设置样式（留下自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 代码实现： <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <but
JS‘排他思想’的简单案例
LttleJoker的博客
10-19 280
需求：现我们需要将HTML上展示的三个li标签都添加点击事件，当我们点击其中一个li的时候将让当前li的背景色变为红色，且同时只能有一个li背景色为红色。 HTML： <ul> <li></li> <li></li> <li></li> </ul> CSS: body{ background-color: #16a085; } ul { ..
javascript排他思想 -- 案例⭐
Messchao的博客
09-29 102
js单击排他思想效果预览html代码css代码js代码 像素格式问题效果不太显著，正确效果为单击后自身变色其余恢复默认 效果预览 html代码 <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> <button>按钮</button> css代码 无 js
js中的排他思想
weixin_62460148的博客
07-20 153
所谓的排他思想通俗来说就是我们去租房子，我们的房东要先帮我们将里面的住客清除掉，再让我们入住。而我们需要的效果是点击其中一个按钮样式改变后其他的样式都要恢复原样，这个时候我们就要用到排他思想，代码如下。这是我们依次点击，会发现下方的情况，点击下一个按钮时上一个按钮没有恢复到点击之前的颜色。下方五个按钮，我们给它们添加点击事件，来改变它们的样式。
b站黑马JavaScript的Ajax案例代码——图书管理案例搜索事件
04-23
好的，以下为B站黑马JavaScript的Ajax案例代码——图书管理案例搜索事件： ```javascript /** * 搜索事件 */ function searchBook() { // 获取搜索框内容 var searchInput = document.querySelector("#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值