`
mfan
  • 浏览: 340860 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

jQuery常用过滤器选择器

阅读更多

 

过滤选择器主要是通过特定的过滤规则来筛选出所需的 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基本过滤选择器

    jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇

    jquery可见性过滤选择器使用示例

    今天我们将深入探讨一个特定的jQuery功能——可见性过滤选择器。这些选择器允许我们根据元素的可见状态来选取DOM中的节点,从而实现更加精细化的操作。 首先,jQuery提供了两种主要的可见性过滤选择器:`:visible` ...

    jQuery选择器-过滤器总结

    ### jQuery选择器与过滤器深度解析 在前端开发领域,jQuery因其简洁的语法和强大的功能,长期以来备受开发者青睐。其中,选择器与过滤器作为jQuery的核心功能之一,为DOM操作提供了极大的灵活性和便利性。本文将对...

    jQuery基础选择器练习题

    过滤选择器则帮助我们进一步细化选取结果,例如: 1. **`:first`和`:last`**: 选取第一个或最后一个元素。 2. **`:even`和`:odd`**: 选取索引偶数或奇数的元素。 3. **`:not(selector)`**: 排除匹配指定选择器的...

    jQuery选择器全解.

    选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景,熟悉并...

    PPT和案例\jQuery选择器

    jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...

    jQuery过滤器插件fastLiveFilter.zip

    **jQuery过滤器插件fastLiveFilter详解** 在前端开发中,数据过滤是一个常见的需求,用于在用户输入时实时筛选和展示列表中的匹配项。jQuery快速过滤器插件fastLiveFilter正是为了解决这一问题而设计的。这个轻量级...

    jQuery超实用内容过滤器插件

    **jQuery内容过滤器插件详解** 在Web开发中,用户界面的交互性和用户体验至关重要。jQuery作为一款强大的JavaScript库,提供了丰富的API和插件,帮助开发者实现各种动态效果和功能。"jQuery超实用内容过滤器插件...

    jQuery过滤器图片浏览.rar_average91i_jQuery过滤器图片浏览

    在本项目中,"jQuery过滤器图片浏览.rar_average91i_jQuery过滤器图片浏览" 提供了一个使用jQuery实现的图片浏览和过滤效果。这个功能主要用于网页中的图像展示,允许用户根据特定条件筛选和切换图片,提升用户体验...

    jquery 动态选择器

    6. **过滤选择器**: 用于从已选集进一步筛选元素,如`:visible`(可见元素)、`:hidden`(隐藏元素)和`:not(selector)`(排除指定选择器匹配的元素)。例如,`$("input[type='text']:visible")`选取所有可见的文本...

    jQuery选择器之基本过滤选择器用法实例分析

    jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号(:)开头。按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性...

    jQuery选择器大全

    基本选择器是学习jQuery选择器的基石,涵盖了ID选择器、Class选择器、Element选择器及通配符选择器。 1. **ID选择器**:`#id`,用于定位具有特定ID的单一元素,如`$('#one')`会选中ID为“one”的元素,常用于修改该...

    03-jQuery选择器和过滤器(20220302).ppt

    在本讲中,我们将深入探讨jQuery的选择器和过滤器,这些工具是jQuery强大功能的核心部分。 首先,jQuery选择器是用于选取HTML元素的关键机制。它们借鉴了CSS选择器的语法,并在此基础上扩展了一些额外的功能,使得...

    JQuery中属性过滤选择器用法实例分析

    本文将对JQuery中属性过滤选择器的用法进行实例分析,帮助理解各种属性过滤选择器的实际应用。 1. 包含特定属性的选择器 使用`[attribute]`形式可以匹配所有包含给定属性的元素。例如,选择所有带有`id`属性的`div`...

    jQuery选择器速查表

    基本选择器是jQuery中最常用的,它们通过元素的id、class和标签名来选取元素。 - **id选择器**:通过元素的id来选取,用`#`前缀标识。例如`$('#testID')`选取id为`testID`的元素。 - **类选择器**:通过元素的class...

    jQuery内容过滤选择器用法分析

    本文将详细介绍几种常用的jQuery内容过滤选择器,包括:contains()、:has()、:empty()以及:parent。 1. :contains()选择器:这个选择器能够帮助我们选择包含指定文本的所有元素。它非常适合在需要找到包含特定词或...

    jQuery选择器.rar

    7. **过滤器方法**:jQuery还提供了许多过滤方法,如`first()`, `last()`, `eq(index)`, `not(selector)`, `has(selector)`等,用于进一步筛选结果集。 理解并熟练运用jQuery选择器是提升JavaScript开发效率的关键...

    Jquery 选择器整理

    基本选择器是jQuery中最常用的类型之一,它们提供了简单的DOM元素选择方式。通过这些选择器,开发者可以快速定位到页面中的特定元素。 **代码示例与返回值:** 1. **根据给定的ID匹配一个元素** - **选择器:** `#...

Global site tag (gtag.js) - Google Analytics