详解强大的jQuery选择器之过滤选择器、表单选择器-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

详解强大的jQuery选择器之过滤选择器、表单选择器

简介:

前言

  上一篇文章(详解强大的jQuery选择器之基本选择器、层次选择器)介绍了jQuery四类选择器中的基本选择器、层次选择器,本文将介绍剩下的两种选择器:过滤选择器、表单选择器。

  本文仍使用上一篇文章中的示例页面。

一、过滤选择器

  过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同。

  按照不同的过滤规则,过滤选择器可以分为以下几种:

  1、基本过滤选择器

  2、内容过滤选择器

  3、可见性过滤选择器

  4、属性过滤选择器

  5、子元素过滤选择器

  6、表单对象属性过滤选择器

  下面就对这几种过滤选择器分别加以介绍。

1.1基本过滤选择器

  基本过滤选择器是过滤选择器中用的最多的一种,它的过滤规则主要体现在元素的位置(索引)上及一些特定的元素。

  基本过滤选择器规则:

基本过滤选择器
选 择 器 描 述 返 回 示 例
:first 选取第1个元素 单个元素 $("div:first")选取所有 <div>元素
中第一个<div>元素
:last 选取最后1个元素 单个元素 $("div:last")选取所有 <div>元素
中最后一个<div>元素
:not(selector) 去除所有与给定选择器
匹配的元素
集合元素 $("input:not(.myClass)")选取class不是
myClass的<input>元素
:even 选取索引(从0开始)是偶数
的所有元素
集合元素 $("input:even")选取索引是偶数的
<input>元素
:odd 选取索引(从0开始)是奇数
的所有元素
集合元素 $("input:odd")选取索引是奇数的
<input>元素
:eq(index) 选取索引(从0开始)等于
index的元素
单个元素 $("input:eq(1)")选取索引等于1的
<input>元素
:gt(index) 选取索引(从0开始)大于
index的元素
集合元素 $("input:gt(1)")选取索引大于1的
<input>元素
:lt(index) 选取索引(从0开始)小于
index的元素
集合元素 $("input:lt(1)")选取索引小于1的
<input>元素
:header 选取所有的标题元素,即
<h1>到<h6>
集合元素 $(":header")选取页面中所有的标题元素
:animated 选取当前正在执行动画的
所有元素
集合元素 $("div:animated")选取当前正在执行动画
的<div>元素

  示例:

1.2内容过滤选择器

  内容过滤选择器的过滤规则主要体现在它所含的子元素或文本内容上。

  内容过滤选择器规则:

内容过滤选择器
选 择 器 描 述 返 回 示 例
:contains(text) 选取含有文本内容为 text 的元素 集合元素 $("div:contains('test')")选取含有文本内容
为 test 的<div>元素
:empty 选取不包含子元素或文本的空元素 集合元素 $("div:empty")选取不包含子元素或文本
的空<div>元素
:has(selector) 选取含有给定选择器
匹配的元素的元素
集合元素 $("div:has(.myClass)")选取含有class为
myClass的元素的<div>元素
:parent 选取含有子元素或文本的元素 集合元素 $("div:parent")选取含有子元素或文本的
<div>元素

  示例:

1.3可见性过滤选择器

  可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

  可见性过滤选择器规则:

可见性过滤选择器
选 择 器 描 述 返 回 示 例
:hidden 选取所有不可见的元素 集合元素 $("div:hidden")选取所有不可见的<div>元素
:visible 选取所有不可见的元素 集合元素 $("div:visible")选取所有可见的<div>元素

  示例:

1.4属性过滤选择器

  属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

  属性过滤选择器规则:

属性过滤选择器
选 择 器 描 述 返 回 示 例
[attribute] 选取拥有此属性的元素 集合元素 $("div[id]")选取拥有属性id的元素
[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] 选取属性的值以value结束的元素 集合元素 $("div[title$=test]")选取属性 title 以
test 结束的<div>元素
[attribute*=value] 选取属性的值含有value的元素 集合元素 $("div[title*=test]")选取属性 title 含
有 test 的<div>元素
[selector1][selector2]
...[selectorN]
选取匹配以上所有属性
选择器的元素
集合元素 $("div[id][title*=test]")选取拥有属性id,
且属性 title 含有 test 的<div>元素

  示例:

1.5子元素过滤选择器

  子元素过滤选择器的过滤规则是通过元素的父子关系来获取相应的元素。

  子元素过滤选择器规则:

子元素过滤选择器
选 择 器 描 述 返 回 示 例

:nth-child(index/

even/odd/equation)

选取每个父元素下的第index(索引值为奇数/

索引值为偶数/索引值等于某个表达式)个子元

素,index从1开始

集合元素 $("div:nth-child(1)")选取每个<div>中第一个子元素
:first-child 选取每个父元素下的第1个子元素 集合元素 $("div :first-child")选取每个<div>下第一个子元素
:last-child 选取每个父元素下的最后1个子元素 集合元素 $("div :last-child")选取每个<div>下最后一个子元素
:only-child 选取只有唯一子元素的元素的子元素 集合元素 $("div :only-child")选择只有一个子元素的<div>元素

  这里值得一提的是:nth-child(),这个选择器的详细功能如下:

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

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

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

  4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素,n从0开始

  5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素,n从0开始

  示例:

1.6表单对象属性过滤选择器

  此选择器主要是对所选择的表单元素进行过滤。

  表单对象属性过滤选择器规则:

表单对象属性过滤选择器
选 择 器 描 述 返 回 示 例
:enabled 选取所有可用元素 集合元素 $("body:enabled")选取页面内所有可用元素
:disabled 选取所有不可用元素 集合元素 $("body:disabled")选取页面内所有不可用元素
:checked 选取所有被选中的元素(单选框、复选框) 集合元素 $("input:checked")选取所有被选中的<input>元素
:selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("select:selected")选取所有被选中的选项元素

  示例:

二、表单选择器

  顾名思义,表单选择器是为了能更加容易地操作表单,表单选择器是根据元素类型来定义的。

  表单选择器规则:

表单选择器
选 择 器 描 述 返 回 示 例
: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")选取所有的不可见元素

  示例:

小结

  本文主要介绍了jQuery选择器中的过滤选择器和表单选择器,并对每种类型的选择器给出了示例代码,希望能对大家有所帮助。本人也是jQuery的初学者,欢迎大家拍砖。

  参考书籍:《锋利的jQuery》(人民邮电出版社)



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: