JQuery基础 -- 选择器

传统的Javascript是通过document.getElementById()函数来选择页面元素，这需要被选择的元素具有定义好的ID。相比之下，jQuery对页面元素的选择就要灵活多，它不但支持通过ID选择，而且还支持Class Name、元素及其位置顺序、以及这些方法的组合。

如果你对CSS熟悉，你一定知道什么是ID和Class。ID和Class都是对页面元素的标识，不同的是ID是对某个元素的标识（不同的元素不可以具有相同的ID），而Class是对一类元素的标识（不同元素可以具有相同的Class）。 jQuery用到的ID和Class就是来自CSS。

1. 通过“ID”来选择：

<p id="myID">这一段落的ID是“myID"</p>

//用以下jQuery来选择这一段落，然后加上特效（向右移动10px）

$("#myID").animate({ marginLeft: 10}, 'fast');

2. 通过“Class”来选择：

<p class="myClass">这一段落的Class是”myClass“</p>

//用以下的jQuery来选择这一段落，然后附加上一个词

$(".myClass").append("<b>Hello</b>"

3. 通过“元素及其位置顺序”来选择：

<ul>

  <li>第一列</li>

  <li>第二列</li>

  <li>第三列</li>

</ul>

//使用下列jQuery对第三列进行选择，然后加上特效

$('li:eq(2)').animate({ marginLeft: 10}, 'fast');

4. 使用“上述方法的组合”来多项选择：

<p id="myID">paragraph with id</p>

<p class="myClass">paragraph with class</p>
<ul>

  <li>第一列</li>

  <li>第二列</li>

  <li>第三列</li>

</ul>

//使用以下jQuery可以把上面的HTML元素都选中

$('#myID, .myClass, li:eq(2), li').append("-被选中");

注意：

• 选择页面元素的格式是：$('selector') , 这里selector是你要选择的元素，它可以是以上4种情况。
• 元素选择后，通常要执行一些操作，以上例子里使用了animate和append，更多更深入的探讨将在以后的文章里详述。
• jQuery的选择器(selector)功能强大，所包含的内容比较多，这里只是对最基本的功能进行介绍。我会在以后的文章里对它进行更加详细的介绍。
• $('selector')是jQuery('selector')的缩写，如果你的Javascript代码包含有对$的其他定义，你必须使用jQuery来代替$
• 要注意$()中用 #id选择器 和.class 类选择器的标识.

 

 

JQuery所支持的基本CSS选择器

选择器	描述
*	匹配任何元素
E	匹配标签名称为E的所有元素
E F	匹配标签名称为F、作为E的后代节点的所有元素
E>F	匹配标签名称为F、作为E的直接子节点的所有元素
E+F	匹配前面是邻近兄弟节点E的所有元素F(E和F紧挨着)
E-F	匹配前面是任何兄弟节点E的所有元素F(E和F可以不紧挨着)
E:has(F)	匹配标签名称为E、至少有一个标签名称为F的后代节点的所有元素
E.C	匹配带有类名C的所有元素E  (.C等效于 *.C)
E#I	匹配id特性值为I的元素E (#I等效于*#I)
E[A]	匹配带有特性A的所有元素E(不管特性A的值是什么)
E[A=V]	匹配所有元素E,其特性A的值正好是V
E[A^=V]	匹配所有元素E,其特性A的值以V开头
E[A$=V]	匹配所有元素E,其特性A的值以V结尾
E[A*=V]	匹配所有元素E,其特性A的值包含V

 

============================================

如:

1. a[href^=http://]  :  以http://开头的A标签
2. input[type=text]  :  所有<input type="text" />的元素
3. div[title^=my]  :  匹配title属性以my开头的所有div元素
4. a[href$=.pdf] : 匹配引用PDF文件链接的所有a标签
5. li:has(a) : 匹配包含<a>元素的所有<li>元素

根据在DOM中位置来选择元素

选择器	描述
:first	页面的最先的匹配 li a:first 返回最先的,并且在列表<li>项下的链接
:last	页面的最后匹配
:first-child	最先的子元素. li:first-child 返回每个列表的最先的项
:last-child	最后的子元素
:only-child	返回没有兄弟节点的所有元素
:nth-child(n)	第n个子节点(n从1开始,n=0导致选择所有元素的异常结果);li:nth-child(2)返回每个列表的第2个<li>项
:nth-child(even|odd)	偶数或奇数的子节点.li:nth-child(even) 返回每个序列的偶数子节点
:nth-child(Xn+Y)	根据传入的公式计算的第n个子节点. 如果Y为0，则忽略Y.n从0开始,且X不等于0 ; li:nth-child(3n)返回3的倍数的项, 而li:nth-child(5n+1)返回5的倍数的项的下一项
:even 或 :odd	页面范围内偶数或奇数的匹配元素.  li:even 返回全部偶数<li>项
:eq(n)	第n个匹配元素(n从0开始)
:gt(n)	第n个匹配元素(不包括)之后的元素(n从0开始)
:lt(n)	第n个匹配元素(不包括)之前的元素(n从0开始)

 

 

自定义筛选选择器

选择器	描述
:animated	选择当前处于动态控制之下的元素.
:button	选择任何按钮(input[type=submit], input[type=reset], input[type=button],或button
:checkbox	只选择复选框元素(input[type=checkbox])
:checked	只选择已选中的复选框或单选按钮
:contains(foo)	只选择包含文本foo的元素
:disabled	只选择在界面上已经禁用的表单元素
:enabled	只选择在界面上已经启用的表单元素
:file	选择所有文件元素(input[type=file])
:header	只选择标题元素(<hn>,n代表数字1~6),例如<h1><h2>
:hidden	只选择隐藏元素
:image	选择表单图像元素(input[type]=image)
:input	只选择表单元素(<input> <select> <textarea> <button>
:not(filter)	根据制定的筛选器进行求反
:parent	只选择拥有后代节点(包括文本)的元素,而排除空元素
:password	只选择口令元素(input[type=password])
:radio	只选择单选按钮元素(input[type=radio])
:reset	选择复位按钮元素(input[type=reset] 或 button[type=reset])
:selected	选择已选中的选项元素
:submit	选择提交按钮元素(button[type=submit] 或 input[type=submit]　　)
:text	只选择文本字段元素(input[type=text])
:visible	只选择可见元素