集团站切换校区

验证码已发送,请查收短信

图标

学习文章

当前位置:首页 > >学习文章 > >

{HTML5}过滤选择器-第四节-上

发布时间: 2018-10-26 09:22:20

​过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似与 CSS3 (http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持。和常规选择器一样,jQuery 为了更方便开发者使用,提供了很多独有的过滤器。

一.基本过滤器

过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头。


$('li:first').css('background','#ccc');        //第一个元素

$('li:last).css('background','#ccc');           //最后一个元素

$('li:not(.red)).css('background','#ccc');     //非 class 为 red的元素

$('li:even').css('background','#ccc');         //索引为偶数的元素


$('li:odd).css('background', '#ccc');       //索引为奇数的元素

$('li:eq(2)).css('background', '#ccc');        //指定索引值的元素

$('li:gt(2)').css('background','#ccc');          //大于索引值的元素

$('li:lt(2)').css('background', '#ccc');       //小于索引值的元素

$(':header').css('background', '#ccc');       //页面所有h1 ~ h6元素


注意::focus过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。 而不是鼠标点击或者Tab键盘敲击激活的。


$('input').get(0).focus();                     //先初始化激活一个元素焦点

$(':focus').css('background','red');         //被焦点的元素 


jQuery为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:

$('li').eq(2).css('background','#ccc');                //元素li的第三个元素,负数从后开始

$('li').first().css('background','#ccc');                   //元素li的第一个元素

$('li').last().css('background','#ccc');                   //元素li的最后一个元素

$('li').not('.red').css('background','#ccc');        //元素li不含class为red的元素


注意::first、:last和first()、last()这两组过滤器和方法在出现相同元素的时候,first会实现第一个父元素的第一个子元素,last会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素,需要指明:


$('#box  li:last').css('background', '#ccc');    //#box元素的最后一个li 

//或      

$('#box  li).last().css('background', '#ccc');    //同上


上一篇: {HTML5}过滤选择器-第四节-内容过滤器-上

下一篇: {HCNA-AI TensorFlow编程基础}之Hello, TensorFlow!

十年老品牌
QQ咨询:450959328 微信咨询:togogozhong 咨询电话:020-38289118 咨询网站客服:在线客服

相关课程推荐

在线咨询 ×

您好,请问有什么可以帮您?我们将竭诚提供最优质服务!