jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用

您所在的位置：网站首页 › 下列哪项是jquery中的表单选择器 › jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用

jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用

2024-03-14 12:37| 来源: 网络整理| 查看: 265

Hi i,m JinXiang

⭐ 前言 ⭐

本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识

🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

一、基本选择器

什么是基本选择器？

使用基本选择器

1、标签选择器：标签选择器根据给定的标签名匹配元素

2、类选择器、类选择器根据给定的class匹配元素

3、ID选择器、ID选择器根据给定的id匹配元素

4、并集选择器、并集选择器用来合并元素集合

5、全局选择器、全局选择器可以获取所有元素

⭐ 总结基本选择器的使用

二、层次选择器

什么是层次选择器？

使用层次选择器

1、后代选择器

2、子选择器

3、相邻元素选择器

4、同辈元素选择器

⭐ 总结层次选择器的使用

三、属性选择器

什么是属性选择器？

使用属性选择器

1、等于选择器

2、不等于选择器）

3、存在选择器

4、包含*选择器

5、以^开头选择器

6、以$结尾选择器

⭐ 总结属性选择器的使用

一、基本选择器什么是基本选择器？

在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。

使用基本选择器

基本选择器是一种用于选择DOM元素的简单而基础的方法。在jQuery中，基本选择器用于通过元素的标签名、类名、id等属性来选择DOM元素。

下面是几种常用的基本选择器示例：

1、标签选择器：标签选择器根据给定的标签名匹配元素

在jQuery中，标签选择器是一种基本选择器，用于选择指定标签名的元素。使用标签选择器非常简单，只需要使用标签名作为选择器即可。以下是一些使用标签选择器的代码示例：

选择所有

标签，改变文字颜色：

$(document).click(function(){ //设置P标签内文字颜色 $("p").css("color","red"); })

设置标签内容显示、设置标签字体颜色：

$(document).ready(function(){ $("dt").click(function(){ //设置标签中的内容显示出来 $("dd").css("display","block"); }); //设置标签中的字体颜色为蓝色 $("h1").css("color","blue"); })

需要注意的是，标签选择器是对整个页面中的元素进行选择，因此如果页面中存在多个相同标签名的元素，将会选择全部符合条件的元素。如果只需要选择其中的某个元素，可以使用索引选择器或其他组合方式来缩小选择范围

2、类选择器、类选择器根据给定的class匹配元素

在jQuery中，类选择器是一种基本选择器，用于选择具有特定类名的元素。使用类选择器非常简单，只需要使用 . 符号后跟类名作为选择器即可。以下是一些使用类选择器的代码示例：

选择具有类名为 "price" 的元素：

$(document).click(function(){ $(".price") }）

选择class为price元素的背景颜色和内边距：

$(document).click(function(){ //设置class为price元素的背景颜色和内边距 $(".price").css({"background":"#efefef","padding":"5px"}); }）

需要注意的是，类选择器是对整个页面中的元素进行选择，因此如果页面中存在多个具有相同类名的元素，将会选择全部符合条件的元素。如果只需要选择其中的某个元素，可以使用索引选择器或其他组合方式来缩小选择范围。

3、ID选择器、ID选择器根据给定的id匹配元素

在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选

4、并集选择器、并集选择器用来合并元素集合

并集选择器是一种基本选择器，在jQuery中用于选择多个元素，这些元素可以是满足任意选择器的元素。并集选择器使用逗号 , 将多个选择器组合在一起。以下是一些使用并集选择器的代码示例：

选择所有 div 元素和所有 p 元素：

$(document).click(function(){ $("div, p") })

并集选择器用来合并元素集合：

$(document).click(function(){ //并集选择器用来合并元素集合 $(".intro,dt,dd").css("color","#ff0000"); })

需要注意的是，并集选择器可以组合不同类型的选择器（标签选择器、类选择器、ID选择器等），并且多个选择器之间是或的关系，即满足任意一个选择器的元素都会被选中。

5、全局选择器、全局选择器可以获取所有元素

全局选择器是一种基本选择器，在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中的使用方式如下：

1、后代选择器：使用空格来选择指定元素的后代元素。例如： $(document).click(function(){ //后代选择器 $("parent descendant").css("color", "red"); })

这将选择所有parent元素下的后代元素，并将它们的文字颜色设置为红色。

2、子选择器：使用大于号(>)来选择指定元素的直接子元素。例如： $(document).click(function(){ //字选择器 $("parent > child").addClass("highlight"); })

这将选择所有parent元素的直接子元素child，并添加highlight类。

3、相邻元素选择器：使用加号(+)来选择指定元素之后紧邻的兄弟元素。例如： $(document).click(function(){ //相邻元素选择器 $("element + sibling").hide(); })

这将选择所有element元素之后紧邻的兄弟元素sibling，并隐藏它们。

4、同辈元素选择器：使用波浪号(~)来选择指定元素之后的所有同辈元素。例如： $(document).click(function(){ //同辈元素选择器 $("element ~ sibling").fadeIn(); })

这将选择所有element元素之后的所有兄弟元素sibling，并淡入显示它们。

通过上述方式，你可以根据需要使用不同的层次选择器来选择元素，并进行相应的操作。

⭐ 总结层次选择器的使用名称语法构成描述示例后代选择器ancestor descendant选取ancestor元素里的所有descendant（后代）元素$("#menu span" )选取#menu下的元素子代选择器parent>child选取parent元素下的child（子）元素$(" #menu>span" )选取#menu的子元素相邻元素选择器prev+next选取紧邻prev元素之后的next元素$(" h2+dl " )选取紧邻元素之后的同辈元素同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$(" h2~dl " )选取元素之后所有的同辈元素

以上就是在jQuery中常用的层次选择器的使用方法。可以根据具体的需求来选择合适的选择器来选取元素。

三、属性选择器什么是属性选择器？

属性选择器是一种在选择元素时根据其属性值进行匹配的选择器。通过使用属性选择器，可以便捷地选择具有指定属性或属性值的元素。属性选择器通过HTML元素的属性来选择元素。

使用属性选择器

属性选择器在jQuery中的使用方式如下：

1、等于选择器：使用[attribute=value]来选择指定属性值相等的元素。例如： $("[data-type='button']").addClass("highlight");

这将选择所有data-type属性值为button的元素，并添加highlight类。

2、不等于选择器）：使用[attribute!=value]来选择指定属性值不等于的元素。例如： $("[data-type!='button']").hide();

这将选择所有data-type属性值不为button的元素，并隐藏它们。

3、存在选择器：使用[attribute]来选择拥有指定属性的元素。例如： $("[required]").addClass("required-field");

这将选择所有拥有required属性的元素，并添加required-field类。

4、包含*选择器：使用[attribute*=value]来选择指定属性值包含特定字符串的元素。例如： $("[name*=search]").addClass("search-input");

这将选择所有name属性值中包含search字符串的元素，并添加search-input类。

5、以^开头选择器：使用[attribute^=value]来选择指定属性值以特定字符串开头的元素。例如： $("[href^='https://']").addClass("secure-link");

这将选择所有href属性值以https://开头的元素，并添加secure-link类。

6、以$结尾选择器：使用[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选择器（二）过滤选择器及可见性过滤选择器的使用

总结不易，希望宝宝们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ! 如有问题，欢迎评论区批评指正😁

【本文地址】

公司简介

联系我们