开发者社区> 技术mix呢> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

详解强大的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/,如需转载请自行联系原作者

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

相关文章
基于 jQuery 实现的精致作品集图片导航效果
  今天,我们要用 jQuery 来创建一个作品集图像的导航模板。我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览。任一箭头或当前图像下方的小盒子可以作为导航使用。     在线演示     下载源码   您可能感兴趣的相关文章 网站开发中很有...
780 0
分享8款精美的jQuery图片播放插件
本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究。废话不多说了,直接上这些插件。 1、3D轮播相册 这款3D相册插件利用了HTML5特性,让相片播放具有了3D效果,浏览器有限制哦。
1116 0
Croppic – 免费开源的 jQuery 图片裁剪插件
  Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要。只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能。因为使用了 HTML5 FormData  对象,所以目前只支持 IE 10+、Chrome 和 Firefox 等现代浏览器。
1088 0
TwentyTwenty – 使用 jQuery 实现图片对比功能
  这是一款非常棒的图片对比工具,能够方便的应用到你的网站中。其基本思路是把两张图片层叠在一起,当你拖动滑竿的时候,利用 CSS clip 裁剪图片,进行形成视觉对比效果。 您可能感兴趣的相关文章 Metronic – 基于 Bootstrap 响应式后台管理模板 HTML Inspec...
1005 0
基于jquery的图片展示--卡牌翻转效果
原文 http://www.cnblogs.com/daynow/archive/2013/04/29/3051233.html   卡牌翻转效果是一种很好玩的效果,是我用Jquery实现的一种效果,跟Flash实现的效果几乎一模一样。
1161 0
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
  图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你。
1722 0
[转贴]使用jQuery自动缩图片 - [jQuery]
具体思路: 通过具体容器取得容器内所有图片 循环检查所有图片长宽 对超过的图重新定高度. 直接写成一个扩展好了,以后可以直接用. jquery.fn.ImageAutoSize = function(width,height){    $("img",this).
896 0
+关注
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载