jQuery 过滤选择器

Posted 2020-09-26

一、基本过滤器

:first  　　　　 $(‘li:first‘) 　　　 选取第一个元素 

:last       　　   $(‘li:last‘)    　　  选取最后一个元素

:not(selector)   $(‘li:not(.red)‘)     选取class不是red的li元素

:even　　　　$(‘li:even‘)  　　  选择索引（0开始）是偶数的所有元素

:odd 　　 　　$(‘li:odd‘)　　 　选择索引（0开始）是奇数的所有元素

:eq(index) 　　$(‘li:eq(2)‘) 　 　选择索引（0开始）等于index的元素

:gt(index)　　  $(‘li:gt(2)‘)　　  选择索引（0开始）大于index的元素

:lt(index) 　　  $(‘li:lt(2)‘)　　    选择索引（0开始）小于index的元素

:header 　　　$(‘:header‘) 　　选择标题元素，h1~h6

:animated　　 $(‘:animated‘)     选择正在执行动画的元素

:focus　　 　   $(‘:foucus‘) 　　选择当前被焦点的元素

注意：focus过滤器，必须是页面初始状态的已经被激活的元素才能实现元素获取

jQuery为常用过滤器提供专用方法，来提高性能和效率

eq() first() last() not()

 

二、内容过滤器

:contains(text)  $(‘:contains(‘text‘)‘)  选取含有‘text’文本内容

:empty  　　    $(‘:empty‘)　　　　 选取不包含子元素或者空文本的元素

:has(selector)  $(‘:has(.red)‘)  　　  选取含有class是red的选择器

:parent 　　    $(‘:parent‘) 　　　　选取含有子元素或者文本的元素

has()方法提高性能

parent()       　　     当前元素的父元素

parents()　　　　   当前元素的父元素以及祖先元素

parentsUntil(‘div‘)    当前元素遇到div父元素停止

 

三、可见性选择器

:hiden    $(‘:hiden‘)   选取所有不可见元素

:visible   $(‘:visible‘)  选取所有可见元素

 

四、子元素选择器　　

:first-child　　　　　　　　　　 $(‘li:first-child‘)　　    获取每个父元素的第一个元素

:last-child 　　　　　　　　　　$(‘li:last-child‘)　　　 获取每个父元素的最后一个元素

:only-child 　　　　　　　　　   $(‘li:only-child‘)　　　获取只有一个子元素的元素　

:nth-child(odd/even/eq(index))     $(‘li:nth-child(even)‘)  获取每个自定义子元素的元素