属性选择器，指的是通过“元素的属性”来选择元素的一种基础选择器。例如下面这句代码中的 id、type、value 就是 input 元素的属性。
图 1：属性选择器的效果
<input id="btn" type="button" value="按钮" />
在 jQuery 中，常见的属性选择器如表1 所示。其中 E 指的是元素，attr 指的是属性，value 指的是属性值。
| 选择器 | 说明 |
|---|---|
| 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 元素。在实际开发中，属性选择器还是在表单操作中用得最多，之后我们会慢慢接触。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/23784.html