jQuery 选择器

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等 “查找”（或选择）HTML 元素。它基于已经存在的 css 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

jQuery 选择器分类

jQuery 选择器功能强大，种类也很多，分类如下

通过 css 选择器选取元素

• 基本选择器
• 层次选择器
• 属性选择器

通过过滤选择器选择元素

• 基本过滤选择器
• 可见性过滤选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2”) 选取所有 h2 元素
类选择器	.class	根据给定的 class 匹配元素	$(".title") 选取所有 class 为 title 的元素
ID 选择器	#id	根据给定的 id 匹配元素	$("#title") 选取 id 为 title 的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title”) 选取所有 div、p 和拥有 class 为 title 的元素
全局选择器	*	匹配所有元素	$(" * ") 选择所有元素

层次选择器

层次选择器通过 DOM 元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选择器	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~siblings	选取 prev 元素之后的所有 siblings 元素	$(“h2~d1”) 选取 h2 元素之后所有的同辈元素 dl

属性选择器

属性选择器通过 HTML 元素的属性来选择元素

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$("[ href ]") 选取含有 href 属性的元素
[attribute=value]	选取等于给定属性是某个特定值的元素	$("[href=’#’]")选取 href 属性值为 ‘#’ 的元素
[attribute != value]	选取不等于给定属性是某个特定值的元素	$[“href!=’#’”] 选取 href 属性值不为 ‘#’ 的元素

过滤选择器

通过特定的过滤规则来筛选出所需的元素

主要分类

• 基本过滤选择器
• 可见性过滤选择器
• 表单对象过滤选择器
• 内容过滤选择器、子元素过滤选择器。。。。。。

基本过滤选择器

语法	描述	示例
:first	选取第一个元素	$(“li:first”)选取所有 元素中的第一个 li元素
:last	选取最后一个元素	$(“li:last”)选取所有 li 元素中的最后一个 li 元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(“li:not(.three)”)选取class不是three 的元素
:even	选取索引是偶数的所有元素（index）从0k开始	$(li:even) 选取索引是偶数的所有 li 元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(“li:even”)选取索引是奇数的所有 li 元素
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)”)选取索引等于1的 li 元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(“li:gt(1)”)选取索引大于1的 li 元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)”)选取索引小于1的 li 元素 （注：小于1，不包括1）
:header	选取所有标题元素，如 h1~h6	$(":header") 选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus")选取当前获得焦点的元素
:animated	选择所有动画	$(":animated")选取当前所有动画元素

可见性过滤选择器

通过元素显示状态来选取元素

语法	描述	示例
:visible	选取所有可见的元素	$(":visible")选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden")选取所有隐藏的元素

jQuery 选择器注意事项

特殊符号转义

eg：
	<div id="id#a"></div>
	<div id="id[2]"></div>
	获取这两个元素的选择器
	$("#id\\#a");
	$("#id\\[2\\]");
	

选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

eg：
	$(".test :hidden");//带空格的 jQuery 选择器
	//选取 class 为 "test" 的元素内部的隐藏元素

	$(".test:hidden");//不带空格的 jQuery 选择器
	//选取隐藏的 class 为 "test" 的元素

归纳