5.jQuery排他思想

最新推荐文章于 2024-06-24 20:52:55 发布

肝JOJO

最新推荐文章于 2024-06-24 20:52:55 发布

阅读量660

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_34620296/article/details/103589820

版权

jQuery 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

效果如下
点击当前按钮,会改变当前的背景色,去掉其他按钮的背景色
在这里插入图片描述
代码如下
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>

肝JOJO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.jQuery排他思想

效果如下点击当前按钮,会改变当前的背景色,去掉其他按钮的背景色代码如下 <script src="jQuery.js"></script> <script> $(function(){ //1.隐式迭代,会给所有按钮绑定点击事件 $("button").click(functi...
复制链接

扫一扫

专栏目录