jQuery之筛选函数

简介:

  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系列之目录汇总


作者:破  狼 
出处:http://www.cnblogs.com/whitewolf/ 
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客博客园--破狼51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2010/05/01/1725700.html


相关文章
|
12月前
|
前端开发 JavaScript 容器
jQuery03(筛选&文档处理&CSS位置)
jQuery03(筛选&文档处理&CSS位置)
|
JavaScript
jQuery筛选&文档处理
jQuery筛选&文档处理
35 0
|
12月前
|
JavaScript
jQuery筛选&文档处理
jQuery筛选&文档处理
|
12月前
|
JavaScript
jQuery筛选&文档处理器
jQuery筛选&文档处理器
50 0
|
4月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
2月前
|
JavaScript 前端开发
jQuery的作用及入口函数
jQuery的作用及入口函数
14 1
|
4月前
|
JavaScript 前端开发
jQuery 常用函数解析
jQuery 常用函数解析
|
4月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
|
5月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
|
5月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?