当前位置 博文首页 > 向往的那片海洋：jQuery 选择器（二）
jQuery 的内容过滤选择器具有以下几种：
| 选择器 | 描述 |
|---|---|
:contains() 过滤选择器 | 匹配包含给定文本的元素 |
:empty 过滤选择器 | 匹配所有不包含子元素或者文本的空元素 |
parent 过滤选择器 | 匹配含有子元素或者文本的元素 |
has() 过滤选择器 | 匹配含有选择器所匹配的元素的元素 |
用法示例：
body 部分
<body>
<div>这是一块测试 div </div>
<div></div>
<div>
<div id="child"></div>
</div>
</body>
JavaScript 部分
<script>
// 匹配包含给定文本的元素
console.log($('div:contains("di")'));
// 匹配所有不包含子元素或者文本的空元素
console.log($('div:empty'));
// 匹配含有子元素或者文本的元素
console.log($('div:parent'));
</script>
上述代码效果如下图所示：
:has() 表示包含匹配指定选择器元素的父级元素
console.log($('div:has("#child")')[0]);
jQuery 的可见性过滤选择器具有以下几种：
| 选择器 | 描述 |
|---|---|
:hidden 过滤选择器 | 匹配所有不可见元素,或者 type 为 hidden 的元素 |
:visible 过滤选择器 | 匹配所有的可见元素 |
body 部分
<body>
<div id="d1">启嘉网</div>
<div id="d2">学编程，就是好</div>
<input type="hidden" value="用户名">
</body>
:hidden 选择器
console.log($(':hidden'));
:visible 选择器
console.log($(':visible'));
jQuery 的属性过滤选择器具有以下几种：
| 选择器 | 描述 |
|---|---|
[attr] 过滤选择器 | 匹配包含给定属性的元素 |
[attr=value] 过滤选择器 | 匹配给定的元素是某个特定值的元素 |
[attr!=value] 过滤选择器 | 匹配所有不含有指定的元素,或者属性不等于特定值的元素 |
[attr^=value] 过滤选择器 | 匹配给定的属性是以某些值开始的元素 |
[attr$=value] 过滤选择器 | 匹配给定的属性是以某些值结尾的元素 |
[attr*=value] 过滤选择器 | 匹配给定的属性是以包含某些值的元素 |
| 组合属性过滤选择器 | 匹配元素需要同时满足多个属性过滤选择器 |
用法示例：
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
console.log($('div[name]'));
console.log($('div[class=mydiv]'));
console.log($('div[class!=mydiv]'));
console.log($('div[class^=my]'));
console.log($('div[name=d1][class^=my]'));
[attr!=value] 选择器 - 包含没有 attr 属性的元素上述代码运行效果如下图所示：
jQuery 的子元素过滤选择器具有以下几种：
| 选择器 | 描述 |
|---|---|
:nth-child() 过滤选择器 | 匹配其父元素下的第 N 个子或奇偶元素 |
:first-child 过滤选择器 | 匹配第一个子元素 |
last-child 过滤选择器 | 匹配最后一个子元素 |
only-child 过滤选择器 | 如果某个元素是父元素中唯一的子元素,那么将会被匹配 |
用法示例：
body 部分
<body>
<div id="parent">
<div id="d1">这是 id 为 d1 的 div 元素</div>
<div id="d2">这是 id 为 d2 的 div 元素</div>
<div id="d3">这是 id 为 d3 的 div 元素
<div id="child"></div>
</div>
</div>
</body>
JavaScript 部分
console.log($('div:first-child'));
console.log($('div:last-child'));
console.log($('div:only-child'));
:nth-child(index) 过滤选择器，用于匹配当前元素作为第 index 个子元素，但是 index 是从 1 开始，表示第几个
console.log($('div:nth-child(1)'));
jQuery 的表单对象属性过滤选择器具有以下几种：
| 选择器 | 描述 |
|---|---|
:enabled 过滤选择器 | 匹配所有可用元素 |
:disabled 过滤选择器 | 匹配所有不可用元素 |
:checked 过滤选择器 | 匹配所有选中的被选中元素（复选框、单选框等） |
selected 过滤选择器 | 匹配所有选择的 <option> 元素 |
用法示例：
console.log($('input:disabled'));
console.log($('input:checked'));
console.log($('option:selected'));
上述代码效果如下图所示：
jQuery 的表单选择器具有以下几种：
| 选择器 | 描述 |
|---|---|
:input 选择器 | 匹配所有 input、textarea、select 和 button 元素 |
:text 选择器 | 匹配所有的单行文本框 |
:password 选择器 | 匹配所有密码框 |
:radio 选择器 | 匹配所有单选按钮 |
:checkbox 选择器 | 匹配所有复选框 |
:sumit 选择器 | 匹配所有提交按钮 |
:reset 选择器 | 匹配所有重置按钮 |
:button 选择器 | 匹配所有按钮 |
:file 选择器 | 匹配所有文件域 |
:image 选择器 | 匹配图像域 |
用法同上述选择器类似
cs