本章将介绍 jQuery 选择器中的属性选择器。
用于选取拥有指定属性的元素（无论该属性的值是什么）。例如 [href] 会选中所有带有 href属性的元素，包括 <a href="#">、<link href="style.css">等。例如：
<form lang="zh-CN">
<p class="username">
<label>姓名：</label>
<input id="myName" type="text" name="name" placeholder="你的姓名" />
</p>
<fieldset class="interest_fieldset">
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" name="interest" /> <label>运动</label>
<input type="checkbox" title="看书" name="interest" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" name="interest" /> <label>旅行</label>
</fieldset>
</form>运行代码，将选择如下元素：
<p class="username"></p>用于选取指定属性的值完全等于 value 的元素。例如 [type="text"] 会精准选中 <input type="text">，但不会匹配 <input type="password">或 <input type="textbox">。例如：
<form lang="zh-CN">
<p>我的特长：</p>
<ul class="my_ul my_strong_point">
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>
<p>我的缺点：</p>
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>
</form>运行代码，将选择如下元素：
<ul class="my_ul"></ul>用于选取不包含指定属性，或属性值不等于 value 的元素。例如 [class!=active] 会选中没有 class 属性的元素，以及 class 属性值不是 active 的元素。例如：
<form lang="zh-CN">
<p>我的特长：</p>
<ul class="my_ul my_strong_point">
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>
<p>我的缺点：</p>
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>
</form>运行$代码，将选择如下元素：
<ul class="my_ul my_strong_point"></ul>用于选取指定属性的值以 value 开头的元素（匹配开头字符）。例如 [href^="https://"] 会选中所有 href 属性以 https:// 开头的链接，如 <a href="https://baidu.com">。例如：
<form lang="zh-CN">
<p>我的特长：</p>
<ul class="my_ul my_strong_point">
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>
<p>我的缺点：</p>
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>
</form>运行$代码，将选择如下元素：
<ul class="my_ul my_strong_point"></ul>
<ul class="my_ul"></ul>用于选取指定属性的值以结尾的元素（匹配结尾字符）。例如 img[src$=".jpg"] 会选中所有 src 属性以 .jpg 结尾的元素，如 <img src="photo.jpg">。例如：
<form lang="zh-CN">
<p>我的特长：</p>
<ul class="my_ul my_strong_point">
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>
<p>我的缺点：</p>
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>
</form>运行$代码，将选择如下元素：
<ul class="my_ul"></ul>用于选取指定属性的值包含 value 这个子串的元素（匹配任意位置的字符）。例如 [class*="btn"] 会选中 class="btn"、class="btn-primary"、class="my-btn" 等所有 class 中包含 btn 的元素。例如：
<form lang="zh-CN">
<p>我的特长：</p>
<ul class="my_ul my_strong_point">
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>
<p>我的缺点：</p>
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>
</form>运行$代码，将选择如下元素：
<ul class="my_ul my_strong_point"></ul>用于多个属性组合筛选，同时满足多个属性选择器条件的元素才会被选中（逻辑“与”关系）。例如 [type="checkbox"][checked] 会选中同时带有 type="checkbox" 且拥有 checked 属性的复选框元素。例如：
<form lang="zh-CN">
<p class="username">
<label>姓名：</label>
<input id="myName" type="text" name="name" placeholder="你的姓名" />
</p>
<fieldset class="interest_fieldset">
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" name="interest" /> <label>运动</label>
<input type="checkbox" title="看书" name="interest" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" name="interest" /> <label>旅行</label>
</fieldset>
</form>运行$代码，将选择如下元素：
<input type="checkbox" title="运动" name="interest" />
<input type="checkbox" title="看书" name="interest" checked="checked" />
<input type="checkbox" title="旅行" name="interest" />下面通过一个示例演示各个选择器的含义，通过为选中的元素添加样式，直观查看个基本选择器的效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程：选择器</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
div { margin:20px; }
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
sup {color: red; font-size: 12px; background: transparent !important;}
ul li { margin: 3px 0;}
h3 { font-size: 18px; }
/* 效果样式 */
.myClass {
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<div class="app">
<h3>属性筛选器</h3>
<form lang="zh-CN">
<p class="username">
<label>姓名：</label>
<input id="myName" type="text" name="name" placeholder="你的姓名" />
</p>
<fieldset class="interest_fieldset">
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" name="interest" /> <label>运动</label>
<input type="checkbox" title="看书" name="interest" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" name="interest" /> <label>旅行</label>
</fieldset>
<p>我的特长：</p>
<ul class="my_ul my_strong_point">
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>
<p>我的缺点：</p>
<ul class="my_ul">
<li>喜欢熬夜</li>
</ul>
</form>
</div>
<div>
<!-- [attribute] 匹配包含给定属性的元素。
注意：在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。 $("div[id]") -->
<button type="button" onclick="
reset();
$('p[class]').addClass('myClass');
">p[class]</button>
<!-- [attribute=value] 匹配给定的属性是某个特定值的元素，$("input[name='newsletter']").attr("checked", true); -->
<button type="button" onclick="
reset();
// 匹配 class 等于 my_ul 的 ul 元素
$('ul[class=\'my_ul\']').addClass('myClass');
">ul[class='my_ul']</button>
<!-- [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
此选择器等价于 :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$("input[name!='newsletter']").attr("checked", true); -->
<button type="button" onclick="
reset();
// 匹配 class 不等于 my_ul 的 ul 元素
$('ul[class!=\'my_ul\']').addClass('myClass');
">ul[class!='my_ul']</button>
<!-- [attribute^=value] 匹配给定的属性是以某些值开始的元素，$("input[name^='news']") -->
<button type="button" onclick="
reset();
// 匹配 class 以于 my_ 开头的 ul 元素
$('ul[class^=\'my_\']').addClass('myClass');
">ul[class^='my_']</button>
<!-- [attribute$=value] 匹配给定的属性是以某些值结尾的元素，$("input[name$='letter']") -->
<button type="button" onclick="
reset();
// 匹配 class 以于 _ul 结尾的 ul 元素
$('ul[class$=\'_ul\']').addClass('myClass');
">ul[class$='_ul']</button>
<!-- [attribute*=value] 匹配给定的属性是以包含某些值的元素，$("input[name*='man']") -->
<button type="button" onclick="
reset();
// 匹配 class 包含 strong 的元素
$('[class*=\'strong\']').addClass('myClass');
">[class*='strong']</button>
<!-- [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。
$("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 -->
<button type="button" onclick="
reset();
// 匹配type属性等于checkbox，并且name属性等于interest的input元素
$('input[type=\'checkbox\'][name=\'interest\']').addClass('myClass');
">input[type='checkbox'][name='interest']</button>
</div>
<script>
function reset() {
$('*').removeClass('myClass');
}
</script>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098