过滤选择器主要是通过特定的过滤规则来筛选出所需的
DOM
元素,过滤规则与
CSS
中的伪类选择器语法相同,即选择器都可以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤选择器,内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
1.
基本过滤选择器
选择器
|
描述
|
返回
|
示例
|
:first
|
选取第一个元素
|
单个元素
|
$(“div:first”)
选取所有
<div>
元素中第一个
<div>
元素
|
:last
|
选取最后一个元素
|
单个元素
|
$(“div:last”)
选取所有
<div>
元素中最后一个
<div>
元素
|
:not(selector)
|
去除所有与给定选择器匹配的元素
|
集合元素
|
$(“input:not(.myClass)”)
选取
class
不是
myClass
的
<input>
元素
|
:even
|
选取索引是偶数的所有元素,索引从
0
开始
|
集合元素
|
$(“input:even”)
选取索引是偶数的
<input>
元素
|
:odd
|
选取索引是奇数的所有元素,索引从
0
开始
|
集合元素
|
$(“input:odd”)
选取索引是奇数的
<input>
元素
|
:eq(index)
|
选取索引等于
index
的元素(
index
从
0
开始)
|
集合元素
|
$(“input:eq(1)”)
选取索引等于
1
的
<input>
元素
|
:gt(index)
|
选取索引大于
index
的元素(
index
从
0
开始)
|
集合元素
|
$(“input:gt(1)”)
选取索引大于
1
的
<input>
元素(注:大于
1
,而不包括
1
)
|
:lt(index)
|
选取索引小于
index
的元素(
index
从
0
开始)
|
集合元素
|
$(“input:lt(1)”)
选取索引小于
1
的
<input>
元素(注:小于
1
,而不包括
1
)
|
:header
|
选取所有的标题元素,例如
h1,h2,h3
等等
|
集合元素
|
$(“:header”)
选取网页中所有的
<h1>
,
<h2>
,
<h3>
……
|
:animated
|
选取当前正在执行动画的所有元素
|
集合元素
|
$(“div:animated”)
选取当前正在执行动画的
<div>
元素
|
2
.内容过滤选择器
选择器
|
描述
|
返回
|
示例
|
:contains(text)
|
选取含有文本内容为“
text
”的元素
|
集合元素
|
$(“div:contains(‘
我
”)”)
选取含有文本“我”的
<div>
元素
|
:empty
|
选取不包含子元素或者文本的空元素
|
元素集合
|
$(“div:empty”)
选取不包含子元素(包括文本元素)的
<div>
元素
|
:has(selector)
|
选取含有选择器所匹配的元素的元素
|
元素集合
|
$(“div:has(p)”)
选取含有
<p>
元素的
<div>
|
:parent
|
选取含有子元素或者文本的元素
|
元素集合
|
$(“div:parent”)
选取拥有子元素(包括文本元素)的
<div>
|
3
.可见性过滤选择器
选择器
|
描述
|
返回
|
示例
|
:hidden
|
选取所有不可见的元素
|
集合元素
|
$(“:hidden”)
选取所有不可见的元素,包括
<input type=”hidden”/>
,
<div style=”display:none;”>
和
<div
style=”visibility:hidden;”>
等元素,如果只想选取
<input>
元素,可以使用
$(“input:hidden”)
|
:visible
|
选取所有可见元素
|
集合元素
|
$(“div:visible”)
选取所有可见的
<div>
|
4
.属性过滤选择器
选择器
|
描述
|
返回
|
示例
|
[attribute]
|
选取拥有此属性的元素
|
集合元素
|
$(“div[id]”)
选取拥有属性
id
的元素
|
[attribute=value]
|
选取属性的值为
value
的元素
|
集合元素
|
$(“div[title=test]”)
选取属性
title
为“
test
”的
<div>
元素
|
[attribute!=value]
|
选取属性的值不等于
value
的元素
|
集合元素
|
$(“div[title!=test]”)
选取属性
title
不等于“
test
”的
<div>
元素(注:没有属性
title
的
<div>
元素也会被选取)
|
[attribute^=value]
|
选取属性的值以
value
开始的元素
|
集合元素
|
$(“div[title^=test]”)
选取属性
title
以“
test
”开头的
<div>
元素
|
[attribute$=value]
|
选取属性的值以
value
结尾的元素
|
集合元素
|
$(“div[title$=test]”)
选取属性
title
以“
test
”结束的
<div>
元素
|
[attribute*=value]
|
选取属性的值含有
value
的元素
|
集合元素
|
$(“div[title$=test]”)
选取属性
title
含有“
test
”的
<div>
元素
|
[selector1][selector2][selector]
|
用属性选择器合并成一个复合的属性选择器,满足多个条件。没选取一次,缩小一次范围
|
集合元素
|
$(“div[id][title$=’test’]”)
选取拥有属性
id
,并且属性
title
以“
test
”结束的
<div>
元素
|
5
.子元素过滤选择器
选择器
|
描述
|
返回
|
示例
|
:nth-child
(index/even/odd/equation)
|
选取每个父元素下的第
index
个子元素或者奇(
odd
)偶(
even
)元素,(
index
从
1
开始)
|
集合元素
|
:eq(index)
只匹配一个元素,而
:nth-child
将为每一个父元素匹配子元素,并且
:nth-child(index)
的
index
是从
1
开始的,而
:eq(index)
是从
0
开始的
|
:first-child
|
选取每个父元素的第一个子元素
|
集合元素
|
:first
只返回单个元素,而
:first-child
将为每个父元素匹配第一个子元素。
例如:
$(“ul li:first-child”)
选取每个
<ul>
中第一个
<li>
元素
|
:last-child
|
选取父元素的最后一个子元素
|
集合元素
|
:last
只返回单个元素,而
:last-child
将为每个父元素匹配最后一个子元素。
例如:
$(“ul li:last-child”)
选取每个
<ul>
中最后一个
<li>
元素
|
:only-child
|
如果某个元素的它父亲中唯一的子元素,那么将会被匹配,如果父元素中含有其他元素,则不会被匹配
|
集合元素
|
$(“ul
li:only-child”)
在
<ul>
中选取是唯一子元素的
<li>
元素
|
6
.表单对象属性过滤选择器
选择器
|
描述
|
返回
|
示例
|
:enabled
|
选取所有可用元素
|
集合元素
|
$(“#form1 :enabled”)
选取
id
为“
form1”
的表单中所有可用元素
|
:disabled
|
选取所有不可用元素
|
集合元素
|
$(“#form1 :disabled”)
选取
id
为“
form1”
的表单中所有不可用元素
|
:checked
|
选取所有被选中的元素(单选框,复选框)
|
集合元素
|
$(“input :checked”)
选取所有被选中的
<input>
元素
|
:selected
|
选取所有被选中的选项元素(下拉列表)
|
集合元素
|
$(“select :selected”)
选取所有被选中的选项元素
|
改变表单内可用
<input>
元素的值,代码如下:
$(“form1 input:enabled”).val(“
这里的值改变了
”);
获取多选框选中的个数,代码如下:
$(“input :
checked
”).length;
获取下拉框选中的内容,代码如下:
$(“select:selected”).text();
同理,其他对象属性选择器的操作与此类似
7
.表单对象属性过滤选择器
选择器
|
描述
|
返回
|
示例
|
:input
|
选取所有的
<input>,<textarea>,
<select>,<button>
元素
|
集合元素
|
$(“:input)
选取所有的
<input>,<textarea>,<select>,
<button>
元素
|
:text
|
选取所有的单行文本框
|
集合元素
|
$(“:text”)
选取所有的单行文本框
|
:password
|
选取所有的密码框
|
集合元素
|
$(“:password”)
选取所有的密码框
|
:radio
|
选取所有的单选框
|
集合元素
|
$(“:radio”)
选取所有的单选框
|
:checkbox
|
选取所有的多选框
|
集合元素
|
$(“:checkbox”)
选取所有的多选框
|
:submit
|
选取所有的提交按钮
|
集合元素
|
$(“:submit”)
选取所有的提交按钮
|
:image
|
选取所有的图形按钮
|
集合元素
|
$(“:image”)
选取所有的图形按钮
|
:reset
|
选取所有的重置按钮
|
集合元素
|
$(“:reset”)
选取所有的重置按钮
|
:button
|
选取所有的按钮
|
集合元素
|
$(“:button”)
选取所有的按钮
|
:file
|
选取所有的上传域
|
集合元素
|
$(“:file”)
选取所有的上传域
|
:hidden
|
选取所有的不可见元素
|
集合元素
|
$(“:hidden”)
选取所有的不可见元素
|
得到表单内表单元素的个数,代码如下:
$(“form1 :input”).length;
得到表单内单行文本的个数,代码如下:
$(“form1 :text”).length;
得到表单内密码框的个数,代码如下:
$(“form1 :password”).length;
同理,其他表单选择器的操作与此类似
分享到:
相关推荐
jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇
jquery可见性过滤选择器使用示例
jQuery选择器过滤器全面的总结,老师推荐!
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号(:)开头。按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性...
主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器,方便以后查找。
现在我们开始Jquery的选择器之旅哈哈。 下面的选择器分类中, 带有“过滤器”的分类表示是“过滤”选择器, 否则就是“选择”功能的选择器。 jQuery选择器分为如下几类: [说明]
简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:...
主要介绍了jQuery内容过滤选择器与子元素过滤选择器用法,结合实例形式分析了jQuery内容过滤选择器与子元素过滤选择器相关功能、原理及使用方法,需要的朋友可以参考下
主要介绍了jQuery内容过滤选择器用法,实例分析了:contains()、:has()、:empty()、:parent等内容过滤选择器的使用技巧,需要的朋友可以参考下
Jquery即时页面刷新选择器 示例 demo 实现table里面内容的即时刷新 ,上面有选择框,输入内容,下面的table里的内容即时过滤
本文实例讲述了jQuery过滤选择器用法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
主要介绍了JQuery选择器、过滤器大整理,经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了,需要的朋友可以参考下
03-jQuery选择器和过滤器(20220302).ppt
内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位,接下来为大家详细介绍下jQuery选择器,感兴趣的朋友可以参考下哈
JQuery原则:“write less, do more.”,这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化。老佟是一位非常有经验的软件教师,...