jQuery -> 获取各种滤芯(filter)

按顺序选择

依次选择过滤器(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则能够很easy的实现

$("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" />

版权声明：本文博主原创文章，博客，未经同意不得转载。