jQuery 基础选择器与属性选择器

下面是关于 jQuery 基础选择器与属性选择器的详细攻略。

jQuery 基础选择器

元素选择器

元素选择器可以选取文档中所有指定元素的内容，例如选取所有的 p 元素：

$("p")

使用元素选择器的时候，选择器的名称必须用字符串表示，并且以美元符号 $ 开始，这是 jQuery 的特有语法。

类选择器

类选择器选取元素的 class 属性，例如选取所有 class 为 test 的元素：

$(".test")

使用类选择器也必须在选择器名称前添加 . 符号。

ID选择器

ID选择器选取元素的 id 属性，该属性在文档中应该是唯一的，例如选取id为 demo 的元素：

$("#demo")

使用 ID 选择器也必须在选择器名称前添加 # 符号。

通配符选择器

通配符选择器可以选取文档中所有的元素，例如选取所有的元素：

$("*")

通配符选择器的名称是 *，表示匹配任何元素。

层级选择器

层级选择器可以选取嵌套在其他元素中的元素，例如选取 div 元素下的所有 p 元素：

$("div p")

层级选择器中不同元素之间要添加一个空格。

过滤器选择器

过滤器选择器可以根据元素的其他属性来筛选元素，例如选取第一个 p 元素：

$("p:first")

其中 :first 是过滤器选择器的一种，它匹配第一个符合条件的元素。

属性选择器

属性选择器可以选取元素的具有指定属性或属性值的元素，下面分别介绍几种常见属性选择器。

属性名称选择器

属性名称选择器可以选取拥有该属性的所有元素，例如选取所有拥有 title 属性的元素：

$("[title]")

属性名称选择器必须放在方括号中，并且属性名称外侧用引号括起来。

等于选择器

等于选择器可以选取属性值完全等于指定值的元素，例如选取所有 href 属性值为 https://www.baidu.com 的元素：

$("[href='https://www.baidu.com']")

等于选择器中属性值要用引号括起来。

存在选择器

存在选择器可以选取存在指定属性的所有元素，例如选取所有拥有 href 属性的元素：

$("[href]")

此时方括号中的属性值不需要指定。

开头匹配选择器

开头匹配选择器可以选取属性值以指定值开头的所有元素，例如选取所有 href 属性值以 https 开头的元素：

$("[href^='https']")

开头匹配选择器中使用 ^=，后面跟需要匹配的字符串。

结尾匹配选择器

结尾匹配选择器可以选取属性值以指定值结尾的所有元素，例如选取所有 href 属性值以 .pdf 结尾的元素：

$("[href$='.pdf']")

结尾匹配选择器中使用 $=，后面跟需要匹配的字符串。

示例说明

示例 1

下面的示例展示了如何使用类选择器选中指定的元素：

<!DOCTYPE html>
<html>
<head>
    <title>选择器示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        .test {
            background-color: #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="test">这是一个测试 DIV 元素</div>
    <p class="test">这是一个测试 P 元素</p>
    <span class="test">这是一个测试 SPAN 元素</span>
    <script type="text/javascript">
        // 选取所有 class 为 test 的元素
        var elements = $(".test");
        elements.each(function() {
            console.log($(this).text());
        });
    </script>
</body>
</html>

上面的示例中，使用了类选择器 $(".test") 选取了具有 test 类的所有元素，并且使用 each() 方法遍历 elelments 数组，输出每个元素的文本内容。

示例 2

下面的示例展示了如何使用属性名称选择器选中具有指定属性的元素：

<!DOCTYPE html>
<html>
<head>
    <title>选择器示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div title="这是一个测试 DIV 元素">测试 DIV 元素</div>
    <p title="这是一个测试 P 元素">测试 P 元素</p>
    <span>测试 SPAN 元素</span>
    <script type="text/javascript">
        // 选取所有具有 title 属性的元素
        var elements = $("[title]");
        elements.each(function() {
            console.log($(this).text());
        });
    </script>
</body>
</html>

上面的示例使用了属性名称选择器 $("[title]") 选取了具有 title 属性的所有元素，并且使用 each() 方法遍历 elelments 数组，输出每个元素的文本内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 基础选择器与属性选择器 - Python技术站