jquery的排他思想和链式编程

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

jquery中的两个重要函数：

1.鼠标经过函数：mouseover(function(){});

2.鼠标离开函数：mouseout(function(){});

注意：$(this)再jquery中表示当前元素，不需要加双引号

在这里举个例子（假设我们设计了一个class=nav的ul，ul的下面存放了li，我们要使得鼠标经过时把li显示出来，而在鼠标离开时将li隐藏）：

            //鼠标经过函数
            $(".nav>li").mouseover(function(){
                $(this).children("ul").show();
            })
            //鼠标离开函数
            $("nav.li").mouseout(function(){
                $(this).children("ul").hide();
            })

jquery中选取第n个元素进行渲染

当我们想选取第n个元素是可以有两种方法，这里以代码的形式来举例（假设我们设计了一个ul里面有5个li元素，而我们要渲染第三个li元素）：

方法1：利用选择器的方式选择

$("ul li:eq:(2)").css("color","pink");

方法2:利用选择方法的方式选择：

$("ul li").eq(2).css("color","pink");

jquery中的排他思想

如果想要实现多选一的效果，就要使用到排他思想(当前元素设置样式，其余的兄弟元素清除样式），jquery中的隐式迭代非常的方便，来吧，代码展示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-3.6.0.js"></script>
    <title>排他思想</title>
</head>
<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function(){
        //隐式迭代，给所有的按钮都绑定了点击事件
            $("button").click(function(){
                 //给当前的元素变化背景颜色
                $(this).css("background","pink")
                //其余的兄弟去掉背景颜色，隐式迭代
                $(this).siblings("button").css("background","")
            })
        })
    </script>
</body>
</html>

jquery链式编程

链式编程是为了节约代码量，让代码看起来更加的简洁。还是借鉴上面的button案例以代码的形式作为呈现，假设我们要设置当前的元素颜色变为红色，让其余的的兄弟元素不变色，使用jquery原始代码我们应该这样写

$(this).css("color","red")
$(this).siblings("button").css("color","")

而如果使用链式编程我们只需要写

$(this).css("color","red").siblings().css("color","")

显而易见，这使得代码变得简洁了很多，也可以极大的提高开发者的开发速度