5.jQuery排他思想

效果如下
点击当前按钮,会改变当前的背景色,去掉其他按钮的背景色
在这里插入图片描述
代码如下
1.普通写法

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

2.链式编程写法

    <script src="jQuery.js"></script>
    <script>
    /*
    .链式编程是为了节省代码量,看起来更优雅
        $(this).css('color','red').sibling().css('color','')
    */
        $(function(){
            //1.隐式迭代,会给所有按钮绑定点击事件
            $("button").click(function(){
                //2.(链式编程)当前元素变化背景颜色,其他兄弟去掉颜色
                $(this).css("background","pink").siblings("button").css("background","");
                //2.自己不变色,兄弟变为红色
                $(this).siblings().css("background","red");
                //2.自己不变色,兄弟的父亲变为红色
                $(this).siblings().parent().css("background","red");

            })
        })
    </script>

<body>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
</body>
版权声明：本文为qq_34620296原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。