内容过滤选择器
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
选择器- 不能匹配 CSS 样式元素 visibility 设置为 hidden 的隐藏元素
- 还能匹配 HTML 页面中不做任何显示效果的元素
- 用法 - 尽量确定元素类型或指定范围
console.log($(':hidden'));
:visible
选择器- 匹配 CSS 样式属性 visibility 设置为 hidden 的隐藏元素
- 当 visibility 设置为 hidden 时的元素,依旧占有页面空间
- 还能匹配 HTML 页面中 和 元素
- 匹配 CSS 样式属性 visibility 设置为 hidden 的隐藏元素
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 选择器 | 匹配图像域 |
用法同上述选择器类似