jQuery之筛选函数-阿里云开发者社区

开发者社区> ghost丶桃子> 正文

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
PHP获取当前url路径的函数及服务器变量:QUERY_STRING、REQUEST_URI、SCRIPT...
1,$_SERVER["QUERY_STRING"]说明:查询(query)的字符串 2,$_SERVER["REQUEST_URI"]说明:访问此页面所需的URI 3,$_SERVER["SCRIPT_NAME"]说明:包含当前脚本的路径 4,$_SERVER["PHP_SELF"]说明:当前正在执行脚本的文件名 实例:1,http://www.
824 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2633 0
javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQue
原文:javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、j...
945 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9553 0
javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQue
原文:javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、j...
2163 0
跟我学jquery(三)jquery动态创建元素和常用函数示例 .
在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.
893 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载