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”类。