过滤器



基本过滤器

过滤器名

jQuery语法

说明

返回

方法

：first

$(‘li:first’)

选取第一个元素

单个元素

first()

：last

$(‘li:last’)

选取最后一个元素

单个元素

last()

not（select）

$(‘li:not(.red)’)

 选取class不是red的li元素

集合元素

not()

：even

$(‘li:even’)

选择索引（0开始）是偶数的所有元素

集合元素

无

：odd

$(‘li:odd’)

选择索引（0开始）是奇数的所有元素

集合元素

无

：eq(index)

$(‘li:eq(2)’)

选择索引（0开始）等于index的索引

单个元素

eq()

：gt(index)

$(‘li:gt(2)’)

选择索引（0开始）大于index的索引

集合元素

 

：lt（index）

$(‘li:lt(2)’)

选择索引（0开始）小于index的索引

集合元素

 

：header

$(‘:header’)

选择标题元素h1~h6

集合元素

 

：focus

$(‘:focus’)

选择当前被焦点的元素

集合元素

 

注意：focus需要初始化激活一个焦点：$(‘input’).get(0).focus();

内容过滤器

过滤器名

jQuery语法

说明

返回

方法

：contains(text)

$(‘:contains(“hihi.com”)’)

选取含有hihi .com文本的元素

元素集合

 

：empty

$(‘:empty’)

选取不含子元素或空文本的元素

元素集合

 

：has(selector)

$(‘:has(.red)’)

选取含有class是red的元素

元素集合

has（）

：parent

$(‘:parent’)

选取含有子元素或文本的元素

元素集合

 

注意：

1、$(‘ul:has(.red)’).css(‘background’,’#ccc’);//返回子元素含有class是red的父元素

2、jQuery提供了一个方法parent（），并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回元素集合

$(‘li’).parent().css(‘background’,’#ccc’);//选择当前元素的父元素

$(‘li’).parents().css(‘background’,’#ccc’);选择当前元素的父元素及祖先元素

$(‘li’).parentUntil(‘div’).css(‘background’,’#ccc’);//选择当前元素遇到div父元素停止

可见性过滤器

过滤器名

jQuery语法

说明

返回

：hidden

$(‘:hidden’)

选取所有不可见元素

集合元素

：visible

$(‘:visible’)

选取所有可见元素

集合元素

 
子元素过滤器

过滤器名

jQuery语法

说明

返回

：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)’)

获取每个自定义子元素的元素

集合元素

 

其他方法

方法名

jQuery语法

说明

返回

is(s/o/e/f)

$(‘li’).is(‘.red’)

传递选择器、DOM、jquery对象或是函数来匹配元素结合

集合元素

hasClass

$(‘li’).eq(2).hasClass(‘red’)

实际上是is（”.”+class）

集合元素

slice（start，end）

$(‘li’).slice(0,2);

选择从start到end的元素，如果是负数，则从后开始

集合元素

filter(s/o/e/f)

$(‘li’).filter(‘.red’)

 

 

end()

$(‘div’).find(‘p’).end()

获取当前元素的前一次状态

集合元素

contents（）

$(‘div’).contents()

获取某元素下面所有元素节点，包括文本节点，如果是iframe，则可以查找文本内容

集合元素

 

注意：

1、$('.red').is('li');//查找red这个class是否在li中

alert($('.red').is(function(){

                  
return$(this).attr('title')=='q';

        
}));

2、必须使用$(this)来表示调用的对象

3、alert($('li').eq(2).hasClass('red'));//注意：red前面不加.

4、$(‘li’).slice(0,2).css(‘color’,’red’);//前三个变成红色的

$(‘li’).slice(2,4).css(‘color’,’red’);//第三个和第四个被选中

$(‘li’).slice(0,-2).css(‘color’,’red’);//从倒数第三个位置向前选定所有的

5、$(‘div’).find(‘p’).end().get(0);找到其前一个状态

6、$(‘div’).contents().size();//返回子节点包括文本数量

7、$(‘li’).filter(‘.red’).css(‘background’,’#ccc’);//filter更加灵活，查找li中含有class=red的元素

$(‘li’).filter(‘.red,:first,:last’).css(‘background’,’#ccc’);//
查找li中含有class=red的元素和第一个和最后一个元素