开发者社区> ghost丶桃子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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


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

相关文章
jQuery带缩略图焦点图插件
在线演示 本地下载
980 0
jQuery仿苹果样式焦点图插件
在线演示 本地下载
692 0
jQuery计算器插件
在线演示 本地下载
936 0
jQuery消息提示框插件Tipso
在线演示 本地下载
893 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1228 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1345 0
Jquery图片滚动插件—BxCarousel
Jquery图片滚动插件—BxCarousel BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: Ø  可以指定显示的元素数 Ø  可以指定每次滚动元素数 Ø  自动播放模式 Ø  前一张/后一张按钮控制图片流动   下面我看两个BxCarousel...
758 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载