首页 > 编程笔记 > JavaScript笔记 > jQuery选择器

jQuery属性选择器详解

属性选择器,指的是通过“元素的属性”来选择元素的一种基础选择器。例如下面这句代码中的 id、type、value 就是 input 元素的属性。
<input id="btn" type="button" value="按钮" />

在  jQuery 中,常见的属性选择器如表1 所示。其中 E 指的是元素,attr 指的是属性,value 指的是属性值。

表 1:jQuery 属性选择器
选择器 说明
E[attr] 选择元素 E,其中 E 元素必须帀有 attr 属性
E[attr = "value"] 选择元素 E,其中 E 元素的 attr 属性取值是“value”
E[attr != "value"] 选择元素 E,其中 E 元素的 attr 属性取值不是“value”
E[attr ^= "value"] 选择元素 E,其中 E 元素的 attr 属性取值是以“value”开头的任何字符
E[attr $="value"] 选择元素 E,其中 E 元素的 attr 属性取值是以“value”结尾的任何字符
Efattr *= "value"] 选择元素 E,其中 E 元素的 attr 属性取值是包含“value”的任何字符
E[attr |= "value"] 选择元素 E,其中 E 元素的 attr「属性取值等于“value”或者以“value”开头
E[attr ~= "value"] 选择元素 E,其中 E 元素的 attr 属性取值等于“value”或者包含“value”

jQuery 的这些属性选择器使得选择器具有通配符的功能,有点正则表达式的感觉。下面我们通过一些简单的实例来认识一下。

1) 选取含有 class 属性的 div 元素。
$("div[class]")

2) 选取 type 取值为 checkbox 的 input 元素。
$("input[type = 'checkbox']")

3) 选取 type 取值不是 checkbox 的 input 元素。
$("input[type != 'checkbox']")

4) 选取 class 属性包含 nav 的 div 元素(class 属性可以包含多个值)。
$("div[class *= 'nav']")

5) 选取 class 属性以 nav 开头的 div 元素,例如 <div class="nav-header"></div>。
$("div[class ^= 'nav']")

6) 选取 class 属性以 nav 结尾的 div 元素,例如 <div class="first-nav"></div>。
$("div[class $= 'nav']")

7) 选取带有 id 属性并且 class 属性是以 nav 开头的 div 元素,例如 <div id="container"class="nav-header"></div>。
$("div[id][class ^='nav']")

举例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("li[class]").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li class="select">CSS</li>
        <li>JavaScript</li>
        <li class="select">jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("li[class]").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li class="select">CSS</li>
        <li>JavaScript</li>
        <li class="select">jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>
程序执行结果如图 1 所示:
属性选择器的效果
图 1:属性选择器的效果

$("li[class]") 表示选取带有 class 属性的 li 元素。在实际开发中,属性选择器还是在表单操作中用得最多,之后我们会慢慢接触。

所有教程

优秀文章