【JQurey】JQurey选择器

 

 

本文只是我学习《锋利的JQuery》一书的笔记而已

 

首先看总结一下常用的CSS选择器

选择器	语法	描述	示例
标签选择器	E{CSS规则}	以文档元素作为选择符	td{font:14px;width:120px;} a{text-decoration:none}
ID选择器	#ID{CSS规则}	以文档元素唯一标示符ID作为选择符	#note{font:14px;width:120px;}
类选择器	E.className{CSS规则}	以文档标示符class作为选择符	div.note{font:14px;} .dream{font:14px;}
群组选择器	E1,E2,E3{CSS规则}	多个选择符应用同样的样式规则	td,p,div,a{font:14px;}
后代选择器	E F{CSS规则}	元素E的任意后代F	#link a{color:red;}
通配选择器	*{CSS规则}	以文档的所有元素作为选择符	*{font:14px;}

 

JQuery选择器分为，基本选择器，层次选择器，过滤选择器，表单选择器

 

基本选择器：通过id，class，标签名等来查找DOM元素

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	${"#test"}选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	${".test"}选取所有class为test的元素
element	根据给定的元素名匹配元素	集合元素	$("p")选取所有<p>的元素
*	匹配所有元素	集合元素	$("*")选取所有元素
selector1,selector2, ...,selectorN	将每一个选择器匹配到的元素合并后一起返回	集合元素	$("div,span,p.myClass")选取所有<div><span>和拥有class为myClass的<p>标签的一组元素

 

层次选择器：如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素子元素，相邻元素和兄弟元素等，那么层次选择器是个非常好的选择

选择器	描述	返回	示例
$("ancestor descendant")	选取ancestor元素里的所有descendant后代元素	集合元素	$(div span)选取所有div里的所有span元素
$("paremt>child")	子元素，上面是后代元素	集合元素	$(div>span)选取所有div里的所有span子元素
$("prev+next")	选取紧跟在prev元素后的next元素	集合元素	$(".one+div")选取class为one的下一个div元素
$("prev+siblings")	选取prev元素后的所有siblings元素	集合元素	$("#two~div")选取id为two的元素后面所有的div元素

其中：

  $("prev+next")等价于 $("prev").next("div")

  $("prev+siblings")等价于 $("prev").nextAll("div")

 

过滤器选择器：与CSS中的伪类选择器语法相同，即选择器都以一个冒号开头，

按照不同的过滤规则，可以分为，基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤

基本过滤器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$("div:first"),选取所有div中第一个div元素
:last	选取最后一个元素	单个元素	$("div:last"),选取所有div中最后一个div元素
:not(selector)	去除所有给定选择器匹配的元素	集合元素	$("input:not(.myClass)")选取class不是myClass的所有input元素
:even	选取索引是偶数的所有元素，索引从0开始	集合元素	$("input:even")选取索引是偶数的input元素
:odd	选取索引是奇数的所有元素，索引从0开始	集合元素	$("input:eq(1)")选取索引是奇数的input元素
:eq(index)	选取等于index的元素，index从0开始	集合元素	略
:gt(index)	选取大于index的元素	集合元素	略
:lt(index)	选取小于index的元素	集合元素	略
:header	选取所有标题元素，例如<h1><h2><h3>	集合元素	略
:animated	选取当前正在执行动画的所有元素	集合元素	略

 

 内容过滤器

选择器	描述	返回	示例
:contains(text)	选取内容文本为text的元素	集合元素	$(”div:contains('我')“)选取含有文本'我'的div元素
:empty	选取不包含子元素或文本的空元素	集合元素	$("div :empty")选取不包含子元素(包括文本元素)的<div>元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$("div:has(p)")选取包含<p>元素的<div>元素
:parent	选取含有子元素或者文本的元素	集合元素	$("div:parent")选取拥有子元素(包括文本元素)的<div>元素

 

可见性过滤选择器

选择器	描述	返回	示例
:hidden	选取所有不可见的元素	集合元素	$(":hidden")选取所有不可见的元素 $("input:hidden")选取所有不可见的<input>元素
:visible	选取所有可见的元素	集合元素	$("div:visible")选取所有可见的div元素

 

属性过滤选择器

选择器	描述	返回	示例
[attrubute]	选取拥有此属性的元素	集合元素	$("div[id]")选择拥有属性id的元素
[attrubute=value]	选取属性值为value的元素	集合元素	$("div[title=test]")选取属性为test的div元素
[attrubute!=value]	选取属性值不等于value的元素	集合元素	下略
[attrubute^=value]	选取属性值value开始的元素	集合元素
[attrubute$=value]	选取属性值value结束的元素	集合元素
[attrubute*=value]	选取属性值包含value的元素	集合元素
[selector1][selector2],...,[selectorN]	复合属性选择器，每选择一次缩小一次范围	集合元素