jQuery 选择器（一）

最新推荐文章于 2024-04-17 09:18:10 发布

时间线原理

最新推荐文章于 2024-04-17 09:18:10 发布

阅读量332

点赞数

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

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

版权

jQuery 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

jQuery 选择器

jQuery 选择器允许对 HTML 元素组成单个元素进行操作。

jQuery 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

jQuery 中的选择器用于定位页面元素，源于 CSS 选择器，但比 CSS 选择求更强大。

jQuery 中的选择器使用工厂函数作为容器，语法结构如下：

var element = $(selector);

selector：作为参数，表示 jQuery 的选择器。
返回值：jQuery 的工厂函数会返回一个 jQuery 对象。

$('#one').css("background","#bfa");

选择器的分类

jQuery 的选择器共 10 种，其中有一种是第三版新增的，按照分类方法的不同类别不同。

jQuery 选择器的分类：

基本选择器
- ID 选择器
- 元素选择器
- 类选择器
- 通配符选择器
- 组合选择器
层级选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 普通兄弟选择器
基本过滤选择器
- :frist过滤选择器
- :last过滤选择器
- :even过滤选择器
- :odd过滤选择器
- :eq()过滤选择器
- :gt()过滤选择器
- :lt()过滤选择器
- :not()过滤选择器
- :header过滤选择器
- animated过滤选择器
- :not(selector)过滤选择器
内容过滤选择器
- :contains() 过滤选择器
- :empty 过滤选择器
- parent 过滤选择器
- has() 过滤选择器
可见性过滤选择器
- :hidden 过滤选择器
- :visible 过滤选择器
属性过滤选择器
- [attr] 过滤选择器
- [attr=value] 过滤选择器
- [attr!=value] 过滤选择器
- [attr^=value] 过滤选择器
- [attr$=value] 过滤选择器
- [attr*=value] 过滤选择器
- 组合属性过滤选择器
子元素过滤选择器
- :nth-child 过滤选择器
- :first-child() 过滤选择器
- last-child 过滤选择器
- only-child 过滤选择器
表单过滤选择器
- :enabled 过滤选择器
- :disabled 过滤选择器
- :checked 过滤选择器
- selected 过滤选择器
表单对象属性过滤选择器
混淆选择器（第三版新增）

基本选择器

jQuery 的基本选择器以下几种：

选择器	描述
ID 选择器	根据给定的 ID 匹配一个元素
元素选择器	根据给定的元素名称匹配元素
类选择器	根据给定的 css 类名匹配元素
通配符选择器	匹配所有元素
组合选择器	将每一个选择器匹配到的元素合并后一起返回

说明：由于 jQuery 对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。

用法示例：

<body>
      <div id="d1">一块测试的 div</div>
      <div id="d2" class="cls">另一块测试的 div</div>
</body>
<script>
      // ID 选择器
      console.log($('#d1'));
      console.log("这是一个 ID 选择器")
      // 元素选择器
      console.log($('div'));
      console.log("这是一个元素选择器")
      // 类选择器
      console.log($('.cls'));
      console.log("这是一个类选择器")
      // 通配符选择器（匹配所有）
      console.log($('*'));
      console.log("这是一个通配符选择器")
      /*
          组合选择器
          * 并集：多个选择器之间使用逗号分隔
          * 交集：多个选择器之间没有逗号分隔
      */
      console.log($('#d1,.cls'));
      console.log($('#d2.cls'));
      console.log("这是一个组合选择器")
</script>

上述代码效果如下图所示：

