共计 4374 个字符，预计需要花费 11 分钟才能阅读完成。
先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里 P7
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024 年最新 Web 前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，涵盖了 95% 以上前端开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
如果你需要这些资料，可以添加 V 获取：vip1024c（备注前端）
正文
前言
一、jQuery 选择器是什么
二、基本选择器
- 2.1 `ID Selector (“#id”)` 选择一个具有给定 id 属性的单个元素
2.2 `Class Selector (“.class”)` 选择给定样式类名的所有元素
2.3 `Element Selector (“element”)` 根据给定（html）标记名称选择所有的元素
2.4 `All Selector (“*”)` 选择所有元素
2.5 `Multiple Selector (“selector1, selector2, selectorN”)` 将每一个选择器匹配到的元素合并后一起返回
三、层次选择器
- 3.1 Descendant Selector `(“ancestor descendant”)`
3.2 Child Selector` (“parent> child”)`
3.3 Next Adjacent Selector `(“prev + next”)`
3.4 Next Siblings Selector (“prev ~ siblings”)
四、表单选择器
五、过滤选择器
- 5.1 基本过滤选择器
5.3 可见性过滤选择器
5.4 属性过滤选择器
5.5 子元素过滤选择器
5.6 表单对象属性过滤选择器
总结
前言
=====================================================================
本文讲解 jQuery 选择器的使用。
一、jQuery 选择器是什么
==================================================================================
jQuery 中 的选择器完全继承了 CSS 的风格，通过使用 jQuery 选择器，我们可以快速的找到目标 DOM 元素，然后对它们进行一系列操作，学会使用选择器是学习 jQuery 的基础，jQuery 的行为规则都必须在获取到元素后才能生效。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等 ” 查找 ”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
jQuery 选择器的写法和 CSS 选择器的写法十分相似，只不过两者的作用效果不同，CSS 选择器找到元素后是添加样式，而 jQuery 选择器找到元素后是添加行为，jQuery 中涉及操作 CSS 样式的部分比单纯的 CSS 功能更为强大，并且拥有跨浏览器的兼容性。
jQuery 选择器的优势
简洁的写法。
支持 CSS1 到 CSS3 选择器。兼容性良好，可以直接使用而无需考虑浏览器的兼容性。
完善的处理机制。使用 jQuery 选择器不仅比使用传统的 DOM 对象方法简洁得多，而且还能避免某些错误，比如：
橘猫
运行后是会报错的，这是因为网页中并没有 id 名为“xnm”的元素，报错如下所示：
改进一下后的代码如下：
橘猫
这样就不会报错了，但是如果要操作的元素很多，对每个元素都进行一次判断，显然是不合理的，不判断的话，以后因为某种原因删除了网页上某个以前使用的元素，再来改也会很麻烦，而使用 jQuery 选择器的话，则不用担心这个问题：
橘猫
另外需要特别注意的是，$('#xnm') 获取的永远是对象，即使网页上没有此元素，因为当要用 jQuery 来检查某个元素再网页上是否存在时，不能使用下面的代码：
if ($(“#xnm”)) {
}
而应该根据获取到元素的长度来判断，代码如下所示：
if ($(“#xnm”).length > 0) {
}
或者转化成 DOM 对象来判断，代码如下：
if ($(“#xnm”)[0]) {
}
二、基本选择器
==========================================================================
基本选择器是 jQuery 中最常用的选择器，也是最简单的选择器，它通过元素 id、class 和 标签名等来查找 DOM 元素。
2.1 ID Selector ("#id") 选择一个具有给定 id 属性的单个元素
对于 ID 选择，jQuery 使用 JavaScript 函数
document.getElementById()，这是非常有效的。当另一个选择是附加到 ID 选择器，比如 h2#pageTitle，在确定作为匹配的元素前，jQuery 执行一个额外的检查。调用 jQuery() (或 $()) 带上一个选择器作为它的参数，将返回一个 jQuery 对象包含零个或一个 DOM 元素的集合。
每个 id 值在一个文件中只能使用一次。如果多个元素分配了相同的 ID，将只匹配该 ID 选择集合的第一个 DOM 元素。但这种行为不应该发生; 有超过一个元素的文件使用相同的 ID 是无效的。
如果 ID 包含点号或冒号，你必须将 这些字符用反斜杠转义。
例子：
选择 id 为 demo 的元素，并为此元素设置长、宽、背景色。
运行效果为：
2.2 Class Selector (".class") 选择给定样式类名的所有元素
- 对于类选择器，如果浏览器支持，jQuery 使用 JavaScript 的原生
getElementsByClassName()函数来实现。
例子：
选择 class 为 demo 的元素，并为此元素设置长、宽、背景色。
运行效果同上。
2.3 Element Selector ("element") 根据给定（html）标记名称选择所有的元素
- 调用 JavaScript 的
getElementsByTagName()函数，当该表达式使用时返回相应的元素。
例子：
选择所有 div 元素, 并为所有元素设置长、宽、背景色。
小丫么小牛马
橘猫烧鲷鱼
运行效果为：
2.4 All Selector ("*") 选择所有元素
- 选择页面所有元素，包括 body。
小丫么小牛马
橘猫烧鲷鱼
运行效果为：
警告：除非被它自己使用，否则 * 选择器或通用选择器，其速度是极其慢的。
2.5 Multiple Selector ("selector1, selector2, selectorN") 将每一个选择器匹配到的元素合并后一起返回
- 可以指定任何数量的选择器组合成一个单一的结果。这个多个表达组合是一种有效的方法来选择不同的元素。因为他们将按在文件的顺序，DOM 元素的顺序在返回的 jQuery 象中可能不相同。另一种选择器组合是 .add() 方法。
例子：
用“,”分隔开然后再拼成一个选择器字符串，同时选择多个匹配的选择器的内容 选择页面所有元素，并设置字体大小。
橘猫烧鲷鱼
https://blog.csdn.net/weixin_44009656
运行效果为：
三、层次选择器
===========================================================================
如果想通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么我们可以使用 jQuery 层次选择器。
3.1 Descendant Selector ("ancestor descendant")
选中给定的祖先元素的 ancestor 中的所有 descendant 元素（后代元素）。一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。
例子：
选择类名为 demo 的元素的所有后代 a 元素，并设置字体大小。
橘猫烧鲷鱼
小丫么小牛马
运行效果为：
3.2 Child Selector ("parent> child")
选择所有指定“parent”元素中指定的 ”child” 的直接子元素。
作为一个 CSS 选择器，这个子元素组合器被 Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7 及以上版本等现代浏览器支持，但尤其不被 Internet Explorer6 及以下版本支持。然而在 jQuery 中，这个选择器（与其他所有选择器）能在所有支持的浏览器中工作，包括 IE6。
这个子元素组合器 (E> F) 和(E F)都作为后代组合，但是他们有所不同，更具体的是 (E> F) 它只会选择第一级的后代。
注：选择的是子元素，注意跟后代元素的区别。
例子：
选择类名为 demo 的子元素 a，并设置字体大小。（此时只有第一个 a 元素的字体会改变）
橘猫烧鲷鱼
橘猫烧鲷鱼
运行效果为：
3.3 Next Adjacent Selector ("prev + next")
prev 和 next 是两个同级别的元素，选中在 prev 元素后面的 next 元素。
例子：
选中 class 为 demo 后面的 a 元素，并设置字体大小。
橘猫烧鲷鱼
橘猫烧鲷鱼
运行效果为：
3.4 Next Siblings Selector (“prev ~ siblings”)
匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
prev + next 和 prev ~ siblings 之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。
例子：
选中 class 为 demo 的 div 元素后面的所有 a 同辈元素，并设置字体大小。
demo
橘猫烧鲷鱼
橘猫烧鲷鱼
在层次选择器中，第 1 个和第 2 个选择器比较常用，而后面两个因为在 jQuery 里面可以用更加简单的方法来代替，所以使用的几率相对会少些：
可以使用
next()方法来代替$('prev+next')选择器。比如$(".one + div);和$(".one").next("div");是等价的。可以使用
nextAll()方法来代替$ ('prevsiblings')选择器。比如$("#prevdiv");和$("#prev").nextAll("div");是等价的。
简单提一下后面要讲解的 siblings() 方法，$("#prev~div"); 选择器只能选择“prev”元素后面的同辈 div 元素，而 siblings() 方法与前后位置无关，只要是同辈节点都能匹配。
原文地址: 二、jQuery 选择器（超细），2024 年最新四年 Web 前端面试遇到的问题整理
