jQuery 过滤选择器学习

avatar
avatar
小王先森
389
文章
385
评论
2019年4月3日 评论 366

基本过滤器

过滤器主要通过特定的过滤规则来筛选所需的 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 的元素

内容过滤器

内容过滤器的过滤规则主要是包含的子元素或文本内容上。

$(’div:contains("xwsir.cn")’).css(’background’, ’#ccc’);//选择元素文本节点含有 xwsir.cn 文本的元素
$(’div:empty’).css(’background’, ’#ccc’); //选择空元素
$(’ul:has(.red)’).css(’background’, ’#ccc’); //选择子元素含有 class 是 red 的元素
$(’:parent’).css(’background’, ’#ccc’); //选择非空元素

jQuery 提供了一个 has() 方法来提高:has 过滤器的性能:

$(’ul’).has(’.red’).css(’background’, ’#ccc’); //选择子元素含有 class 是 red 的元素

可见性过滤器

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

$(’p:hidden).size(); //选取元素 p 隐藏的元素
$(’div:hidden’).css(’background’, ’#ccc’).show(1000);//选取元素 div 隐藏的元素,一秒钟后缓慢显示
$(’p:visible’).size(); //选取元素 p 显示的元素

注意::hidden 过滤器一般是包含的内容为:CSS 样式为 display:none、input 表单类型为 type="hidden" 和 visibility:hidden 的元素。

子元素过滤器

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

$(’li:first-child’).css(’background’, ’#ccc’); //每个父元素第一个 li 元素
$(’li:last-child’).css(’background’, ’#ccc’); //每个父元素最后一个 li 元素
$(’li:only-child’).css(’background’, ’#ccc’); //每个父元素只有一个 li 元素
$(’li:nth-child(odd)’).css(’background’, ’#ccc’); //每个父元素奇数 li 元素
$(’li:nth-child(even)’).css(’background’, ’#ccc’); //每个父元素偶数 li 元素
$(’li:nth-child(2)’).css(’background’, ’#ccc’); //每个父元素第三个 li 元素
$(’li:nth-child(3n)’).css(’background’, ’#ccc’);//每个父元素3的倍数个 li 元素
$(’li:nth-child(3n+1)’).css(’background’, ’#ccc’);//每个父元素3的倍数的后一个 li 元素

其他方法

jQuery 在选择器和过滤器上,还提供了一些常用的方法,方便我们开发时灵活使用。

$(’.red’).is(’li’); //true,选择器,检测 class 为是否为 red
$(’li’).eq(2).hasClass(’red’); //和 is 一样,只不过只能传递 class
$(’li’).filter(’.red’).css(’background’,’#ccc’); //选择 li 元素的 class 为 red 的元素
$(’li’).filter(’.red, :first, :last’).css(’background’,’#ccc’); //增加了首尾选择
//特殊要求函数返回,同时选取 class 为 red 和 title 为 列表3 的元素
$(’li’).filter(function () {
    return $(this).attr(’class’) == ’red’ && $(this).attr(’title’) == ’列表 3’;
}).css(’background’, ’#ccc’);
继续阅读
avatar
  • 本文由 发表于 2019年4月3日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: