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 元素。在实际开发中，属性选择器还是在表单操作中用得最多，之后我们会慢慢接触。

jQuery属性选择器详解

所有教程

优秀文章