过滤选择器主要是通过特定的过滤规则来筛选出所需的
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功能——可见性过滤选择器。这些选择器允许我们根据元素的可见状态来选取DOM中的节点,从而实现更加精细化的操作。 首先,jQuery提供了两种主要的可见性过滤选择器:`:visible` ...
### jQuery选择器与过滤器深度解析 在前端开发领域,jQuery因其简洁的语法和强大的功能,长期以来备受开发者青睐。其中,选择器与过滤器作为jQuery的核心功能之一,为DOM操作提供了极大的灵活性和便利性。本文将对...
过滤选择器则帮助我们进一步细化选取结果,例如: 1. **`:first`和`:last`**: 选取第一个或最后一个元素。 2. **`:even`和`:odd`**: 选取索引偶数或奇数的元素。 3. **`:not(selector)`**: 排除匹配指定选择器的...
选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景,熟悉并...
jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...
**jQuery过滤器插件fastLiveFilter详解** 在前端开发中,数据过滤是一个常见的需求,用于在用户输入时实时筛选和展示列表中的匹配项。jQuery快速过滤器插件fastLiveFilter正是为了解决这一问题而设计的。这个轻量级...
**jQuery内容过滤器插件详解** 在Web开发中,用户界面的交互性和用户体验至关重要。jQuery作为一款强大的JavaScript库,提供了丰富的API和插件,帮助开发者实现各种动态效果和功能。"jQuery超实用内容过滤器插件...
在本项目中,"jQuery过滤器图片浏览.rar_average91i_jQuery过滤器图片浏览" 提供了一个使用jQuery实现的图片浏览和过滤效果。这个功能主要用于网页中的图像展示,允许用户根据特定条件筛选和切换图片,提升用户体验...
6. **过滤选择器**: 用于从已选集进一步筛选元素,如`:visible`(可见元素)、`:hidden`(隐藏元素)和`:not(selector)`(排除指定选择器匹配的元素)。例如,`$("input[type='text']:visible")`选取所有可见的文本...
jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号(:)开头。按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性...
基本选择器是学习jQuery选择器的基石,涵盖了ID选择器、Class选择器、Element选择器及通配符选择器。 1. **ID选择器**:`#id`,用于定位具有特定ID的单一元素,如`$('#one')`会选中ID为“one”的元素,常用于修改该...
在本讲中,我们将深入探讨jQuery的选择器和过滤器,这些工具是jQuery强大功能的核心部分。 首先,jQuery选择器是用于选取HTML元素的关键机制。它们借鉴了CSS选择器的语法,并在此基础上扩展了一些额外的功能,使得...
本文将对JQuery中属性过滤选择器的用法进行实例分析,帮助理解各种属性过滤选择器的实际应用。 1. 包含特定属性的选择器 使用`[attribute]`形式可以匹配所有包含给定属性的元素。例如,选择所有带有`id`属性的`div`...
基本选择器是jQuery中最常用的,它们通过元素的id、class和标签名来选取元素。 - **id选择器**:通过元素的id来选取,用`#`前缀标识。例如`$('#testID')`选取id为`testID`的元素。 - **类选择器**:通过元素的class...
本文将详细介绍几种常用的jQuery内容过滤选择器,包括:contains()、:has()、:empty()以及:parent。 1. :contains()选择器:这个选择器能够帮助我们选择包含指定文本的所有元素。它非常适合在需要找到包含特定词或...
7. **过滤器方法**:jQuery还提供了许多过滤方法,如`first()`, `last()`, `eq(index)`, `not(selector)`, `has(selector)`等,用于进一步筛选结果集。 理解并熟练运用jQuery选择器是提升JavaScript开发效率的关键...
基本选择器是jQuery中最常用的类型之一,它们提供了简单的DOM元素选择方式。通过这些选择器,开发者可以快速定位到页面中的特定元素。 **代码示例与返回值:** 1. **根据给定的ID匹配一个元素** - **选择器:** `#...