你的位置:首页 > Java教程

[Java教程]【锋利的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. 选择器对空格敏感。