jQuery选择器

jQuery选择器

jQuery的优势

1. 简洁的写法

   $()函数在很多JavaScript库中都被当作一个选择器来使用，在jQuery也不例外

2. 完善的处理机制

   使用JQuery选择器不仅比使用传统的 getElementById()和getElementByTagName()函数简洁得多，还能避免某些错误

jQuery选择器的类型

CSS选择器

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

过滤选择器

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

基本选择器

标签选择器	element	匹配指定的标签名元素	元素集合	$(“h2”)选取所有h2元素
类选择器	.class	匹配指定的class元素	元素集合	$(".title")选取所有以class为title的元素
id选择器	#id	匹配指定的id元素	单个元素	$("#title")选取以id为title的元素
并集选择器	selector1，selector2，…，selectoeN	将每个选择器匹配的元素合并后一起返回	元素集合	$(“div,p,.title”)选取所有以div、p、和class为title的元素
全局选择器	*	匹配所有元素	集合元素	$("*")选取所有元素

层次选择器

后代选择器	root offspring	选取root元素里所有 offspring(后代)元素	元素集合	$("#menu span")选取#menu下所有的元素
子选择器	parent>child	选取parent元素下的child(子)元素	元素集合	$("#menu>span")选取#menu下的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	元素集合	$(“h2+dl”)选取紧邻 元素之后的同辈元素
同辈元素选择器	prev-sibings	选取prev元素之后的所有sibings(同辈)元素	元素集合	$(“h2-dl”)选取 元素之后所有的同辈元素

属性选择器

[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的元素

基本过滤选择器

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

可见性过滤器

:visible	选取所有可见的元素	集合元素	$(":visible")选取所有可见的元素
:hidden	选取所有隐藏的元素	集合元素	$(":hidden")选取所有隐藏的元素

jQuery选择器的主要事项

选择器含有特殊符号的注意事项

属性值中不能含有某些特殊符号，但开发中，可能会遇到"#“和”."等特殊符号，如果按照普通的方式处理会报错，解决错误的方法是使用转义符转义

选择器中含有空格的注意事项

选择器中的空格也是不容忽视的，多一个空格或少一个空格，可能会得到截然不同的结果