jQuery 语法知识（子元素过滤、内容过滤选择器）

原创已于 2024-01-21 20:18:32 修改 · 813 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

于 2024-01-19 10:35:57 首次发布

jQuery 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了jQuery中的几种选择器，如：选择第一个子元素(:first-childSelector)，最后一个子元素(:last-childSelector)，相同元素类型的第一个(:first-of-typeSelector)和最后一个(:last-of-typeSelector)，以及按索引选择(:nth-child0Selector)、包含特定文本(:containsSelector)，空元素(:emptySelector)，拥有子元素的元素(:has()Selector)和非空父元素(:parentSelector)。通过实例展示了如何使用这些选择器来操作HTML元素并应用CSS样式。

子元素过滤

1、:first-child Selector

描述:选择所有父级元素下的第一个子元素。

语法:jQuery( ":first-child")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js"></script>
    <style>
        .sogreen{
            background-color: green;
        }
    </style>
</head>
<body>
    <div><span>s1</span><span>s1</span><span>s1</span></div>
    <div><span>s1</span><span>s1</span><span>s1</span></div>
    <div><span>s1</span><span>s1</span><span>s1</span></div>
</body>
<script>
    $(function () {
        $("div span:first-child").css("text-decoration","underline ").hover(function(){
            $(this).addClass("sogreen");
        },function(){
            $(this).removeClass("sogreen");
        })                
    })
</script>
</html>

给所选元素添加css样式

.css("text-decoration","underline ")

鼠标悬停动作

.hover(function(){

$(this).addClass("sogreen");

},function(){

$(this).removeClass("sogreen");

})

2、:last-child Selector

描述:选择所有父级元素下的最后一个子元素。

语法 :jQuery( ":last-child")

3、:first-of-type Selector

描述:选择所有相同的元素名称的第一个兄弟元素。

语法 :jQuery( ":first-of-type")

4.:last-of-type Selector

描述:选择的所有元素之间具有相同元素名称的最后一个兄弟元素

语法:jQuery(":last-of-type")

5、:nth-child0 Selector

描述:选择的他们所有父元素的第n个子元素

语法:jQuery(":nth-child(index/even/odd/equation)")

内容过滤选择器

1、:contains) Selector

描述:选择所有包含指定文本的元素

语法:jQuery( ":contains(text)")

注意:text:用来查找的一个文本字符串。这是区分大小写的。匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js"></script>
</head>
<body>
    <div>John Resig</div>
    <div>John Resig</div>
    <div>Malcom John Sinclair</div>
    <div>J.ohn</div>


    <script>
        $(function(){
            $("div:contains(John)").css("text-decoration","underline");
        })
    </script>
</body>

</html>

2、:empty Selector

描述:选择所有没有子元素的元素(包括文本节点)

语法:jQuery(“:empty")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js"></script>
    <style>
        .sogreen{
            background-color: green;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr><td>TD#0</td><td></td><td>TD#2</td></tr>
        <tr><td>TD#3</td><td></td><td></td></tr>
        <tr><td>TD#6</td><td></td><td></td></tr>
    </table>
</body>
<script>
    $(function () {
    $("td:empty").text("was empty").css("background-color","red");                
    })
</script>
</html>

3、:has() Selector

描述:选择元素其中至少包含指定选择器匹配的一个种元素

语法:jQuery(":has(selector)")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js"></script>
    <style>
    .text{
        border:1px solid green;
    }
    </style>
</head>
<body>
<div><p>hello in a paragraph</p></div>
<div>hello again!(with no p)</div>
</body>
<script>
    $(function () {
        $("div:has(p)").addClass("text");                
    })
</script>
</html>