jQuery选择器

最新推荐文章于 2021-09-07 14:58:19 发布

liuliang_30

最新推荐文章于 2021-09-07 14:58:19 发布

阅读量199

点赞数 3

文章标签： jQuery选择器

本文链接：https://blog.youkuaiyun.com/liu123liang456/article/details/90634891

版权

基本选择器

基本选择器是jQuery中最常用的选择器，通过元素的id,className或tagName来查找页面中的元素

选择器	描述	返回
#ID	根据元素的ID属性进行匹配	单个jQuery对象
.class	根据元素的class属性进行匹配	jQuery对象数组
element	根据元素的标签名进行匹配	jQuery对象数组
selector1，selector2，···，selectorN	将每个选择器匹配的结果合并后一起返回	jQuery对象数组
*	匹配页面的所有元素，包括html、head、body等	jQuery对象数组

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery基本选择器</title>
		<script type="text/javascript" src="js/jquery-1.x.js"></script>
	</head>
	<body>
		<div id="idDiv">DOM对象与jQuery对象的相互转化</div>
		<div class="classDiv">jQuery对象不能直接使用DOM对象后方法，</div>
		<div class="classDIv">但可以通过将jQuery对象转换成jQuery对象后再调用其它方法。</div>
		<span class="classSpan">基本选择器是jQuery中最常用的选择器</span>
		<script type="text/javascript">
			$(function(e){
				$("#idDiv").css("color","blue");
				$(".classDiv").css("background-color","#ddd");
				$("span").css("background-color","gray").css("color","white");
				$("*").css("font-size","20px");
				$("#idDiv,.classSpan").css("font-family","italic");
			});
		</script>
	</body>
</html>

层次选择器

jQuery层次选择器是通过DOM对象的层次关系来获取特定的元素，如同辈元素、后代元素、子元素和相邻元素等。层次选择器的用法和基本选择器类似，也是使用$()函数来实现，返回结果均为jQuery对象数组：

选择器	描述	返回
$(“ancestor descendant”)	选取ancestor元素中的所有子元素	jQuery对象数组
$(“parent > child”)	选取parent元素中的直接子元素	jQuery对象数组
$(“prev+next”)	选取紧邻prev元素之后的next元素	jQuery对象数组
$(“prev~sibilings”)	选取prev元素之后的siblings兄弟元素	jQuery对象数组

过滤选择器

简单过滤选择器
简单过滤选择器是过滤选择器中用的最多的一种，过滤规则主要体现在元素的位置上或一些特定的元素上，书写时均以冒号（:）开头：

选择器	描述	返回
:first	选取第一个元素	单个jQuery对象
:last	选取最后一个元素	单个jQuery对象
:even	选取所有索引值为偶数的元素，索引从0开始	jQuery对象数组
:odd	选取所有索引值为奇数的元素，索引从0开始	jQuery对象数组
:header	选取所有标题元素，如h1,h2,h3等	jQuery对象数组
:focus	选取当前获取焦点的元素（1.6+版本）	jQuery对象数组
:root	选取文档的根元素（1.9+版本）	单个jQuery对象
:aninated	选取所有正在执行动画效果的元素	jQuery对象数组
:eq(index)	选取索引等于index的元素，索引从0开始	单个jQuery对象
:gt(index)	选取索引大于index的元素，索引从0开始	jQuery对象数组
:lt(index)	选取索引小于index的元素，索引从0开始	jQuery对象数组
:not(selector)	选择selector以外的元素	jQuery对象数组

内容过滤选择器
内容过滤选择器是指根据元素的文字内容或所包含的子元素的特征进行多虑的选择器

选择器	描述	返回
:contains(text)	选取包含text内容的元素	jQuery对象数组
:has(selector)	选取含有selector多匹配的元素	jQuery对象数组
:empty	选取所有不包含文本或者子元素的空元素	jQuery对象数组
:parent	选取含有子元素或文本的元素	jQuery对象数组

可见性过滤选择器
可见性过滤选择器是值根据元素的可见性来筛选元素的选择器

选择器	描述	返回
:hidden	选取所有的不可见元素，或者type为hidden的元素	jQuery对象数组
:visible	选取所有的可见元素	jQuery对象数组

属性过滤选择器
属性过滤选择器是指根据元素的属性来筛选元素的选择器，在属性匹配时以“[”开始、以“]”结束

选择器	描述	返回
[attribute]	选取包含给定属性的元素	jQuery对象数组
[attribute = value]	选取属性等于某个特定值的元素	jQuery对象数组
[attribute != value]	选取属性不等于或不包含某个特定值的元素	jQuery对象数组
[attribute ^= value]	选取属性以某个值开始的元素	jQuery对象数组
[attribute $= value]	选取属性以某个值结尾的元素	jQuery对象数组
[attribute *= value]	选取属性中包含某个值的元素	jQuery对象数组
[attribute1][attribute2][attribute3]	复合属性选择器，需要同时满足多个条件时使用	jQuery对象数组

子元素过滤选择器
在页面设计过程中需要突出某些行时，可以通过基本过滤选择器中的:eq()来实现单表中行的凸显，但不能同时让多个表具有相同的效果。在jQuery中，子元素过滤选择器可以轻松地选取所有父元素中的指定元素，并进行处理

选择器	描述	返回
:first-child	选取每个父元素中的第一个子元素	jQuery对象数组
:last-child	选取每个父元素中的最后一个元素	jQuery对象数组
:only-child	当父元素只有一个子元素时，进行匹配。否则不匹配	jQuery对象数组
:nth-child(N\odd\even)	选取每个父元素中的第N个子元素或奇偶元素	jQuery对象数组
:first-of-type	选取每个父元素中的第一个元素（1.9+版本）	jQuery对象数组
:last-of-type	选取每个父元素中的最后一个元素（1.9+版本）	jQuery对象数组
:only-of-type	当父元素只有一个子元素时匹配，否则不匹配（1.9+版本）	jQuery对象数组

其中，在:nth-child(N|odd|even)选择器中，元素的下标从1开始。当参数为N为整数时，表示选择集合中的第N个元素；当参数为odd时，表示选取集合中所有下标为奇数的元素；当参数为even时，表示选择集合中所有下标为偶数的元素；当参数为an+b形式时，表示从第b个开始，每隔a个选取一个，例如，3n+2表示从第2个开始每隔3个选取一个。

表单对象属性过滤选择器
表单对象属性过滤选择器是指通过表单对象的属性特征进行筛选的选择器

选择器	描述	返回
:enabled	选取表单中属性为可用的元素	jQuery对象数组
:disabled	选取表单中属性为不可用的元素	jQuery对象数组
:checked	选择表单中被选择中的元素（单选按钮、复选框）	jQuery对象数组
:selected	选取表单中被选中的选项元素（下拉列表）	jQuery对象数组

表单选择器

表单在web前端开发中占据重要的地位，在jQuery中引入的表单选择器能够让用户更加方便的处理表单数据。通过表单选择器可以快速定位到某类表单对象

选择器	描述	返回
:input	选取所有的< input>、< textarea> 、< select>、< button>元素	jQuery对象数组
:text	选取所有的单行文本框	jQuery对象数组
:password	选取所有的密码框	jQuery对象数组
:radio	选取所有的单选框	jQuery对象数组
:checkbox	选取所有的多选框	jQuery对象数组
:submit	选取所有的提交按钮	jQuery对象数组
:image	选取所有的图片按钮	jQuery对象数组
:button	选取所有的按钮	jQuery对象数组
:file	选取所有的文件域	jQuery对象数组
:hidden	选取所有的不可见元素	jQuery对象数组