详解强大的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》(人民邮电出版社)

作者： 天行健，自强不息

出处：http://artwl.cnblogs.com

本文首发博客园，版权归作者跟博客园共有。

转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法律责任的权利。