主页 > 专题教程 > javascript > jquery >
来源:自学PHP网 时间:2018-02-08 10:13 作者: 阅读:次
[导读] jQuery的过滤选择器主要是通过过滤规则来筛选我们所需要的元素,过滤的规则和CSS中伪类选择器的语法相同。按照不同的过滤规则,过滤选择器又可以分为位置过滤,内容过滤,可见性...
的过滤选择器主要是通过过滤规则来筛选我们所需要的元素,过滤的规则和CSS中伪类选择器的语法相同。按照不同的过滤规则,过滤选择器又可以分为位置过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象过滤选择器。 为了演示过滤选择器的效果,我们也制作了一个DEMO。这个DEMO的界面如下图所示: 点击DEMO中的左侧的按钮可以对各种过滤选择器进行测试,并可以看到可视化的选择效果。你可以这个DEOM,或者到你的电脑中查看。 jQuery的位置过滤选择器有以下几种:
:first
$('ul#bar li:first').highlight(); 查看DEMO中的小圆的颜色变化,可以发现第一个小圆的背景色被设置为红色,字体颜色被设置为白色。 :last
$('ul#bar li:last').highlight(); 查看DEMO中的小圆的颜色变化,可以发现最后一个小圆的背景色被设置为红色,字体颜色被设置为白色。 :not(selector)
$('ul#bar li:not(.circle5)').highlight(); 下图为返回的结果: :even
$('ul#bar li:even').highlight(); 下图为返回的结果: :odd
$('ul#bar li:odd').highlight(); 下图为返回的结果: :eq(index)
$('ul#bar li:eq(3)').highlight(); 下图为返回的结果: :gt(index)
$('ul#bar li:gt(3)').highlight(); 下图为返回的结果: :lt(index)
$('ul#bar li:lt(3)').highlight(); 下图为返回的结果: :header
$('ul#bar li:header').highlight(); 下图为返回的结果: :animated
$('ul li:animated').highlight(); jQuery的内容过滤器有以下几种:
:contains(text)
$('ul li:contains("6")').highlight(); 下面是返回的结果: :empty
$('ul li:empty').highlight(); 下面是返回的结果: :has(selector)
$('ul li:li:has(i)').highlight(); 下面是返回的结果: :parent
$('ul li:li:parent').highlight(); 下面是返回的结果: jQuery的可见性过滤器有以下2种。可见性过滤器根据元素是否可见来选择元素。
jQuery的子元素过滤选择器有以下几种:
:nth-child(index/even/odd/equation)
例如选择 $('ul li:nth-child(3n+1)').highlight(); 下面是返回的结果: :first-child
$('ul li:first-child').highlight(); 下面是返回的结果: :last-child
$('ul li:last-child').highlight(); 下面是返回的结果: :only-child
$('ul li:only-child').highlight(); 下面是返回的结果: 表单对象属性过滤选择器主要用于对表单元素的过滤选择。有以下几种:
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com