JQuery选择器大全

1. 基本选择器

选择器 描述 返回 示例
#id      单个元素  $("#test")
.class   集合元素 $(".test")
element   集合元素 $("p")
*   匹配所有元素 集合元素 $("*")
selector1,selector2   集合元素 $("div,span,p")

 

 

 

 

 

2. 层次选择器 

选择器 描述 返回 示例
$("ancestor descendant") 选取所有后代    集合元素  $("div span")
$("parent>child") 选取直接后代 集合元素 $("div.span")
$("prev+next") 选取紧接在prev元素后的next元素 单个元素 $(".one+div")
$("prev~siblings")   选取紧接在prev元素后的所siblings元素 集合元素 $(".one~div")

 

 

 

 

 

3. 过滤选择器

  (1)基本过滤选择器

选择器 描述 返回 示例
:first      单个元素  $("div:first")
:last      单个元素  $("div:last")
:not(selector)   集合元素 $("input:not(.myclass)")
:even   索引从0开始 集合元素 $("input:even")
:odd
  集合元素 $("input:odd")
:eq(index)   单个元素 $("input:eq(1)")
:gt(index)   集合元素 $("input:gt(1)")
:lt(index)   集合元素 $("input:lt(1)")
:header 选取所有的标题元素 集合元素 $(":header")
:animated 选取当前正在执行动画的元素 集合元素 $(":animated")
:focus 选取当前获取焦点的元素 单个元素 $(":focus")

 

 

 

 

 

 

 

 

 

  (2)内容过滤选择器

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

 

 

 

 

  (3)可见性过滤选择器

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

 

 

 

  (4)属性过滤选择器

选择器 描述 返回 示例
[attribute] 选取拥有此属性的元素    集合元素  $("div[id]")
[attribute=value] 选取属性的值为value的元素  集合元素 $("div[title=test]") 
[attribute!=value]   集合元素 $("div[title!=test]")
[attribute^=value] 选取属性的值以value开始的元素 集合元素 $("div[title^=test]")
[attribute$=value] 选取属性的值以value结束的元素 集合元素 $("div[title$=test]")
[attribute*=value] 选取属性的值含有value的元素 集合元素 $("div[title*=test]")
[attribute|=value]

选取属性等于给定字符串或以该字

符串为前缀(该字符串后跟一个连字

      "-")的元素

集合元素 $("div[title|='en']")
[attribute~=value]

选取属性用空格分隔的值中包含一个

     给定值的元素

集合元素 $("div[title~='en']")

[attribute1][attribute2]

  [attributeN]

用属性选择器合并成一个复合属性选

择器,满足多个条件。每选择一次,

   缩小一次范围

集合元素 $("div[id][title$='test']")

 

 

 

 

 

 

 

 

 

 

 

 

 

  (5)子元素过滤选择器

选择器 描述 返回 示例

:nth-child(index/even/

odd/equation)

选取每个父元素下的第index

个子元素或者奇偶元素(index

         从1算起)

   集合元素 

$("ul li:nth-child(even)")

$("ul li:nth-child(2)")

$("ul li:nth-child(3n)")

:first-child 选取每个父元素的第一个元素  集合元素 $("ul li:first-child")
:last-child 选取每个父元素的最后一个元素 集合元素 $("ul li:last-child")
:only-child

如果某个元素是它父元素中唯一的

子元素,那么将会被匹配。如果父元

     素含有其它元素,则不会匹配

集合元素 $("ul li:only-child")

  (6)表单对象过滤选择器

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

 

 

 

 

4. 表单选择器

选择器 描述 返回 示例
: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")

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2014-06-17 19:04  云梦殇  阅读(155)  评论(0编辑  收藏  举报