JQuery基本选择器

 
 

$('#divMid').css('display', 'block')：设置id为'divMid'的层可见

$('div span').css('display', 'block')：设置id为'divMid'的层里面的所有span元素可见，无论有几级嵌套

$('div>span').css('display', 'block')：设置id为'divMid'的层里面的第一级span元素可见，此span元素里面的span元素不可见

$('#divMid+div').css('display','block')：设置id为'divMid'的层后面的第一个div可见

$('#divMid+span').css('display', 'block')：设置id为'divMid'的层后面的第一个span可见

$('#divMid').next().css('display','block'):设置id为'divMid'的层后面的第一个元素可见,无论是什么元素

$('#divMid').nextAll().css('display', 'block')：设置id为'divMid'的层后面的所有元素可见，无论是什么元素，必须与divMid平级，平级元素里面的嵌套元素不可见

$('#divMid~div').css('display', 'block')：设置id为'divMid'的层后面的所有div元素可见，必须是平级的。

$('#divMid~span').css('display','block');：设置id为'divMid'的层后面的所有span元素可见，必须是平级的。

$('#divMid').css('display', 'block')：设置id为'divMid'的层可见

$('div span').css('display', 'block')：设置id为'divMid'的层里面的所有span元素可见，无论有几级嵌套

$('div>span').css('display', 'block')：设置id为'divMid'的层里面的第一级span元素可见，此span元素里面的span元素不可见

$('#divMid+div').css('display','block')：设置id为'divMid'的层后面的第一个div可见

$('#divMid+span').css('display', 'block')：设置id为'divMid'的层后面的第一个span可见

$('#divMid').next().css('display','block'):设置id为'divMid'的层后面的第一个元素可见,无论是什么元素

$('#divMid').nextAll().css('display', 'block')：设置id为'divMid'的层后面的所有元素可见，无论是什么元素，必须与divMid平级，平级元素里面的嵌套元素不可见

$('#divMid~div').css('display', 'block')：设置id为'divMid'的层后面的所有div元素可见，必须是平级的。

$('#divMid~span').css('display','block');：设置id为'divMid'的层后面的所有span元素可见，必须是平级的。

 

选择器 描述

*　　 匹配任何元素

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 1. a[href^=http://]  :  以http://开头的A标签

2 2. input[type=text]  :  所有<input type="text" />的元素

3 3. div[title^=my]  :  匹配title属性以my开头的所有div元素

4 4. a[href$=.pdf] : 匹配引用PDF文件链接的所有a标签

5 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])