Jquery学习五-1---jQuery常用选择器

最新推荐文章于 2021-03-02 16:06:17 发布

lishiyuzuji

最新推荐文章于 2021-03-02 16:06:17 发布

阅读量888

点赞数

分类专栏： JQuery 文章标签： jquery class div javascript html border

本文链接：https://blog.csdn.net/lishiyuzuji/article/details/7231578

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先给出如下的html代码，下面的举例都是对该段html代码的操作或者使用。

         <div id="firstDiv">
		<p id="firstPara" class="para">段落一</p>
		<p id="secPara" class="para">段落二</p>
	</div>
	<div id="secDiv">
		<p id="thiPara" class="para">段落三</p>
		<p id="forPara" class="para">段落四</p>
	</div>
	<div id="thrDiv" class="123">
		<p id="fivPara">段落五</p>
		<div class="pp">
			我是一个div
			<p id="sixPara">段落六</p>
		</div>
	</div>

Jquery常用选择器	说明
#id	Id选择器，根据元素的id属性值来匹配特定的元素，和css中的id选择器是对应的。每一个元素的id属性值不同。包括其子元素的文本。举例：选择id为thrDiv的元素，并将其边框设置成颜色为红色，边框宽度为1个像素，边框类型为solid。 $("#thrDiv").css("border","solid red 1px");
.class	类选择器，根据元素的class属性值来匹配，匹配一个或者多个元素。包括子元素文本。举例：选择class属性值为para的所有元素，并将元素内容文本颜色设置成黄色。 $(".para").css("color","yellow");
Element	标签选择器，根据给定的元素的名称来匹配所有的元素。包括子元素文本。举例选择页面上所有的p标签元素，将内容的字体粗细都设置成800。 $("p").css("font-weight","800");
*	通配符，匹配所有元素，当然了可以匹配局部所有元素。看例子吧：匹配页面所有元素：让页面中所有的元素的内容的对齐方式都设置成居中对齐。 $("").css("text-align","center"); 匹配局部元素：获取id为secDiv的div，并将其内容字体大小设置成24px $("#secDiv ").css("font-size","24px");
Parent > child	子选择器：匹配给定的父元素下所有的指定的子元素。例子：将id为thrDiv的div中下的p元素的字体设置成红色注意：这里是父元素下的直接子元素，也就是说子元素下的p元素不会被更改颜色。 $("#thrDiv>p").css("color","red");
Ancestor descendant	包含选择器：在指定的元素下匹配该元素下的所有后代元素，而不止是其直接子元素，这个就是包含选择器和子选择器的区别。例子：将id为thrDiv的div下的所有的p标签的内容颜色更改为红色，包括该元素下子元素下的p标签。 $("#thrDiv p").css("color","red");
选择器1,选择器2,选择器3，……选择器n	选择器分组：就是说将各个选择器匹配的对象进行组合后，来进行统一的设置。例子：将第一个段落，第四个段落，最后一个div中的内容颜色设置成蓝色。 $("#firstPara,#forPara,#thrDiv").css("color","blue");
Pre+next	相邻选择器：匹配pre元素后所有的next元素。注意，匹配成功的元素是在当前父元素下直接子元素，子元素的子元素不会被匹配，看例子。 $("#secPara+p").css("color","red"); 此时不会有匹配项 $("#firstPara+p").css("color","red"); 此时只有一个匹配项：id为secPara的p标签 $("#fivPara+p").css("color","red"); 此时sixPara不会被匹配，没有一个匹配项。
Pre~siblings	同级，兄弟节点：匹配pre元素后的兄弟元素，包括该兄弟元素的所有后代元素。例子：第二个div后的兄弟元素文本设置为红色 $("#secDiv~div").css("color","red");
【attribute】	属性选择器：匹配包含给定属性的元素例子： $("[id]").css("color","red"); 这样元素为id的文本内容都会被设置成红色。
【attribute=value】	属性选择器：匹配给定属性等于某个值的元素。例子： $("[class=para]").css("color","red"); 这样class属性值为para的元素的文本都会被设置成红色。
【attribute!=value】	属性选择器：匹配给定属性值不是某个值的元素例子： $("p[class!=para]").css("color","red"); 这样，p标签中，class属性值不是para的都会被修饰。
【attribute^=value】	匹配给定的属性是以某个值开始的元素例子： $("[class^=p]").css("color","red");
【attribute$=value】	匹配给定的属性是以某个值结束的元素例子： $("[class$=p]").css("color","red");
【attribute*=value】	匹配给定的属性值是包含给定值的元素。例子： $("[id*=a]").css("color","red");
【属性选择器1】【属性选择器2】…【属性选择器n】	复合属性选择器：多个属性选择器选择的对象的重叠部分，也即是满足所有属性选择器的元素。 $("[id][class=123]").css("color","red"); 看来只有一个符合，第三个div。