代码改变世界

jQuery之筛选函数

2010-05-01 17:37  破狼  阅读(9717)  评论(10)  编辑  收藏  举报

  jQuery的筛选函数提供了串联、查找和过滤函数，为我们的jQuery对象操作带来了很多的方便，今天我们就来温习下jQuery带来的这些筛选函数。

1：串联函数：

（1）：andSelf()

return：jQuery；

explain：

加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

test：

<div><p>test</p></div>

example：

$(“div”).find(“p”).andSelf().addClass(“class1”);

result：

<div><p class=”class1”>test</p></div>

(2):end()

return :jQuery;

explain:

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

test:

<div><p>test</p></div>

example:

$(“div”).find(“p”).end();

//$(“div”).find(“p”)：<p>test</p>

result:<div><p>test</p></div>

2:查找函数:

(1):add(exp);

return :jQuery;

explain:

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

test:

<p>test1</p><a>test2</a>

example：

$(“p”).add(“a”);

result:

[<p>test1</p>,<a>test2</a>]//数组

(2):children([expr]);

return:jQuery

explain:

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()之考虑子元素而不考虑所有后代元素。

test:

<div><span>Hello Again</span></div>

example:

$(“div”).children();

result:<span>Hello Again</span>

(3):find(expr)

return:jquery

explain:

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

test:

<p><span>Hello</span>, how are you?</p>

example:

$("p").find("span");

result:<span>Hello</span>

(4):next([expr])

return :jquery

explain:

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

test:

<p><span>Hello</span><a>h1</a></p>;

example:

$(“span”).next();

result:<a>h1</a>;

 

 

(5):nextAll([expr])

return:jQuery

explain:查找当前元素之后所有的同辈元素。

test:<div>h1</div><div>h2</div><div>h3</div>;

example:

$(“div:first”).nextAll();

result:<div>h2<div>,<div>h3</div>;:

 

(6):offsetParent()

 

return :jQuery

explain:

返回第一个匹配元素用于定位的父节点。

这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

 

(7):parent([expr])

 

return:jQuery

explain:

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

test:

<div><p>Hello</p><p>Hello</p></div>

example:

$(“p”).parent();

result:<div><p>Hello</p><p>Hello</p></div>;

 

(8):parents([expr])

 

return:jquery;

explain:取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。

test:

<body><div><p><span>Hello</span></p><span>Hello Again</span></div></body>

example:$(“span”).parents(“p”);

result:<p><span><Hello></span></p>

 

 

(9):prev([expr])

return:jquery

explain:

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

test:

<div><span>Hello Again</span></div><p>And Again</p>

example:

$(“p”).prev();

result:<div><span>Hello Again</span></div>;

 

 

(9):prevAll([expr])

return:jQuery

explain:

查找当前元素之前所有的同辈元素;

test:

<div></div><div></div><div></div><div></div>

example:

$(“div:last”).prevAll();

result:<div></div><div></div><div></div>

 

 

(10):siblings([expr])

return :jquery

explain:

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

test:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

example:$("div").siblings()

result:

[ <p>Hello</p>, <p>And Again</p> ]

 

 

3:过滤函数：

(1):eq(insex);

return:jQuery

explain:获取第N个元素.这个元素的位置是从0算起。

test:<p> This is just a test.</p> <p> So is this</p>

example:$(“p”).eq(1);

result:<p> So is this</p>

 

 

(2):filter(expr)

return:jQuery

explain:

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

test:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

example:

$("p").filter(".selected");

result:

<p class="selected">And Again</p>

 

 

(3):filter(fn)

return:jquery

explain:

筛选出与指定函数返回值匹配的元素集合

test:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

example:

$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

result:

<p>How are you?</p>

 

 

(4):hasClass(class)

return:jQuery

explain:

检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

test:

<div class="protected"></div><div></div>

example:

$(“div”).hasClass("protected")

result:

true

 

 

 

(5):is(expr)

return:jquery

explain:

用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

test:

<form><input type="checkbox" /></form>

explam:

$("input[type='checkbox']").parent().is("form")

result:

true;

 

 

 

(6):map(callback)

return:jQuery

explain:

将一组元素转换成其他数组（不论是否是元素数组);

test:

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

explam:

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

result:

<p>John, password, http://ejohn.org/</p>

 

 

(7):not(expr)

return:jQuery

explain:

删除与指定表达式匹配的元素

test:

<p>Hello</p><p id="selected">Hello Again</p>

example:

$("p").not( $("#selected")[0] )

result:

<p>Hello</p>

 

 

(8):slice(start,[end])

return:jQuery

explain:

选取一个匹配的子集;

test:

<p>Hello</p><p>cruel</p><p>World</p>

example:

$("p").slice(0, 1).wrapInner("<b></b>");

result:

<p><b>Hello</b></p>

 

 本博客中同类文章还有，请见：我jQuery系列之目录汇总