[](https://gitee.com/project_almanac/change/raw/master/jQuery/CPIq)

层级选择器

jQuery 的层级选择器以下几种：

选择器	描述
后代选择器	根据给定的祖先元素下匹配所有的后代元素
子选择器	根据给定的父元素下匹配所有的子元素
相邻兄弟选择器	根据给定的目标元素匹配下一个相邻兄弟元素
普通兄弟选择器	根据给定的目标元素匹配后面兄弟元素

用法示例：

<body>
    <div id="parent">
        <div id="child1">
            <div id="d6"></div>
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
            <div id="d4"></div>
            <div id="d5"></div>
        </div>
        <div id="child2">
            <div id="d3"></div>
        </div>
    </div>
</body>
<script>
    // 后代选择器
    console.log($('#parent div'));
    console.log("这是一个后代选择器");
    // 子选择器
    console.log($('#parent>div'));
    console.log("这是一个子选择器");
    // 相邻兄弟选择器（给定目标元素的下一个相邻兄弟元素）
    console.log($('#d1+div'));
    console.log("这是一个相邻兄弟选择器");
    // 普通兄弟选择器（给定元素后面的兄弟）
    console.log($('d1~div'));
    console.log('这是一个普通兄弟选择器');
    // siblings() 方法 - 获取指定元素的兄弟元素（前面+后面）
    console.log($('#d1').siblings('div'));
</script>

上述代码效果如下图所示：

[](https://gitee.com/project_almanac/change/raw/master/jQuery/h72OCRTpTZqB.png)

层次选择器中的普通兄弟选择器有个 siblings() 方法能实现类似的功能。

// siblings() 方法 - 获取指定元素的兄弟元素
console.log($('#d1').siblings('div'));

普通兄弟选择器与 siblings() 方法的区别在于，普通兄弟选择器只能获取给定元素后面的兄弟元素，而 siblings() 方法可以获取所有兄弟元素。

基本过滤选择器

jQuery 的基本过滤选择器有以下几种：

选择器	描述
`:frist`过滤选择器	获取第一个元素
`:last`过滤选择器	获取最后一个元素
`:even`过滤选择器	匹配所有索引值为偶数的元素，从 0 开始计数
`:odd`过滤选择器	匹配所有索引值为奇数的元素，从 0 开始计数
`:eq()`过滤选择器	匹配一个给定索引值的元素（等于）
`:gt()`过滤选择器	匹配所有大于给定索引值的元素
`:lt()`过滤选择器	匹配所有小于给定索引值的元素
`:not()`过滤选择器	去除所有与给定选择器匹配的元素
`:header`过滤选择器	匹配如 h1，h2，h3 之类的标题元素
`animated`过滤选择器	匹配所有正在执行动画效果的元素

用法示例：

body 部分：

<body>
    <div>启嘉网</div>
    <div id="d2">
        <div id="child"></div>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div>前端开发</div>
    <div id="animated"></div>
</body>

:frist 过滤选择器和 :last 过滤选择器：

获取第一个元素、获取最后一个元素
在指定范围内匹配元素中进行筛选，它们本身没有层次结构，取决于范围。

console.log($('div:first'));
console.log($('div:last'));

:even过滤选择器和:odd过滤选择器：

匹配所有值为偶数或奇数的元素，从 0 开始
索引值为偶数时 -> 奇数元素；索引值为奇数时 -> 偶数元素

console.log($('div:even'));
console.log($('div:odd'));

:eq() 过滤选择器、:gt() 过滤选择器和 :lt()过滤选择器：

匹配给定索引值等于大于或小于的元素
:eq(index)：index 表示索引值

console.log($('div:eq(0)'));  // 等于
console.log($('div:gt(2)'));  // 大于
console.log($('div:lt(2)'));  // 小于

:header过滤选择器：匹配 h1~h6 元素

console.log($(':header'));

:animated过滤选择器：匹配所有正在执行动画效果的元素（只能匹配 jQuery 实现的动画）

console.log($(':animated')); 

function animated(){
    $('#animated').slideToggle(animated);
}
animated();

:not()过滤选择器：去除所有与给定选择器匹配的元素

console.log($('div:not("#child")'));

时间线原理

关注

0
点赞
踩
2

收藏

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

jQuery 选择器jQuery 选择器允许对 HTML 元素组成单个元素进行操作。jQuery 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器jQuery 中的选择器用于定位页面元素，源于 CSS 选择器，但比 CSS 选择求更强大。jQuery 中的选择器使用工厂函数作为容器，语法结构如下：var element = $(selector);selector：作为参数，表示 jQuery 的选择器。返回值：jQue
复制链接

扫一扫