jquery 常见选择器

网上摘录的jquery 常见选择器，对初学的童鞋很有帮助哦。

 

1、$(…)

$() 一切的核心，可以跟4种参数

$(expression)，比如$(“#id”)、$(“.class”)等，返回jQuery对象，或者jQuery对象的集合
$(html)，比如$(“<span>hello world</span>”)，返回jQuery对象，或者jQuery对象的集合
$(element)，比如$(document.body)，返回jQuery对象，或者jQuery对象的集合
$(*)，所有元素

2、jQuery Object Accessors

jQuery.index(element)，返回该jQuery对象在集合中的索引

jQuery.each(function)，遍历jQuery对象集合，在每个对象上执行function函数，function callback(index, domElement){this};

jQuery.size()，返回jQuery对象集合的大小

jQuery.length，相当于size()方法

jQuery.get()，获取原生DomElement对象的Array

jQuery.get(index)，获取原生DomElement对象

jQuery.eq(position)，获取jQuery对象集合中的一个jQuery对象

3、Data相关方法

jQuery.data(name)
jQuery.data(name, value)
jQuery.removeData(name)

4、选择符

multiple(selector1, selector2)，可以选择多个元素或者表达式，包装成jQuery对象的集合
例子：$(“div,span”)

id(id)
例子：$(“#id”)

class(class)
例子：$(“.class”)

element(element)
例子：$(“div”)

all
例子：$(“*”)

descendant
例子：$(“table tr td”)

child(parent, child)
例子：$(“#id > span”)，和上一个descendant的区别在于，descendant只要是后代就会被选中，而child必须是直接子节点，不包括孙子节点

next(prev, next)
例子：$(“label + input”)，选中的是label标签的下一个input标签，返回jQuery对象的集合

siblings(prev, siblings)
例子：$(“#prev ~ div”)，选中的是#prev之后的所有div标签，返回jQuery对象的集合，有点像next，但是范围更大

Basic Filters
$(“:header”)，选中所有header，包括<h1><h2>等
$(“tr:odd”)，选中所有奇数行
$(“tr:even”)，选中所有偶数行
$(“:animated”)，选中所有当前有特效的元素，$(“div:animated”)，选中当前所有有特效的<div>
$(“tr:first”)，选中第一行
$(“tr:last”)，选中最后一行
$(“input:not(:checked)”)，选中所有没有“checked”的input元素
$(“td:gt(4)”)，选中所有index是4之后的td
$(“td:lt(4)”)，选中所有index是4之前的td
$(“td:eq(4)”)，选中index是4的td，可以用$(“td”).eq(4)来实现同样的效果

Content Filters
$(“div:contains(‘John’)”)，选中所有包含”John”字符串的div
$(“td:empty”)，选中所有内容为空的td
$(“div:has(p)”)，选中包含有<p>元素的<div>元素，返回jQuery对象集合
$(“td:parent”)，选中所有包含子节点的元素，包括文本也可以算是子节点

Visibility Filters
$(“span:hidden”)，选中所有隐藏的<span>
$(“span:visible”)，选中所有可见的<span>

Attribute Filters
$(“div[id]“)，选中包含id属性的<div>元素
$(“input[name$='letter']“)，选中包含某个属性的<input>元素，这个属性名是以’letter’结尾的
$(“input[name^='letter']“)，选中包含某个属性的<input>元素，这个属性名是以’letter’开头的
$(“input[name*='man']“)，选中包含某个属性的<input>元素，这个属性的属性名里包含’man’
$(“input[name='newsletter']“)，选中包含一个属性的<input>元素，这个属性的名字是’newsletter’
$(“input[name!='newsletter']“)，选中所有不包含’newsletter’属性的<input>元素
$(“input[id][name$='man']“)，选中包含id属性，和以’man’结尾属性的<input>元素

Child Filters
$(“ul li:nth-child(2)”)，选中自身是<ul>元素的第二个子节点的<li>元素，注意这个计算是从1开始的，不是从0开始
$(“div span:firstChild”)，选中自身是<div>元素的第一个子节点的<span>元素
$(“div span:lastChild”)，选中自身是<div>元素的最后一个子节点的<span>元素
$(“div span:onlyChild”)，选中自身是<div>元素的唯一子节点的<span>元素

Forms
$(“:button”)，所有<button>元素，和<input type=”button”>元素
$(“form :checkbox”)，选中所有<form>标签下的<input type=”checkbox”>，不过这样会比较慢，官方建议使用$(“input:checkbox”)
$(“:file”)，选中所有<input type=”file”>
$(“:hidden”)，选中所有隐藏元素，以及<input type=”hidden”>
$(“:input”)，选中所有<input>
$(“:text”)，选中所有<input type=”text”>
$(“:password”)，选中所有<input type=”password”>
$(“:radio”)，选中所有<input type=”radio”>，不过这样会比较慢，建议使用$(“input:radio”)
$(“:image”)，选中所有<input type=”image”>
$(“:reset”)，选中所有<input type=”reset”>
$(“:submit”)，选中所有<input type=”submit”>

Form Filters
$(“input:enabled”)，选中所有enabled的<input>元素
$(“input:disabled”)，选中所有disabled的<input>元素
$(“input:checked”)，选中所有checked的<input type=”checkbox”>元素
$(“input:selected”)，选中所有selected的<option>元素