js排他思想与jQuery的排他思想有何不同之处

最新推荐文章于 2024-07-15 22:57:43 发布

一只爱早起的虫

最新推荐文章于 2024-07-15 22:57:43 发布

阅读量106

点赞数 1

文章标签： js jquery javascript

本文链接：https://blog.csdn.net/weixin_51379091/article/details/115062521

版权

js排他思想与jQuery的排他思想有何不同之处？

1：清除别人的样式（干掉其他人）

2：设置自己的样式（给自己设置样式）

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btns = document.querySelectorAll('button');
//遍历每一个按钮，每次点击后都取消样式。
        for(var i = 0;i<btns.length;i++){
            btns[i].onclick = function(){
                for(var i=0;i<btns.length;i++){
                    btns[i].style.backgroundColor='';
                }
//设置当前按钮的颜色
                this.style.backgroundColor='purple';
            }
        }
    </script>
</body>

jQuery

1：设置自己的样式

2：取消兄弟的样式

在jQuery中往往只需要几行代码就能搞定：

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
$(function(){
     //选中所有的button
$("button").click(function(){
//当前的元素变换背景颜色
$(this).css("background" , "red");
/其他的兄弟去掉背景颜色
$(this).siblings("button").css("background" , " ");
//用jQuery的链式编程一句话解决问题
//$(this).css("background","red").siblings().css("background" , " ")；
});
     })
    </script>
</body>

一只爱早起的虫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js排他思想与jQuery的排他思想有何不同之处

js排他思想与jQuery的排他思想有何不同之处？1：清除别人的样式（干掉其他人）2：设置自己的样式（给自己设置样式）<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button
复制链接

扫一扫