Java乔晓松-jQuery过滤选择器
2013-03-21 20:46
316 查看
过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 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()
方法获取下拉框选中的内容
表单选择器
相关文章推荐
- Java乔晓松-jQuery介绍入门和对象转换、以及基本选择器和层次选择器
- jquery基本过滤选择器
- jQuery学习之过滤选择器
- Jquery——Day1(Jquery基本选择器+过滤选择器+表单选择器+表单过滤器)
- Jquery过滤选择器之内容过滤器
- jquery过滤器,过滤器它是在基本选择器与层次选择器获取到一批元素后,再进行过滤操作
- jQuery_基本过滤选择器
- JavaScript学习笔记8-jQuery属性过滤选择器、子元素过滤选择器深度解析
- jquery 简单过滤选择器 遍历集合
- jquery选择器之层级过滤选择器详解
- jQuery选择器之基本过滤选择器Demo
- jQuery过滤选择器——表单对象属性过滤选择器
- 一步一步学习 JQuery (四) 过滤选择器:属性过滤选择器 && 子元素过滤选择器 && 表单过滤选择器
- jQuery之属性过滤选择器
- jquery选择器之内容过滤选择器
- 第一百六十五节,jQuery,过滤选择器
- jQuery内容过滤选择器
- Jquery(六)过滤选择器之内容过滤
- jQuery之内容过滤选择器
- jQuery选择器 过滤选择器(五.子元素过滤选择器)