jquery的选择器列表

javascript要选择ID还是比较麻烦的。但是最近知道jquery的如此强大,《锋利的jquery》一书算是帮我总结了吧。其实也就是对于jquery的doc一个中文翻译。

但是为了方便以后自己学习,还是摘抄在这里吧。

总结一下 #xxx 表示选择 id="xxx"的元素
.xxx表示选择class="xxx"元素
xxx 表示所有的 xxx 标签元素

1. 基本选择器
$("#test") 选取id="test"的元素
$(".test") 选取class="test"的元素
$("p") 选取所有<p>元素
$("*") 选取所有的元素
$("div,span,p.myClass") 选取所有<div>,<span>和拥有class="myClass"的<p>标签的一组元素

2. 层次选择器
$("div span") 选取<div>里的所有的<span>元素
$("div > span") 选取<div>元素下元素名是<span>的子元素
$(‘.one + div’) 选取class="one"的下一个<div>的兄弟元素
$(‘#two~div’) 选取id="two"的元素后面的所有<div>兄弟元素

3. 基本过滤选择器
$("div:first") 选取所有<div>元素中第一个<div>元素
$("div:last") 选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)") 选取所有class不等于myClass的<input>元素
$("input:even") 选取索引是偶数的<input>元素

$("input:odd") 选取索引是奇数的<input>元素
$("input:eq(1)") 选取索引等于1的<input>元素
$("input:gt(1)") 选取索引大于1的<input>元素,但是不包括1
$("input:lt(1)") 选取索引小于1的<input>元素,但是不包括1

$(":header") 选取网页中所有的<h1>,<h2>,<h3>…..
$("div:animated") 选取正在执行动画的<div>元素

4. 内容过滤选择器
$("div:contain(‘我’)") 选取含有文本"我"的<div>元素

$("div:empty") 选取不包含子元素(包括文本元素)的<div>空元素
$("div:has(p)") 选取含有<p>元素的<div>元素
$("div:parent") 选取拥有子元素(包括文本元素)的<div>元素

5. 可见性过滤选择器
$(":hidden") 选取所有不可见的元素。包括<input type="hidden"/>, <div style="display:none;"> ……

$("div:visible") 选取所有可见的<div>元素

6. 属性过滤选择器
$("div[id]") 选取拥有属性id的元素
$("div") 选取属性title="test"的<div>元素
$("div") 选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取)

$("div") 选取属性title以"test"开始的<div>元素
$("div") 选取属性title以"test"结束的<div>元素
$("div") 选取属性title含有"test"的<div>元素

$("div[id]") 选取拥有属性id,并且属性title以"test"结束的<div>元素

7. 子元素过滤选择器
$(":nth-child(index/even/odd/equation)") 为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的
$("ul li:first-child") 选取每个<ul>中第一个<li>元素

$("ul li:last-child") 选取每个<ul>中最后一个<li>元素
$("ul li:only-child") 在<ul>中选取是唯一子元素的<li>元素

8. 表单对象属性过滤选择器
$("#form1:enabled") 选取id为"form1"的表单内的所有可用元素

$("#form2:disabled") 选取id为"form2"的表单内所有不可用的元素
$("input:checked") 选取所有被选中的<input>元素
$("select:selected") 选取所有被选中的选项元素

9. 表单对象属性过滤示例
$(":input") 选取所有<input>,<textarea>,<select>和<button>元素

$(":text") 选取所有的单行文本框
$(":password") 选取所有的密码框
$(":radio") 选取所有的单选框
$(":checkbox") 选取所有的复选框
$(":submit") 选取所有的提交按钮
$(":image") 选取所有的图像按钮
$(":reset") 选取所有的重置按钮

$(":button") 选取所有的按钮
$(":file") 选取所有的上传域
$(":hidden") 选取所有不可建元素

###########################################

Best regards
Timo Seven
blog: http://www.timoseven.com
twitter: http://twitter.com/zauc
Linux System Admin & MySQL DBA

关于 Timo
XNIX SA & MYSQL DBA

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: