jQuery过滤选择器详解


Posted in Javascript onJanuary 13, 2015

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以“:”开头

按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器.

基本过滤选择器

jQuery过滤选择器详解

基本过滤选择器示例

改变第一个 div元素的背景色为 # bbffaa

改变最后一个 div元素的背景色为 # bbffaa

改变class不为 one的所有 div元素的背景色为 # bbffaa

改变索引值为偶数的 div元素的背景色为 # bbffaa

改变索引值为奇数的 div元素的背景色为 # bbffaa

改变索引值为大于 3的 div元素的背景色为 # bbffaa

改变索引值为等于 3的 div元素的背景色为 # bbffaa

改变索引值为小于 3的 div元素的背景色为 # bbffaa

改变所有的标题元素的背景色为 # bbffaa

改变当前正在执行动画的所有元素的背景色为 # bbffaa

内容过滤选择器

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

jQuery过滤选择器详解

内容过滤选择器示例

改变含有文本 ‘di'的 div元素的背景色为 # bbffaa

改变不包含子元素(或者文本元素)的 div空元素的背景色为 # bbffaa

改变含有 class为 mini元素的 div元素的背景色为 # bbffaa

改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa

可见性过滤选择器

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

可见选择器 :hidden不仅包含样式属性 display为 none的元素,也包含文本隐藏域 (<input  type=“hidden”>)和 visible:hidden之类的元素

 jQuery过滤选择器详解

可见性过滤选择器示例

改变所有可见的div元素的背景色为 # bbffaa

选取所有不可见的元素,利用 jQuery中的 show()方法将它们显示出来,并设置其背景色为 # bbffaa

选取所有的文本隐藏域,并打印它们的值

属性过滤选择器

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

 jQuery过滤选择器详解

属性过滤选择器示例

选取下列元素,改变其背景色为 # bbffaa

含有属性title的div元素.

属性title值等于"test"的div元素.

属性title值不等于"test"的div元素(没有属性title的也将被选中).

属性title值以"te"开始的div元素.

属性title值以"est"结束的div元素.

属性title值含有"es"的div元素.

选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素.

子元素过滤选择器

 jQuery过滤选择器详解

nth-child() 选择器详解如下:

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

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

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

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

子元素过滤选择器示例

选取下列元素,改变其背景色为 # bbffaa

每个class为one的div父元素下的第2个子元素.

每个class为one的div父元素下的第一个子元素

每个class为one的div父元素下的最后一个子元素

如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素

表单对象属性过滤选择器

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

jQuery过滤选择器详解

      表单对象属性过滤选择器示例

     利用 jQuery对象的 val()方法改变表单内可用 <input>元素的值      利用 jQuery对象的 val()方法改变表单内不可用<input>元素的值

       利用 jQuery对象的 length属性获取多选框选中的个数

      利用 jQuery对象的 text()方法获取下拉框选中的内容

      表单选择器

 jQuery过滤选择器详解

以上就是关于jQuery过滤选择器的全部内容了,十分的详尽,希望对小伙伴们有所帮助。

Javascript 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
jQuery入门介绍之基础知识
Jan 13 #Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 #Javascript
Web表单提交之disabled问题js解决方法
Jan 13 #Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 #Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 #Javascript
使用javascript实现雪花飘落的效果
Jan 13 #Javascript
javascript数组输出的两种方式
Jan 13 #Javascript
You might like
php读取msn上的用户信息类
2008/12/05 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
JS上传前预览图片实例
2013/03/25 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
django中静态文件配置static的方法
2018/05/20 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python初学者常见错误详解
2019/07/02 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
自荐信格式简述
2014/01/25 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
网页美工求职信
2014/02/15 职场文书
交通事故私了协议书
2014/04/16 职场文书
十周年庆典策划方案
2014/06/03 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2014年评职称工作总结
2014/11/20 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis