jQuery选择器

jQuery选择器

• jQuery选择器类似于CSS选择器，用来选取网页中的元素

  • $("h3").css("background","#09F");
    

    代码分析：
  •  获取并设置网页中所有<h3>元素的背景
  • “h3”为选择器语法，必须放在$()中
  • $(“h3”)返回jQuery对象
  • .css()是为jQuery对象设置样式的方法

jQuery选择器分类

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

• 类CSS选择器
  • 基本选择器
  • 层次选择器
  • 属性选择器
• 过滤选择器
  • 基本过滤选择器
  • 可见性过滤选择器

类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的元素
交集选择器	element.class或element#id	匹配指定class或id的某元素或元素集合	$("h2.title")选取所有拥有class为title的h2元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

 层次选择器

• 层次选择器通过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~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

属性选择器

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

名称	语法构成	描述	示例
属性选择器	[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的元素
	[selector] [selector2] [selectorN]	选取满足多个条件的复合属性的元素	$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素

 表单选择器

名称	说明
:input	匹配并获得表单中所有input, textarea, select和button元素
:text	匹配并获得所有的文本框
:password	匹配并获得所有密码框
:radio	匹配并获得所有单选按钮
:checkbox	匹配并获得所有复选框
:submit	匹配并获得所有提交按钮
:image	匹配并获得所有图片
:reset	匹配并获得所有重置按钮
:button	匹配并获得所有按钮
:file	匹配并获得所有文件域
:hidden	匹配并获得所有隐藏域

表单属性选择器

名称	说明
:enabled	匹配并获得所有正常使用的元素
:disabled	匹配并获得所有禁用的元素匹配并获得所有禁用的元素
:checked	匹配并获得所有被选中的复选框
:selected	匹配并获得下拉列表框的选中项

内容选择器

• 内容选择器主要使用通过元素所包含的文本或子元素进行匹配或获取

名称	说明
:contains ( txt )	匹配并获得包含有txt文本的元素
:empty	匹配并获得没有子元素或者文本的元素
:has ( selector )	匹配并获得包含有selector选择器的元素

过滤选择器

• 过滤选择器是在获取到元素后通过索引进一步进行过滤或筛选

名称	说明
:first	获得匹配到的第一个元素
:last	获得匹配到的最后一个元素
:not ( selector )	获得除了匹配的元素之外的元素
:even	匹配所有索引值为偶数的元素，从0开始计数
:odd	匹配所有索引值为奇数的元素，从0开始计数
:eq ( index )	匹配一个给定索引值的元素，从0开始计数
:gt ( index )	匹配所有大于给定索引值的元素，从0开始计数
:lt ( index )	匹配所有小于给定索引值的元素，从0开始计数

• 过滤选择器通过特定的过滤规则来筛选元素
• 语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素
• 主要分类如下：
  • 基本过滤选择器
  • 可见性过滤选择器
  • 表单对象过滤选择器（本博客暂不涉及）
  • 内容过滤选择器、子元素过滤选择器……

基本过滤选择器

• 选取索引值等于1的元素
  • $("li:eq(1)")
• 选取索引值大于1的元素
  • $("li:gt(1)")
• 选取索引值小于1的元素
  • $("li:lt(1)"

基本过滤选择器还支持一些特殊的选择方式

名称	语法构成	描述	示例
基本过滤选择器	:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
	:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
	:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素

 可见性过滤选择器

名称	语法构成	描述	示例
可见性过滤选择器	:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
	:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

• 获取隐藏的<p>元素，使其显示
  • $(" p:hidden").show();
• 获取显示的<p>元素，使其隐藏
  • $(" p:visible").hide();

注意事项

 特殊符号的转义

•  选择器中的特殊符号需要转义，在如下html代码中

<div id="id#a">aa</div>

<div id="id[2]">cc</div>

• 获取这两个元素的选择器

错误方式：

$("#id#a");

$("#id[2]");

正确方式：

$("#id\\#a");

$("#id\\[2\\]");

选择器中的空格

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

选取class为“test”的元素内部的隐藏元素：

var $t_a = $(".test :hidden"); //带空格的jQuery选择器

选取隐藏的class为“test”的元素：

var $t_b = $(".test:hidden");  //不带空格的jQuery选择器

总结

常见的jQuery选择器：

• 基本选择器
  • 标签选择器、类选择器、ID选择器
  • 并集选择器、交集选择器、全局选择器
• 层次选择器
  • 后代选择器、子选择器
  • 相邻选择器、同辈选择器
• 属性选择器
  • 属性名过滤、属性值过滤、多属性条件过滤
• 基本过滤选择器
• 可见性过滤选择器