jQuery过滤选择器详解

所属分类: 网络编程 / JavaScript 阅读数: 1354
收藏 0 赞 0 分享

过滤选择器

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

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

基本过滤选择器

基本过滤选择器示例

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

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

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

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

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

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

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

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

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

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

内容过滤选择器

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

内容过滤选择器示例

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

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

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

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

可见性过滤选择器

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

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

 

可见性过滤选择器示例

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

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

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

属性过滤选择器

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

 

属性过滤选择器示例

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

含有属性title的div元素.

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

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

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

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

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

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

子元素过滤选择器

 

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

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

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

      表单选择器

 

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多