文档章节

jQuery选择器之过滤选择器

指尖跳动的精灵
 指尖跳动的精灵
发布于 2015/03/01 17:05
字数 1998
阅读 92
收藏 6

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,及选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

  1. 基本过滤选择器


    选择器
    描述 返回 示例
    :first 选取第一个元素 单个元素 $("div:first")选取所有<div>
    元素中第一个<div>元素
    :last 选取最后一个元素 单个元素 $("div:last")选取所有<div>
    元素中最后一个<div>元素
    :not
    去除所有与给定选择器匹配的元素 集合元素 $("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>元素
    :focus 选取当前获取焦点的元素 集合元素 $(":focus")选取当前获取焦
    点的元素
  2. 内容过滤选择器

    选择器 描述 返回 示例
    :contains(text) 选取含有文本内容为“text”的元素 集合元素 $("div:contains('我')")选取含有
    文本'我'的<div>元素
    :empty 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")选取不包含子元素
    (包括文本元素)的<div>空元素
    :parent 选取含有子元素或者文本的元素 集合元素 $("div:parent")选取拥有子元素
    (包括文本元素)
    :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)")选取含有<p>元素
    的<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>元素
    [attribute|=value] 选取属性等于给定字符串或以该字符串
    为前缀(该字符串后跟一个连字符"-")的元素
    集合元素 $("div[title|='en']")选取属性
    title等于en或以en为前缀
    (该字符串后跟一个连字符'-')
    的元素
    [attribute~=value]
    选取属性用空格分隔的值中包含一个
    给定值的元素
    集合元素 $("div[title~='uk']")选取属性
    title用空格分割的值中包含字
    符串uk的元素
    [attribute1][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器,
    满足多个条件。每选择一次,缩小一次范围
    集合元素 $("div[id][title$='test']")选取
    拥有属性id,并且
    属性title以"test"结束的<div>元素
  5. 子元素过滤选择器

    子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂,不过没关系,只要将元素的父元素和子元素区分清楚,那么使用起来也非常简单。

    选择器 描述 返回 示例
    :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子
    元素或者奇偶元素。(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>元素

    :nth-child()选取器是很常用的子元素过滤选择器,详细功能如下:

    (1):nth-child(even)能选取每个父元素下的索引值是偶数的元素

    (2):nth-child(odd)能选取每个父元素下索引值是奇数的元素

    (3):nth-child(2)能选取每个父元素下的索引值等于2的元素

    (4):nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素,(n从1开始)

    (5):nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。(n从1开始)

  6. 表单属性过滤选择器

    此选择器主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素。

    选择器 描述 返回 示例
    :enabled 选取所有可用的元素 集合元素 $("#form1 :enabled")选取id为"form1"的表单内所有可用元素
    :disabled 选取所有不可用的元素
    集合元素 $("#form1 :disabled")选取id为"form1"的表单内所有不可用元素
    :checked 选取所有被选中的元素(单选框,复选框) 集合元素 $("input:checked")选取所有被选中的<input>元素
    :selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("select option:selected")选取所有被选中的选项元素



© 著作权归作者所有

指尖跳动的精灵
粉丝 16
博文 90
码字总数 48459
作品 0
海淀
私信 提问
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
2018/08/03
0
0
JQuery 选择器与过滤器(随手笔记)

一、表单选择器 虽然可以使用常规的选择器来对表单的元素进行定位,但还是不能满足多变的需求,所以这里我们一起来学习一下JQuery表单选择器。 例如: 二、表单过滤器 JQuery提供了四种表单过...

Red_Ant_hoyl
2018/07/25
0
0
jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]

jQuery学习笔记之JavaScript脚本库和元素选择器研究[图] jQuery是一套JavaScript脚本库,相当于Java的类库,将一些工具方法或者对象方法封装在类库中,方便用户使用。 工厂函数指的是这些内建...

原创小博客
2018/08/06
0
0
回味jQuery系列(1)-选择器

jQuery-选择器浅析 jQuery 最核心的组成部分就是:选择器引擎,选择器引擎Sizzle占了jQuery很大一部分。它继承了CSS 的语法,可以对DOM 元素的标签名、属性名、状态等进行快速准确的选择,并...

xzavier
2018/08/27
0
0
jQuery过滤选择器:not()方法

jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如 and 那么除了class等于a的p元素外,其他的P的文...

^6^|^6^
2011/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部