链式编程

链式编程是为了节省代码量，看起来更优雅。

$(this).css('color','red').sibling().css('color','');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery排他思想</title>
    <script src="JS/jquery.min.js"></script>
</head>
<body>
    你好
    <button>lucky</button>
    <button>lucky</button>
    <button>lucky</button>
    <button>lucky</button>
    <button>lucky</button>
    <button>lucky</button>
    <button>lucky</button>
    <button>lucky</button>
    <script>
        $(function(){
            //1、隐藏迭代给所有的按钮都绑定了点击事件
             $("button").click(function(){
                  //2、当前的元素变化背景
                  $(this).css("background","pink");
                  //3、其余的元素去掉变化背景
                 $(this).siblings("button").css("background","");
                 //链式编程
                 $(this).siblings().parent().css('color','blue');
             });
        })
    </script>
</body>
</html>

在这里插入图片描述

jQuery样式操作

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。
1、参数只写属性名，则是返回属性值

$(this).css("color");

2、设置类样式方法
添加类

$("div").addClass("current");

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作样式之css方法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .current {
            background-color: blueviolet;
        }
    </style>
    <script src="JS/jquery.min.js"></script>
</head>
<body>
    <div></div>
    <script>
        //操作样式之css方法
        $(function(){
            // console.log($("div").css("width"));
           //1、添加类addClass（）
            $("div").click(function(){
                $(this).addClass("current");
            })


        })
    </script>
</body>
</html>

移除类

$("div").removeClass("current");

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作样式之css方法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .current {
            background-color: blueviolet;
        }
    </style>
    <script src="JS/jquery.min.js"></script>
</head>
<body>
    <div class="current"></div>
    <script>
        //操作样式之css方法
        $(function(){
            // console.log($("div").css("width"));
           //移除类removeClass（）
            $("div").click(function () {
                $(this).removeClass("current")
            })


        })
    </script>
</body>
</html>

切换类

$("div").toggleClass("current");

案例：
点击切换颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作样式之css方法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .current {
            background-color: blueviolet;
        }
    </style>
    <script src="JS/jquery.min.js"></script>
</head>
<body>
    <div class="current"></div>
    <script>
        //操作样式之css方法
        $(function(){
            // console.log($("div").css("width"));
           //切换类toggleClass（）
            $("div").click(function(){
                $(this).toggleClass("current");
            })



        })
    </script>
</body>
</html>