Hi i,m JinXiang
? 前言 ?
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识
🍉欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁
🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言
目录
在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。
基本选择器是一种用于选择DOM元素的简单而基础的方法。在jQuery中，基本选择器用于通过元素的标签名、类名、id等属性来选择DOM元素。
下面是几种常用的基本选择器示例：
在jQuery中，标签选择器是一种基本选择器，用于选择指定标签名的元素。使用标签选择器非常简单，只需要使用标签名作为选择器即可。以下是一些使用标签选择器的代码示例：
选择所有<p>标签，改变文字颜色：
$(document).click(function(){
//设置P标签内文字颜色
$("p").css("color","red");
})设置<dd>标签内容显示、设置<h1>标签字体颜色：
$(document).ready(function(){
$("dt").click(function(){
//设置<dd>标签中的内容显示出来
$("dd").css("display","block");
});
//设置<h1>标签中的字体颜色为蓝色
$("h1").css("color","blue");
})
需要注意的是，标签选择器是对整个页面中的元素进行选择，因此如果页面中存在多个相同标签名的元素，将会选择全部符合条件的元素。如果只需要选择其中的某个元素，可以使用索引选择器或其他组合方式来缩小选择范围?
在jQuery中，类选择器是一种基本选择器，用于选择具有特定类名的元素。使用类选择器非常简单，只需要使用 . 符号后跟类名作为选择器即可。以下是一些使用类选择器的代码示例：
选择具有类名为 "price" 的元素：
$(document).click(function(){
$(".price")
}）选择class为price元素的背景颜色和内边距：
$(document).click(function(){
//设置class为price元素的背景颜色和内边距
$(".price").css({"background":"#efefef","padding":"5px"});
}）需要注意的是，类选择器是对整个页面中的元素进行选择，因此如果页面中存在多个具有相同类名的元素，将会选择全部符合条件的元素。如果只需要选择其中的某个元素，可以使用索引选择器或其他组合方式来缩小选择范围。
在jQuery中，ID选择器是一种基本选择器，用于选择具有特定ID的元素。使用ID选择器非常简单，只需要使用?#?符号后跟ID名作为选择器即可。以下是一些使用ID选择器的代码示例：
选择具有ID为 "price" 的元素：
$(document).click(function(){
$("#price")
})设置ID为author的元素的字体颜色?：
$(document).click(function(){
//设置id为author的元素的字体颜色
$("#author").css("color","#083499");
})
需要注意的是，ID选择器应该是唯一的，即页面中应该只有一个具有相同ID的元素。因为ID应该是唯一的，所以通常来说，使用ID选
并集选择器是一种基本选择器，在jQuery中用于选择多个元素，这些元素可以是满足任意选择器的元素。并集选择器使用逗号?,?将多个选择器组合在一起。以下是一些使用并集选择器的代码示例：
选择所有?div?元素和所有?p?元素：
$(document).click(function(){
$("div, p")
})并集选择器用来合并元素集合：
$(document).click(function(){
//并集选择器用来合并元素集合
$(".intro,dt,dd").css("color","#ff0000");
})需要注意的是，并集选择器可以组合不同类型的选择器（标签选择器、类选择器、ID选择器等），并且多个选择器之间是或的关系，即满足任意一个选择器的元素都会被选中。?
全局选择器是一种基本选择器，在jQuery中用于选择所有元素，全局选择器是一种用于在整个文档中选择元素的选择器，以下是一些使用全局选择器的代码示例：
使用全局选择器?*：选择所有元素
$(document).click(function(){
$("*")
})设置所有元素的字体加粗显示：
$(document).click(function(){
//全局选择器可以获取所有元素
$("*").css("font-weight","bold");
})
需要注意的是，全局选择器会遍历整个文档来匹配元素，所以在使用全局选择器时要尽量限制选择范围，以提高性能和效率。
?这些是基本选择器的一些示例，还有其他的基本选择器可以在jQuery文档中查找。
| 名称 | 语法构成 | 描述 | 示例 |
| 标签选择器 | price | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
| 类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
| 并集选择器 | selector1,selector2, ...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
| 全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
以上就是在jQuery中常用的基本选择器的使用方法。可以根据具体的需求来选择合适的选择器来选取元素。?
在jQuery中，层次选择器是一种用于选择特定元素的选择器。它允许根据元素在HTML文档中的位置和关系来选择元素。在jQuery中，可以使用多种层次选择器，层次选择器通过DOM 元素之间的层次关系来获取元素。
层次选择器是一种用于选择特定元素的选择器。在jQuery中，可以使用多种层次选择器，层次选择器通过DOM 元素之间的层次关系来获取元素。层次选择器在jQuery中的使用方式如下：
$(document).click(function(){
//后代选择器
$("parent descendant").css("color", "red");
})这将选择所有parent元素下的后代元素，并将它们的文字颜色设置为红色。?
$(document).click(function(){
//字选择器
$("parent > child").addClass("highlight");
})这将选择所有parent元素的直接子元素child，并添加highlight类。
$(document).click(function(){
//相邻元素选择器
$("element + sibling").hide();
})这将选择所有element元素之后紧邻的兄弟元素sibling，并隐藏它们。
$(document).click(function(){
//同辈元素选择器
$("element ~ sibling").fadeIn();
})这将选择所有element元素之后的所有兄弟元素sibling，并淡入显示它们。
通过上述方式，你可以根据需要使用不同的层次选择器来选择元素，并进行相应的操作。
| 名称 | 语法构成 | 描述 | 示例 |
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span" )选取#menu下的<span>元素 |
| 子代选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu的子元素<span> |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
以上就是在jQuery中常用的层次选择器的使用方法。可以根据具体的需求来选择合适的选择器来选取元素。??
属性选择器是一种在选择元素时根据其属性值进行匹配的选择器。通过使用属性选择器，可以便捷地选择具有指定属性或属性值的元素。属性选择器通过HTML元素的属性来选择元素。
属性选择器在jQuery中的使用方式如下：
[attribute=value]来选择指定属性值相等的元素。例如：$("[data-type='button']").addClass("highlight");
这将选择所有data-type属性值为button的元素，并添加highlight类。
[attribute!=value]来选择指定属性值不等于的元素。例如：$("[data-type!='button']").hide();
这将选择所有data-type属性值不为button的元素，并隐藏它们。
[attribute]来选择拥有指定属性的元素。例如：$("[required]").addClass("required-field");
这将选择所有拥有required属性的元素，并添加required-field类。
[attribute*=value]来选择指定属性值包含特定字符串的元素。例如：$("[name*=search]").addClass("search-input");
这将选择所有name属性值中包含search字符串的元素，并添加search-input类。
[attribute^=value]来选择指定属性值以特定字符串开头的元素。例如：$("[href^='https://']").addClass("secure-link");
这将选择所有href属性值以https://开头的元素，并添加secure-link类。
[attribute$=value]来选择指定属性值以特定字符串结尾的元素。例如：$("[src$='.png']").addClass("png-image");
这将选择所有src属性值以.png结尾的元素，并添加png-image类。
通过上述方式，你可以根据需要使用不同的属性选择器来选择元素，并进行相应的操作。
| 名称 | 语法构成 | 示例 |
| [attribute] | 选取包含给定属性的元素 | $(" [href]" )选取含有href属性的元素 |
| [attribute=value] | 选取等于给定属性是某个特定值的元素 | $(" [href ='#']" )选取href属性值为“#”的元素 |
| [attribute !=value] | 选取不等于给定属性是某个特定值的元素 | $(" [href !='#']" )选取href属性值不为“#”的元素 |
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中含有txt的元素 |
以上就是在jQuery中常用的属性选择器的使用方法。可以根据具体的需求来选择合适的选择器来选取元素。??
下一篇===》jQuery选择器（二） 过滤选择器及可见性过滤选择器的使用
总结不易，希望宝宝们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ! 如有问题，欢迎评论区批评指正😁