jQuery -> 获取元素的各种过滤器(filter)

浏览数：13 / 时间：2015年06月09日

通过顺序来选择

顺序选择的过滤器(filter)有
:first
第一个元素
:last
最后一个元素
:even
序号为偶数的元素
:odd
序号为奇数的元素
:eq(n)
序号等于ｎ的元素
:lt(n)
序号小于n的元素
:gt(n)
序号大于n的元素
如果有如下的表格
0 even
1 odd
2 even
3 odd
4 even
html代码如下
<table>
 <tr><td>0</td><td>even</td></tr>
 <tr><td>1</td><td>odd</td></tr>
 <tr><td>2</td><td>even</td></tr>
 <tr><td>3</td><td>odd</td></tr>
 <tr><td>4</td><td>even</td></tr>
</table>
如果需要修改所有序号为偶数的tr的式样，用jQuery则可以非常简单的实现
$("tr:even").addClass('even')
even是在css中定义的式样
table tr.even {
    background: #CCC;
}
添加even式样后，表格如下所示
0 even
1 odd
2 even
3 odd
4 even
jQuery也提供了filter函数
$('ul li').filter(':first');

选取正在执行动画的元素

过滤器是:animated
用法如下
$('div:animated'); // #1
$('div:not(div:animated').animate({height:100}); // #2
也可以使用动画过滤器来判断元素是否正在执行动画
var myElem = $('#elem');
if (myElem.is(':animated')) {
   // do something
}

根据包含的内容来选择元素

过滤器：has(), contains()
用法如下
如果要选取包含特定文字的元素，可以使用contains
HTML 
<span>Hello Bob!</span>
JS 
$(‘span:contains("Bob")); # contains参数区分大小写，可以不需冒号

通过has来使用selector
$(‘div:has(p a)‘);

逆向选择

过滤器 not
not的参数也是一个selector
$(‘div:not(#content))
当然也可以使用复杂的selector
$(‘a:not(div.important a, a.nav)‘);
jQuery也提供了not方法
var anchors = $(‘a‘);
anchors.click(function() {
   anchors.not(this).addClass(‘not-clicked‘);
});

通过是否可见来选择元素

选择器 hidden, visible
用法如下所示
if ($(‘#elem‘).is(‘:hidden‘)) {
    // Do something conditionally
}
$(‘p:visible‘).hide();

基于属性来选择元素

过滤器
[attr]
是否具有此属性
[attr=val]
attr属性是否等于val
[attr!=val]
attr属性不等于val
[attr^=val]
attr属性以val开头
[attr$=val]
attr属性以val结尾
[attr~=val]
attr属性包含val
[attr]
是否具有此属性
用法
$(‘a[href="http://google.com"]‘);
连续使用多个属性过滤器
$(‘*[title][href]‘)

根据元素类型来选择

过滤器
jQuery selector syntax Selects what?
:text <input type="text" />
:password <input type="password" />
:radio <input type="radio" />
:checkbox <input type="checkbox" />
:submit <input type="submit" />
:image <input type="image" />
:reset <input type="reset" />
:button <input type="button" />
:file <input type="file" />
:hidden <input type="hidden" />

jQuery -> 获取元素的各种过滤器(filter),古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： jquery filter jquery filter

相关文章

随机文章

您可能还喜欢

您可能还喜欢