【锋利的jQuery】学习笔记02

第二章 jQuery选择器

一、jQuery选择器的优势

1. 写法简洁 $("div")
2. 支持css2和css3选择器（对于css3选择器支持这一项，我认为应该是jQuery首先创造并使用这些选择器而后css3将其引入自己的规范）
3. 完善的处理机制 $(".demo")获取的永远是对象，即时网页没有这个元素。

          由于这种机制，使用jQuery检查某个元素在网页中是否存在时不能使用：

if($(".demo")){
     // do something
}

而是应该根据获取到的长度来判断：

if($(".demo").length>0){
     // do something
}

或者是转为DOM判断。

二、jQuery选择器

• 基本选择器

最常用的选择器，通过元素id、class和标签名等查找DOM元素。

选择器	描述	返回	示例
#id	通过id匹配	单个元素	$("#id")
.class	通过类名匹配	集合元素	$(".class")
element	通过元素名匹配	集合元素	$("element")
*	匹配所有元素	集合元素	$("*")
selector1,selector2,……,selectorN	群组选择器	集合元素	$("div,span,p")

 

 

 

 

 

 

                                                                       

 

 

• 层次选择器

通过DOM元素之间的层次关系获取特定元素例如：后代元素、子元素、相邻元素和同辈元素等。

选择器	描述	返回	示例
$("ancestor descendant")	选ancestor元素里面所有的descendant	集合元素	$("div span")
$("parent>child")	选parent元素下的子元素	集合元素	$("div>span")
$("prev+next")	选取紧接在prev后的next元素	集合元素	$("p+div")
$("prev~siblings")	选取prev元素之后的所有siblings元素	集合元素	$("div~div")

对于$("prev+next")选择器一般用next()方法代替，对于$("prev~siblings")一般用nextAll()方法代替。

• 过滤选择器

通过特定的过滤规则筛选所需的DOM元素，选择器已:开头（与css伪类选择器相似）。按照过滤原则可分为：

1. 基本过滤选择器

选择器	描述	返回	示例
:first	获取第一个元素	单个元素	$("div:first")
:last	获取最后一个元素	单个元素	$("div:last")
:not(selector)	去掉selector以外的元素	集合元素	$("div:not(.demo)")
:even	选取索引是偶数的元素，索引从0开始	集合元素	$("input:even")
:odd	选取索引是奇数的元素，索引从0开始	集合元素	$("input:odd")
:eq(index)	选取所有等于index的元素（index从0开始）	单个元素	$("div:eq(0)")
:gt(index)	选取所有大于index的元素（index从0开始）	集合元素	$("div:gt(0)")
:lt(index)	选取所有小于index的元素（index从0开始）	集合元素	$("div:lt(0)")
:header	选取所有标题元素例如：h1,h2等	集合元素	$(":header")
:animated	选取正在动画的元素	集合元素	$("div:animated")
:focus	选取获得焦点的元素	集合元素	$(":focus")

  在使用:even、:odd、：eq()、:gt()、:lt()等选择器是一定要注意下标问题

       2.内容过滤选择器  过滤规则主要是它包含的子元素和文本

选择器	描述	返回	示例
:contains(text)	包含文本为text的元素	集合元素	$("div:contains('text')")
:empty	选取没有文本或子元素的空元素	集合元素	$("div:empty“)
:has(selector)	选取含有se;ector的元素	集合元素	$("div:has(p)")
:parent	选取含有文本或子元素的元素	集合元素	$("div:parent")

      3.可见性过滤选择器  根据元素的可见和不可见状态选择相应元素

选择器	描述	返回	示例
:hidden	选取不可见元素	集合元素	$(":hidden")
:visible	选取可见元素	集合元素	$(":visible")

对于:hidden选择器，不仅可以选择display:none的元素，也可以选择visibility:hidden和文本隐藏域等元素。

4.属性过滤选择器  根据元素属性获取相应元素

选择器	描述	返回	示例
[attribute]	选取有此属性的元素	集合元素	$("div[id]")
[attribute=value]	选取属性值为value的元素	集合元素	$("div[id=test]")
[attribute!=value]	选取属性值不为value的元素	集合元素	$("div[id!=test]")
[attribute^=value]	选取属性值以value开头的元素	集合元素	$("div[id^=test]")
[attribute$=value]	选取属性值以value结束的元素	集合元素	$("div[id$=test]")
[attribute*=value]	选取属性值含有value的元素	集合元素	$("div[id*=test]")
[attribute|=value]	选取属性值为等于value或者以value为前缀的元素	集合元素	$("div[id|=test]")
[attribute~=value]	选取属性值空格分隔的值中有value的元素	集合元素	$("div[id~=test]")
[attribute1][attribute2][attributeN]	选取有给定的多个属性的元素	集合元素	$("div[id=test][class]")

5. 子元素过滤选择器

选择器	描述	返回	示例
:nth-child()	选取每个父元素下的给定条件的元素（index从1开始）	集合元素	$("div:nth-child")
:first-child	选取每个父元素的第一个元素	集合元素	$("div:first-child")
:last:child	选取每个父元素的最后一个元素	集合元素	$("div:last-child")
:only:child	选取只有一个子元素的父元素	集合元素	$("div:only-child")

eq(index)只匹配一个元素，而nth-child将为每一个符合条件的父元素匹配子元素。同时nth-child()的index从1开始，eq()从0开始。同理，:first和:first-child、:last和last:child也类似。

6.表单对象属性过滤选择器

选择器	描述	返回	示例
:enabled	选取可用元素	集合元素	$("#form1:enabled")
:disabled	选取不刻意元素	集合元素	$("#form1:disabled")
:checked	选取被选中元素（单选框、复选框）	集合元素	$("input:checked")
:selected	选取所有被选中的选项元素（下拉列表）	集合元素	$("input:selected")

• 表单选择器 

选择器	描述	返回	示例
:input	选取所有input、textarea、select、button元素	集合元素	$("input")
:text	选取单行文本框	集合元素	$(":text")
:password	选取密码框	集合元素	$(":password")
:radio	选取单选按钮	集合元素	$(":radio")
:checkbox	选取复选框	集合元素	$(":checkbox")
:submit	选取提交按钮	集合元素	$(":submit")
:image	选取图片按钮	集合元素	$(":image")
:reset	选取复位按钮	集合元素	$(":reset")
:button	选取按钮	集合元素	$(":button")
:file	选取上传域	集合元素	$("file")
:hidden	选取不可见元素	集合元素	$(":hidden")

三、jQuery选择器注意事项

1. 选择器含有”.“，”#“，”（“或”]“等特殊字符时使用转义符转义。
2. jQuery在1.3.1版本后放弃之前的属性前加@。
3. 选择器对空格敏感。