jQuery选择器大全 不断更新

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

基本选择器

// 选择id值为maoid的元素，id值是唯一的所以返回单个元素。
$("#maoid")
// 选择所有的div标签元素，返回div元素数组
$("div")
// 选择使用 maoclass 类的css的所有元素 
$(".maoclass")
// 选取所有元素。
$("*")
// 选取多个元素。 
$("#maoid, div, .maoclass")

层次选择器

// 选取 div 里的所有 span 元素
$("div span")
// 选取 div 元素下元素名是 span 的子元素
$("div >span")
// 选取 id 为 one 的元素的下一个 div 同辈元素
$("#one +div")
$("#one").next("div")
// 选取 id 为 one 的元素的元素后面的所有 div 同辈元素
$("#one~div")
$("#one").nextAll("div")
// 获取 id 为 one 的元素的所有 div 同辈元素（不管前后）
$("#one").siblings("div")
// 获取 id 为 one 的元素的前面紧邻的同辈 div 元素
$("#one").prev("div")

// 获取元素范围大小顺序依次为：
$("#one").siblings("div") > $("#one~div") > $("#one +div")
$("#one").siblings("div") > $("#one").nextAll("div") > $("#one").next("div")

基本过滤选择器

// 选取所有 div 元素中第1个 div 元素
$("div:first")
// 选取所有 div 元素中最后一个 div 元素
$("div:last")
// 选取 class 不是 maoClass 的 input 元素 
$("input:not(.maoClass)")
// 选取索引是偶数的 input 元素(索引从0开始) 
$("input:even")
// 选取索引是基数的 input 元素(索引从0开始) 
$("input:odd")
// 选取索引等于2的 input 元素 
$("input:eq(2)")
// 选取索引大于4的 input 元素
$("input:gt(4)")
// 选取索引小于4的 input 元素
$("input:lt(4)")
// 过滤掉所有标题元素，例如：h1、h2、h3等
$(":header")
// 选取正在执行动画的 div 元素
$("div:animated")
// 选取当前获取焦点的元素
$(":focus")

内容过滤选择器

// 选取所有 div 中含有'Name'文本的元素 
$("div:contains('Name')")
// 选取不包含子元素（包括文本元素）的 div 空元素 
$("div:empty")
// 选取所有含有 p 元素的 div 元素 
$("div:has(p)")
// 选取拥有子元素的（包括文本元素）div元素 
$("div:parent")

可见性过滤选择器

// 选取所有不可见的 div 元素 
$("div:hidden")
// 选取所有可见的 div 元素
$("div:visible")

属性过滤选择器

// 选取所有拥有属性 id 的元素
$("div[id]")
// 选取所有的 name 属性等于 'mao' 的 input 元素 
$("input[name='mao']")
 // 选取所有的 name 属性不等于 'mao' 的 input 元素 
$("input[name!='mao']")
// 选取所有的 name 属性以 'mao' 开头的 input 元素 
$("input[name^='mao']")
// 选取所有的 name 属性以 'mao' 结尾的 input 元素
$("input[name$='mao']") 
// 选取所有的 name 属性包含 'mao' 的 input 元素 
$("input[name*='mao']")
// 选取属性 title 等于 'mao' 或以 'mao' 为前缀(该字符串后跟一个连字符'-')的 div 元素
$("div[title|='mao']")
// 选取属性 title 用空格分隔的值中包含字符 'mao' 的 div 元素
$("div[title~='mao']")
// 选取拥有属性 id,并且属性 title 以 'mao' 结束的 div 元素 
$("div[id][title$='mao']")

子元素过滤选择器

// 选取 class 为 'mao' 的 div 父元素下的第 2 个子元素
$("div .mao:nth-child(2)")
// 选取每个 div 中的第1个 span 元素 
$("div span:first-child")
// 选取每个 div 中的最后一个 span 元素 
$("div span:last-child")
// 在 div 中选取是唯一子元素的 button 元素
$("div button:only-child")

表单对象属性过滤选择器

// 选取id为'mao'的表单内所有可用元素
$("#mao :enabled")
// 选取id为'mao'的表单内所有不可用元素 
$("#mao :disabled")
// 选取所有被选中的 input 元素 
$("input :checked")
// 选取所有的 select 的子元素中被选中的元素 
$("select option:selected")

表单选择器

// 选取所有 input , textarea , select 和  button 元素 
$(":input")
// 选取所有的单行文本框
$(":text")
// 选取所有的密码框 
$(":password")
// 选取所有单的选框 
$(":radio")
// 选取所有的多选框 
$(":checkbox")
// 选取所有的提交按钮
$(":submit")
// 选取所有的图像按钮 
$(":image")
// 选取所有的重置按钮
$(":reset")
// 选取所有的按钮 
$(":button")
// 选取所有的上传域
$(":file")
// 选取所有不可见元素
$(":hidden")

组合选择器

// 获取 含有 name 属性的元素，且 name 元素的值不以“___”开头
$(':not(*[name^="___"])[name]');