jquery 常见选择器
网上摘录的jquery 常见选择器,对初学的童鞋很有帮助哦。
1、$(…)
$() 一切的核心,可以跟4种参数
$(expression),比如$(“#id”)、$(“.class”)等,返回jQuery对象,或者jQuery对象的集合
$(html),比如$(“<span>helloworld</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
$(“ulli:nth-child(2)”),选中自身是<ul>元素的第二个子节点的<li>元素,注意这个计算是从1开始的,不是从0开始
$(“divspan:firstChild”),选中自身是<div>元素的第一个子节点的<span>元素
$(“divspan:lastChild”),选中自身是<div>元素的最后一个子节点的<span>元素
$(“div span:onlyChild”),选中自身是<div>元素的唯一子节点的<span>元素Forms
$(“:button”),所有<button>元素,和<inputtype=”button”>元素
$(“form:checkbox”),选中所有<form>标签下的<inputtype=”checkbox”>,不过这样会比较慢,官方建议使用$(“input:checkbox”)
$(“:file”),选中所有<inputtype=”file”>
$(“:hidden”),选中所有隐藏元素,以及<inputtype=”hidden”>
$(“:input”),选中所有<input>
$(“:text”),选中所有<inputtype=”text”>
$(“:password”),选中所有<inputtype=”password”>
$(“:radio”),选中所有<inputtype=”radio”>,不过这样会比较慢,建议使用$(“input:radio”)
$(“:image”),选中所有<inputtype=”image”>
$(“:reset”),选中所有<inputtype=”reset”>
$(“:submit”),选中所有<input type=”submit”>Form Filters
$(“input:enabled”),选中所有enabled的<input>元素
$(“input:disabled”),选中所有disabled的<input>元素
$(“input:checked”),选中所有checked的<inputtype=”checkbox”>元素
$(“input:selected”),选中所有selected的<option>元素