jQuery所支持的各类CSS选择器

jQuery In Action  是不错的技术图书，主要学习其选择器，具体使用时可以根据需要查看示例中的代码。对于AJAX方面的应用，个人感觉还是直接选用对应的框架或控件完成更合适。

 

jQuery有子选择器、容器选择器和特性选择器三类选择器，可以嵌套使用

 

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

E#idvalue 　匹配id为指定的idvalue的元素E

E［A］　　  匹配带有特性A的所有元素E

-----------------------------------------------------------------------------------

 

jQuery的位置选择器

jQuery支持更高级的位置选择器：根据在DOM里的位置来选择元素

-------------------------------------------------------------------------------------

选择器                                                                            描述

--------------------------------------------------------------------------------------

:first　　　　第一个匹配项。li a:first返回第一个在<li>中的超链接对象

:last　　　　最后一个匹配项。 li a:last返回最后一个在<li>中的超链接对象

:first-child   第一个子元素。 li:first-child返回每个列表的第一个<li>子元素（第一个li对象）

:last-child   最后一个子元素。li:last-child返回每个列表的最后一个<li>子元素（最后一个li对象）

:only-child  返回没有兄弟节点的所有对应元素。ul:only-child返回没有兄弟节点的<ul>元素

:nth-child(n)   返回第n个子节点（n从1开始计数）。li:nth-child(2)返回每个列表的第2个<li>项

:nth-child(even|odd) 返回偶数或奇数的子节点（从1开始计数）。li:nth-child(even)返回每个列表中的偶数<li>项

:nth-child(Xn+Y)  根据传入的公式计算的第n个子节点。如果Y为0，则忽略Y。n从0开始，且X不等于0。li:nth-child(3n)返回序号是3的倍数的<li>项，而li:nth-child(5n+1)则返回序号是5的倍数加1的<li>项

:even或:odd  返回页面内的偶数或奇数的匹配元素。如li:even返回全部偶数<li>项，注意，序号计算是按整页内来计数的。

:eq(n)        返回第n个匹配的元素（n从0开始计数）

:gt(n)        返回第n个匹配元素之后的元素（n从0开始计数，不包括第n个元素）

:lt(n)         返回第n个匹配元素之前的元素（n从0开始计数，不包括第n个元素）

-------------------------------------------------------------------------------------

 

jQuery自定义筛选选择器

-----------------------------------------------------------------------------------------------------

选择器  　　　　　　　　　　　　　　　　　　　　　　　　描述

------------------------------------------------------------------------------------------------------

:animated　　　　选择当前处于动态控制之下的元素。

:button　　　　　选择任何按钮

:checkbox　　　　选择任何复选框元素

:checked　　　　 选择任何已选中的复选框元素或单选按钮

:contains(foo)　  选择包含文本foo的元素

:disabled　　　　选择在界面上已经禁用的表单元素

:enabled　　　　选择在界面上已经启用的表单元素

:file　　　　　　选择所有文件元素（input[type=file])

:header　　　　选择标题元素（包括<h1>、<h2>直到<h6>）

:hidden　　　　选择隐藏元素

:image　　　　选择表单中的图像元素

:input　　　　选择表单元素（包括：<input>, <select>, <textarea>,<button>）

:not(filter)　　根据指定筛选器进行求反后得到的元素

:parent　　　　选择在拥有后代节点的元素

:password　　选择口令元素

:radio　　　　选择单选按钮元素

:reset　　　　选择复位元素

:selected　　　　选择已选中的选项元素

:submit　　　　选择提交按钮

:text　　　　选择文本字段元素

:visible　　　　选择可见元素

----------------------------------------------------------------------------------------------------------

 

jQuery中有两个有用的自定义选择符:odd和:even。如以下代码可以设置表格的奇、偶数行有不同的风格：

$(document).ready(functioin() {

　　$("tr:odd").addClass("oddstyle");

　　$("tr:even").addClass("evenstyle");

});

其中，tr:odd则选中表中的所有奇数行，然后添加样式oddstyle；tr:even则选中表中的所有偶数行，然后添加样式evenstyle。当然oddstyle这样式和evenstyle样式必须先在css文件中定义出来。

 

contains选择符

contains选择符是指对象中包括指定内容的对象本身，如:$('td:contains("abcd")').addClass('highlight');则是找到所有包含“abcd”这样内容的单元格，设置这些单元格的样式类型添加“highlight”类。