jQuery的元素的筛选

前面介绍了很多的过滤器，现在统一一下，把他们变成一种方法，然后再加上一些特有的方法，这就是本章所要讲的内容。
比如：原先的$(div:eq（index）)，其实我们也可以直接通过调用方法替代这种花里胡哨的写法——$(“div”).eq(index)。

下面给出几个例子：

  • eq（index）：获取第N个元素
  • first ：获取第一个元素
  • last：获取最后一个元素
  • filter(expr/ obj/ ele/ fn):筛选出与指定表达式匹配的元素集合，用逗号分割多个表达式

    -is(exp) ：判断是否匹配给定的选择器，满足任一个就返回true

-has（exp）：有特定后代的元素（下面的例子是有ul后代的li）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li").has("ul").css('color','orange');
        })
    </script>
</head>
<body>
    <ul>
        <li>List item1</li>
        <li>list item2
            <ul>
                <li>List item2-1</li>
                <li>List item2-2</li>
                <li>List item2-3</li>
            </ul>
        </li>
        <li>List item3</li>
        <li>List item4</li>
    </ul>
</body>
</html>

显示：

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_html


-not(exp):不满足匹配选择器的元素

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_html_02


-children(exp):返回匹配给定选择器的子元素

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_javascript_03


-find（exp）：返回匹配给定选择器的后代元素

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_javascript_04

  • next()：下一个兄弟元素

    • jQuery 筛选所有属性包含 jquery的筛选方法有哪些_List_05

  • nextAll()：所有兄弟元素

    • jQuery 筛选所有属性包含 jquery的筛选方法有哪些_jQuery 筛选所有属性包含_06

  • nextUntil(exp)：当前元素往后（不包括自己）直到指定匹配元素为止的元素（不包含符合指定条件元素）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //第一个div直到span加上类名after
            $("div").first().nextUntil("span").addClass("after");

        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <span></span>
    <div></div>
</body>
</html>

显示：

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_jQuery 筛选所有属性包含_07

  • parent():父元素

    • jQuery 筛选所有属性包含 jquery的筛选方法有哪些_javascript_08

  • prev(exp):当前元素的上一个兄弟元素

    • jQuery 筛选所有属性包含 jquery的筛选方法有哪些_jQuery 筛选所有属性包含_09

  • prevAll(exp):当前元素前所有兄弟元素

    • jQuery 筛选所有属性包含 jquery的筛选方法有哪些_html_10

  • prevUtil(exp)：当前元素往前直到指定匹配元素为止的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //最后div直到遇上前面的span，期间遇到的元素加上类名before
            $("ul").prevUntil("span").addClass("before");
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <span></span>
    <div></div>
    <div></div>
    <ul></ul>
</body>
</html>

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_html_11

  • siblings（exp）：所有兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //span前后所有兄弟加类名myBrother
            $("span").siblings().addClass("myBrother");
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <span></span>
    <div></div>
    <div></div>
    <ul></ul>
</body>
</html>

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_javascript_12

  • add（）：把add匹配的选择器的元素添加到当前jquery对象中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //span前后所有兄弟加类名myBrother
            alert($("span").length);
            alert($("span").add("div").length);
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <span></span>
    <div></div>
    <div></div>
    <ul></ul>
</body>
</html>

显示：

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_html_13


jQuery 筛选所有属性包含 jquery的筛选方法有哪些_jQuery 筛选所有属性包含_14


这里的7是怎么来的呢？请看：

他自己默认自带了两个

jQuery 筛选所有属性包含 jquery的筛选方法有哪些_javascript_15