一、基本选择器
1、标签选择器
2、id选择器
3、类选择器
4、并集选择器
二、层级选择器
1、后代选择器
2、子选择器
三、属性选择器
1、属性名称选择器
2、属性选择器
根据正则表达式的使用规则：
3、复合属性选择器
四、过滤选择器
1、首元素选择器
2、尾元素选择器
3、非元素选择器
4、偶数选择器
5、奇数选择器
6、等于索引选择器
7、大于索引选择器
8、小于索引选择器
9、标题选择器
五、表单过滤选择器
1、可用元素选择器
2、不可用元素选择器
3、选中选择器
4、选中选择器（下拉框）
Hello，大家好，我是灰小猿，一个超会写bug的程序猿！
今天来和大家分享一下jQuery的五种选择器的详细使用方法，那么何为选择器？从功能上来讲，它能够筛选具有相似特征的元素标签，在我们想要对具有相似特征的元素进行集中或统一操作时是十分有用的，
选择器基本操作
===========
首先我们需要了解选择器使用的基本操作，该基本操作可以分为三步：
1、事件绑定
选择器的使用需要进行事件的绑定，一般来说我们可以将事件绑定到一个按钮上去，通过按钮的点击来触发相应的事件响应。
2、入口函数
同时在jQuery中，这样的事件绑定是需要写在一个入口函数中去的，在
的代码段中建立入口函数的语法是：$(function(){
});
在这里需要注意的是：在js中定义入口函数的window.onload方法和$(function)方法是有区别的，
具体如下：
window.onload只能定义一次，如果定义多次，后面的会将前面的覆盖掉
$(function)方法是可以定义多次的，后面的不会将前面的覆盖掉
3、样式控制
当我们对选择器的事件进行了绑定之后，我们就可以通过选择器进行相应元素的样式控制了，在这里通常的表现是css方法，通过css方法来对相应的元素样式进行修改。
来看一个基本操作的实例：
那么接下来就通过实例分别来和大家讲一下jQuery框架下的五种选择器的使用方法。
一、基本选择器
===========
1、标签选择器
标签选择器又称为“元素选择器”，
语法：$(“html标签名”)
作用：获得所有匹配标签元素名称的元素
//标签选择器
// 改变元素名为
的所有元素的背景色为 黄色id=“b1”$(“#b1”).click(function f() {
$(“div”).css(“backgroundColor”,“yellow”);
});
2、id选择器
语法：$(“#id的属性值”)
作用：获得与指定id属性值匹配的元素
//id选择器
// 改变 id 为 one 的元素的背景色为 粉色 id=“b2”
$(“#b2”).click(function () {
$(“#one”).css(“backgroundColor”,“pink”);
});
3、类选择器
语法：$(“.class的属性选择器”)
作用：获得与指定class属性值匹配的元素
//类选择器
// 改变 class 为 mini 的所有元素的背景色为 红色id=“b3”
$(“#b3”).click(function () {
$(“.mini”).css(“backgroundColor”,“red”);
});
4、并集选择器
语法：$(“选择器1,选择器2…”)
获取多个选择器选中的所有元素
//并集选择器
// 改变所有的元素和 id 为 two 的元素的背景色为蓝色id=“b4”
$(“#b4”).click(function () {
$(“span,#two”).css(“backgroundColor”,“blue”);
});
二、层级选择器
===========
1、后代选择器
语法：$(“A B”)
作用：选择A元素内部的所有B元素
//后代选择器
// 改变 内所有
的背景色为红色id=“b1”$(“#b1”).click(function () {
$(“body div”).css(“backgroundColor”,“pink”);
});
2、子选择器
语法：$(“A > B”)
作用：选择A元素内部的所有B子元素
// 子选择器
// 改变 内子
的背景色为 红色id=“b2”$(“#b2”).click(function () {
$(“body > div”).css(“backgroundColor”,“red”);
});
**在这里需要注意的是：**这两个选择器看上去似乎没有什么区别，但是我们在使用时就会发现其实是有区别的，**后代选择器会将元素A内部的所有B元素都选中，****而子选择器只会选中元素A的下一级元素中的B元素，范围是小于后代选择器的。**具体可以看下面的实例：
有一种奇迹叫坚持
自信源于努力
id为one
id为two class是 mini
class是 miniclass是 one
class是 mini class是 miniclass是 one
class是 mini01 class是 minispan
三、属性选择器
===========
1、属性名称选择器
语法：$(“A[属性名]”)
作用：包含指定属性的选择器
// 含有属性title 的div元素背景色为红色" id=“b1”
$(“#b1”).click(function () {
$(“div[title]”).css(“backgroundColor”,“pink”);
});
2、属性选择器
语法：$(“A[属性名=’值’]”)
作用：包含指定属性等于指定值的选择器，
// 属性title值等于test的div元素背景色为红色" id=“b2”
$(“#b2”).click(function () {
$(“div[title=‘test’]”).css(“backgroundColor”,“red”);
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
文末
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频**
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-GOxfZBy3-1710705604996)]
文末
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
