jQuery 选择器（二）

最新推荐文章于 2024-05-24 00:34:26 发布

时间线原理

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量862

点赞数 2

分类专栏： jQuery 文章标签： jquery javascript css js

本文链接：https://blog.csdn.net/weixin_46229298/article/details/109499394

版权

jQuery 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

内容过滤选择器

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 页面中和元素

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` 选择器	匹配图像域

用法同上述选择器类似

时间线原理

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 选择器（二）

内容过滤选择器jQuery 的内容过滤选择器具有以下几种：选择器描述:contains() 过滤选择器匹配包含给定文本的元素:empty 过滤选择器匹配所有不包含子元素或者文本的空元素parent 过滤选择器匹配含有子元素或者文本的元素has() 过滤选择器匹配含有选择器所匹配的元素的元素用法示例：body 部分<body> <div>这是一块测试 div </div> <div>&l
复制链接

扫一扫

专栏目录