首页 > 代码库 > jQuery -> 获取元素的各种过滤器(filter)

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

2024-07-05 21:45:03 222人阅读

通过顺序来选择

顺序选择的过滤器(filter)有

:first: 第一个元素
:last: 最后一个元素
:even: 序号为偶数的元素
:odd: 序号为奇数的元素
:eq(n): 序号等于ｎ的元素
:lt(n): 序号小于n的元素
:gt(n): 序号大于n的元素

如果有如下的表格

0	even
1	odd
2	even
3	odd
4	even

html代码如下

如果需要修改所有序号为偶数的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>

$(‘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://www.mamicode.com/"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" />

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

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