选择所有正在进行动画的div标签:$(div:animated)
内容过滤
<div>text(选中)</div>
<div>xxx(非选中)</div>
选择含“text”文字的div元素:$(div:contains( text ))
<!-- 选中 -->
<div></div>
选择不含文字或者元素的div:$(div:empty)
<!-- 选中 -->
<div>111</div>
选择含文字或者元素的div:$(div:parent)
<!-- 选中 -->
<div>
<p></p>
</div>
选择含有某特性的div元素(与not相反):$(div:has(p))
可见性过滤
<div style=display:none;>选中</div>
选择所有隐藏的元素:$(div:hidden)
<div>选中</div>
选择所有可见的元素:$(div:visible)
属性过滤
<div id=id>选中</div>
选择含有id的div元素:$(div[id])
<div title=test>选中</div>
选择title是test的div:$(div[title=test])
<div title=aaa>选中</div>
选择title不是test的div:$(div[title!=test])
<div title=test1>选中</div>
<div title=test2>选中</div>
选择title属性值以test开头的div:$(div[title^=test])
<div title=Atest>选中</div>
<div title=Btest>选中</div>
选择title元素以test结尾的div:$(div[title$=test])
<div title=AtestB>选中</div>
<div title=Btest>选中</div>
选择title元素中包含test的div:$(div[title*=test])
<div title=test id=id>选中</div>
<div title=test>非选中</div>
混合选择属性:$(div[id=id][title=test])
子元素过滤
批量选择class是aaa的元素的所有第2个元素:$(.aaa:nth-child(2))
批量选择class是aaa的元素的所有偶数项元素:$(.aaa:nth-child(even))
批量选择class是aaa的元素的所有奇数项元素:$(.aaa:nth-child(odd))
选择选择class是aaa的元素的0,3,6,9``元素:$(.aaa:nth-child(3n))
选择选择class是aaa的元素的1,4,7,10``元素:$(.aaa:nth-child(3n+1))
选择所有ul的第一个li:$(ul li:first-child)
选择所有ul的最后一个li:$(ul li:last-child)
选择所有ul仅含一个li的子元素:$(ul li:only-child)
表单对象属性过滤
选择所有可用的div元素:$(div:enabled)
选择所有不可用的div:$(div:disabled)
选择所有被选中的单选或复选框:$(input:checked)
选择被选中的下拉列表:$(select:selected)
表单选择器
选择所有的input:$(:input)
选择所有的单行文本框:$(:text)
选择所有密码框:$(:password)
选择所有的单选框:$(:radio)
选择所有的多选框:$(:checkbox)
选择所有的提交按钮$(:submit)
选择所有的图像按钮$(:image)
选择所有的重置按钮$(:reset)
选择所有的按钮:$(:button)
选择所有的上传域:$(:file)
选择所有不可见的元素:$(:hidden)
补充
jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript的dom。
一般选择器
1).基本选择器
·#id 根据给定的ID匹配一个元素。例如:$(#id)
·element 根据给定的元素名匹配所有元素。例如:$(div)
·.class 根据给定的类匹配元素。例如:$(.style1);
·* 匹配所有元素。例如:$(*)
·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如:$(#id,div,.style1)
2).表单选择器
·:button 匹配所有按钮。例如:$(:button)
·:checkbox 匹配所有复选框。例如:$(:checkbox)
·:file 匹配所有文件域。例如:$(:file)
·:hidden 匹配所有不可见元素,或者type为hidden的元素。例如:$(input:hidden)
·:image 匹配所有图像域。例如:$(:image)
·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(:input)
·:password 匹配所有密码框。例如:$(:password)
·:radio 匹配所有单选按钮。例如:$(:radio)
·:reset 匹配所有重置按钮。例如:$(:reset)
·:submit 匹配所有提交按钮。例如:$(:submit)
·:text 匹配所有的单行文本框。例如:$(:text)
·:header 匹配如 h1, h2, h3之类的标题元素。例如:$(:header).css(background, #EEE);
2.筛选条件选择器
1).jQuery属性选择器
·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如:$(input[name*=man)
·[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。例如:$(input[name!=man);
·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如:$(input[name$=man])
·[attribute=value] 匹配给定的属性是某个特定值的元素。例如:$(input[name=man]);
·[attribute] 匹配包含给定属性的元素。例如:$(div[id])
·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如:$(input[name^=man])
·[selector1][selector2][selectorN] 同时满足多个条件。例如:$(input[id][name$=man])
·:hidden 匹配所有的不可见元素。例如:$(tr:hidden)
·:visible 匹配所有的可见元素。例如:$(tr:visible)
·:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。例如:$(input:checked)
·:disabled 匹配所有不可用元素。例如:$(input:disabled)
·:enabled 匹配所有可用元素。例如:$(input:enabled)
·:selected 匹配所有选中的option元素。例如:$(select option:selected)
2).jQuery内容选择器
·:contains(text) 匹配包含给定文本的元素。例如:$(div:contains(John))
·:empty 匹配所有不包含子元素或者文本的空元素。例如:$(td:empty)
·:has(selector) 匹配含有选择器所匹配的元素的元素。例如:$(div:has(p));
·:parent 匹配含有子元素或者文本的元素。例如:$(td:parent)
3).jQuery层级选择器
·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如:$(form input)
·parent > child 在给定的父元素下匹配所有的子元素。例如:$(form > input)
·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如:$(label + input)
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如:$(form ~ input)
·:first-child 匹配第一个子元素。例如:$(ul li:first-child)
·:last-child 匹配最后一个子元素。例如:$(ul li:last-child)
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如:$(ul li:nth-child(2))
·:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配。例如:$(ul li:only-child)
4).jQuery方法选择器
·:animated 匹配所有正在执行动画效果的元素。例如:$(div:animated);
·:eq(index) 匹配一个给定索引值的元素。例如:$(tr:eq(1))
·:even 匹配所有索引值为偶数的元素,从 0 开始计数。例如:$(tr:even)
·:first 匹配找到的第一个元素。例如:$(tr:first)
·:gt(index) 匹配所有大于给定索引值的元素,从 0 开始计数。例如:$(tr:gt(0))
·:last 匹配找到的最后一个元素。例如:$(tr:last)
·:lt(index) 匹配所有小于给定索引值的元素。例如:$(tr:lt(2))
·:not(selector) 去除所有与给定选择器匹配的元素。例如:$(input:not(:checked))
·:odd 匹配所有索引值为奇数的元素,从 0 开始计数。例如:$(tr:odd)
看下面这张表格:
选择器 | 实例 | 选取 |
---|
* | $(*) | 所有元素 |
#id | $(#lastname) | id=lastname 的元素 |
.class | $(.intro) | 所有 class=intro 的元素 |
element | $(p) | 所有 <p> 元素 |
.class.class | $(.intro.demo) | 所有 class=intro 且 class=demo 的元素 |
| | |
:first | $(p:first) | 第一个 <p> 元素 |
:last | $(p:last) | 最后一个 <p> 元素 |
:even | $(tr:even) | 所有偶数 <tr> 元素 |
:odd | $(tr:odd) | 所有奇数 <tr> 元素 |
| | |
:eq(index) | $(ul li:eq(3)) | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $(ul li:gt(3)) | 列出 index 大于 3 的元素 |
:lt(no) | $(ul li:lt(3)) | 列出 index 小于 3 的元素 |
:not(selector) | $(input:not(:empty)) | 所有不为空的 input 元素 |
| | |
:header | $(:header) | 所有标题元素 <h1> - <h6> |
:animated | | 所有动画元素 |
| | |
:contains(text) | $(:contains(W3School)) | 包含指定字符串的所有元素 |
:empty | $(:empty) | 无子(元素)节点的所有元素 |
:hidden | $(p:hidden) | 所有隐藏的 <p> 元素 |
:visible | $(table:visible) | 所有可见的表格 |
| | |
s1,s2,s3 | $(th,td,.intro) | 所有带有匹配选择的元素 |
| | |
[attribute] | $([href]) | 所有带有 href 属性的元素 |
[attribute=value] | $([href=#]) | 所有 href 属性的值等于 # 的元素 |
[attribute!=value] | $([href!=#]) | 所有 href 属性的值不等于 # 的元素 |
[attribute$=value] | $([href$=.jpg]) | 所有 href 属性的值包含以 .jpg 结尾的元素 |
| | |
:input | $(:input) | 所有 <input> 元素 |
:text | $(:text) | 所有 type=text 的 <input> 元素 |
:password | $(:password) | 所有 type=password 的 <input> 元素 |
:radio | $(:radio) | 所有 type=radio 的 <input> 元素 |
:checkbox | $(:checkbox) | 所有 type=checkbox 的 <input> 元素 |
:submit | $(:submit) | 所有 type=submit 的 <input> 元素 |
:reset | $(:reset) | 所有 type=reset 的 <input> 元素 |
:button | $(:button) | 所有 type=button 的 <input> 元素 |
:image | $(:image) | 所有 type=image 的 <input> 元素 |
:file | $(:file) | 所有 type=file 的 <input> 元素 |
| | |
:enabled | $(:enabled) | 所有激活的 input 元素 |
:disabled | $(:disabled) | 所有禁用的 input 元素 |
:selected | $(:selected) | 所有被选取的 input 元素 |
:checked | $(:checked) | 所有被选中的 input 元素 |
选择器大全
jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
$(#myELement) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$(div) 选择所有的div标签元素,返回div元素数组
$(.myClass) 选择使用myClass类的css的所有元素
$(*) 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$(#myELement,div,.myclass)
层叠选择器:
$(form input) 选择所有的form元素中的input元素
$(#main > *) 选择id值为main的所有的子元素
$(label + input) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$(#prev ~ div) 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器:
$(tr:first) 选择所有tr元素的第一个
$(tr:last) 选择所有tr元素的最后一个
$(input:not(:checked) + span)
过滤掉:checked的选择器的所有的input元素
$(tr:even) 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$(tr:odd) 选择所有的tr元素的第1,3,5... ...个元素
$(td:eq(2)) 选择所有的td元素中序号为2的那个td元素
$(td:gt(4)) 选择td元素中序号大于4的所有td元素
$(td:ll(4)) 选择td元素中序号小于4的所有的td元素
$(:header)
$(div:animated)
内容过滤选择器:
$(div:contains(John)) 选择所有div中含有John文本的元素
$(td:empty) 选择所有的为空(也不包括文本节点)的td元素的数组
$(div:has(p)) 选择所有含有p标签的div元素
$(td:parent) 选择所有的以td为父节点的元素数组
可视化过滤选择器:
$(div:hidden) 选择所有的被hidden的div元素
$(div:visible) 选择所有的可视化的div元素
属性过滤选择器:
$(div[id]) 选择所有含有id属性的div元素
$(input[name=newsletter]) 选择所有的name属性等于newsletter的input元素
$(input[name!=newsletter]) 选择所有的name属性不等于newsletter的input元素
$(input[name^=news]) 选择所有的name属性以news开头的input元素
$(input[name$=news]) 选择所有的name属性以news结尾的input元素
$(input[name*=man]) 选择所有的name属性包含news的input元素
$(input[id][name$=man]) 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器:
$(ul li:nth-child(2)),$(ul li:nth-child(odd)),$(ul li:nth-child(3n + 1))
$(div span:first-child) 返回所有的div元素的第一个子节点的数组
$(div span:last-child) 返回所有的div元素的最后一个节点的数组
$(div button:only-child) 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器:
$(:input) 选择所有的表单输入元素,包括input, textarea, select 和 button
$(:text) 选择所有的text input元素
$(:password) 选择所有的password input元素
$(:radio) 选择所有的radio input元素
$(:checkbox) 选择所有的checkbox input元素
$(:submit) 选择所有的submit input元素
$(:image) 选择所有的image input元素
$(:reset) 选择所有的reset input元素
$(:button) 选择所有的button input元素
$(:file) 选择所有的file input元素
$(:hidden) 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器:
$(:enabled) 选择所有的可操作的表单元素
$(:disabled) 选择所有的不可操作的表单元素
$(:checked) 选择所有的被checked的表单元素
$(select option:selected) 选择所有的select 的子元素中被selected的元素
选取一个name为”S_03_22″的input text框的上一个td的text值
$(”input[@name=S_03_22]“).parent().prev().text()
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@name^=S_]“).not(”[@name$=_R]“)
一个名为radio_01的radio所选的值
$(”input[@name=radio_01][@checked]“).val();
$(A B) 查找A元素下面的所有子节点,包括非直接子节点
$(A>B) 查找A元素下面的直接子节点
$(A+B) 查找A元素后面的兄弟节点,包括非直接子节点
$(A~B) 查找A元素后面的兄弟节点,不包括非直接子节点
1. $(A B) 查找A元素下面的所有子节点,包括非直接子节点
例子:找到表单中所有的 input 元素
HTML 代码: