jQuery编程——让你的代码更简短更优雅

super码力

已于 2022-01-21 16:29:26 修改

阅读量317

点赞数

分类专栏： # 网页编程学习笔记文章标签： elementui vue.js 蓝桥杯

于 2022-01-10 17:57:34 首次发布

本文链接：https://blog.csdn.net/m0_61843874/article/details/122415988

版权

网页编程学习笔记专栏收录该内容

12 篇文章 14 订阅

订阅专栏

同一个HTML结构，实现相同的点击效果,三个版本的<Script>代码一个比一个更简洁更优雅

    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>

点击效果：

版本1.0

 <script>
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function() {
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'blue';
            })
        }
</script>

版本2.0

<script src="jquery.min.js"></script>
<script>
        $(function() {
            //隐式迭代  给所有的按钮都绑定了点击事件
            $("button").click(function() {
                //2、当前元素变化背景颜色
                $(this).css("background", "blue");
                //3、其余的兄弟是去掉去背景颜色
                $(this).siblings("button").css("background", "");
            })
        })
</script>

版本3.0

<script src="jquery.min.js"></script>
<script>
        $(function() {
            $("button").click(function() {
            $(this).css("background", "blue").siblings().css("background", "");
        })
</script>