juqery 学习之四 筛选查找


Posted in Javascript onNovember 30, 2010

add(expr)

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

Adds more elements, matched by the given expression, to the set of matched elements.

返回值

jQuery

参数

expr (String, DOMElement, Array<DOMElement>) : 用于匹配元素并添加的表达式字符串,或者用于动态生成的HTML代码,如果是一个字符串数组则返回多个元素

示例

添加一个新元素到一组匹配的元素中,并且这个新元素能匹配给定的表达式。

HTML 代码:

<p>Hello</p><span>Hello Again</span>

jQuery 代码:

$("p").add("span")

结果:

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

动态生成一个元素并添加至匹配的元素中

HTML 代码:

<p>Hello</p>

jQuery 代码:

$("p").add("<span>Again</span>")

结果:

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

为匹配的元素添加一个或者多个元素

HTML 代码:

<p>Hello</p><p><span id="a">Hello Again</span></p>

jQuery 代码:

$("p").add(document.getElementById("a"))

结果:

[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]

----------------------------------------------------------------------------------------------------------------

children([expr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()之考虑子元素而不考虑所有后代元素。

Get a set of elements containing all of the unique children of each of the matched set of elements.
This set can be filtered with an optional expression that will cause only elements matching the selector to be collected. Also note: while parents() will look at all ancestors, children() will only consider immediate child elements.

返回值

jQuery

参数

expr (String) : (可选) 用以过滤子元素的表达式

示例

查找DIV中的每个子元素。

HTML 代码:

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

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

在每个div中查找 .selected 的类。

HTML 代码:

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

jQuery 代码:

$("div").children(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

contents()

查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.

返回值

jQuery

示例

查找所有文本节点并加粗

HTML 代码:

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

jQuery 代码:

$("p").contents().not("[@nodeType=1]").wrap("<b/>");

结果:

<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>

往一个空框架中加些内容

HTML 代码:

<iframe src="/index-blank.html" width="300" height="100"></iframe>

jQuery 代码:

$("iframe").contents().find("body")   .append("I'm in an iframe!");

----------------------------------------------------------------------------------------------------------------

find(expr)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process.
All searching is done using a jQuery expression. The expression can be written using CSS 1-3 Selector syntax.

返回值

jQuery

参数

expr (String) :用于查找的表达式

示例

从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:

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

jQuery 代码:

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

结果:

[ <span>Hello</span> ]

----------------------------------------------------------------------------------------------------------------

next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

Get a set of elements containing the unique next siblings of each of the matched set of elements.
It only returns the very next sibling for each element, not all next siblings (nor does it return the next closest sibling). You may provide an optional expression to filter the match.

返回值

jQuery

参数

expr (String) : (可选) 用于筛选的表达式

示例

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

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

jQuery 代码:

$("p").next()

结果:

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

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:

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

jQuery 代码:

$("p").next(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

nextAll([expr])

查找当前元素之后的所有元素。
可以用表达式过滤

Find all sibling elements after the current element.
Use an optional expression to filter the matched set.

返回值

jQuery

参数

expr (String) : (可选)用来过滤的表达式

示例

给第一个div之后的所有元素加个类

HTML 代码:

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

jQuery 代码:

$("div:first").nextAll().addClass("after");

结果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

----------------------------------------------------------------------------------------------------------------

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。

Get a set of elements containing the unique parents of the matched set of elements.
You may use an optional expression to filter the set of parent elements that will match.

返回值

jQuery

参数

expr (String) : (可选)用来筛选的表达式

示例

查找每个段落的父元素

HTML 代码:

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

jQuery 代码:

$("p").parent()

结果:

[ <div><p>Hello</p><p>Hello</p></div> </body> ]

查找段落的父元素中每个类名为selected的父元素。

HTML 代码:

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

jQuery 代码:

$("p").parent(".selected")

结果:

[ <div class="selected"><p>Hello Again</p></div> ]

----------------------------------------------------------------------------------------------------------------

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element). The matched elements can be filtered with an optional expression.

返回值

jQuery

参数

expr (String) : (可选) 用于筛选祖先元素的表达式

示例

找到每个span元素的所有祖先元素。

HTML 代码:

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

jQuery 代码:

$("span").parents()

找到每个span的所有是p元素的祖先元素。

jQuery 代码:

$("span").parents("p")

----------------------------------------------------------------------------------------------------------------

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。

Get a set of elements containing the unique previous siblings of each of the matched set of elements.
Use an optional expression to filter the matched set. Only the immediately previous sibling is returned, not all previous siblings.

返回值

jQuery

参数

expr (String) : (可选) 用于筛选前一个同辈元素的表达式

示例

找到每个段落紧邻的前一个同辈元素。

HTML 代码:

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

jQuery 代码:

$("p").prev()

结果:

[ <div><span>Hello Again</span></div> ]

找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML 代码:

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

jQuery 代码:

$("p").prev(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

prevAll([expr])

查找当前元素之前所有的同辈元素
可以用表达式过滤。

Find all sibling elements before the current element.
Use an optional expression to filter the matched set.

返回值

jQuery

参数

expr (String) : (可选) 用于过滤的表达式

示例

给最后一个之前的所有div加上一个类

HTML 代码:

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

jQuery 代码:

$("div:last").prevAll().addClass("before");

结果:

[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

----------------------------------------------------------------------------------------------------------------

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

Get a set of elements containing all of the unique siblings of each of the matched set of elements. Can be filtered with an optional expressions.

返回值

jQuery

参数

expr (String) : (可选) 用于筛选同辈元素的表达式

示例

找到每个div的所有同辈元素。

HTML 代码:

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

jQuery 代码:

$("div").siblings()

结果:

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

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码:

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

jQuery 代码:

$("p").siblings(".selected")

结果:

[ <p class="selected">Hello Again</p> ]
------------------------------------------------------------------------------------------------------------------------

andSelf()

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

Add the previous selection to the current selection.
Useful for traversing elements, and then adding something that was matched before the last traversion.

返回值

jQuery

示例

选取所有div以及内部的p,并加上border类

HTML 代码:

<div><p>First Paragraph</p><p>Second Paragraph</p></div>

jQuery 代码:

$("div").find("p").andSelf().addClass("border");

结果:

<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div>

------------------------------------------------------------------------------------------------------------------------

end()

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

Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).
If there was no destructive operation before, an empty set is returned. A 'destructive' operation is any operation that changes the set of matched jQuery elements, which means any Traversing function that returns a jQuery object - including 'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and slice - plus the 'clone' function (from Manipulation).

返回值

jQuery

示例

选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素

HTML 代码:

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

jQuery 代码:

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

结果:

[ <p><span>Hello</span> how are you?</p> ]
Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 #Javascript
xss文件页面内容读取(解决)
Nov 28 #Javascript
用js来解决ajax读取页面乱码
Nov 28 #Javascript
window.name代替cookie的实现代码
Nov 28 #Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 #Javascript
一个网马的tips实现分析
Nov 28 #Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 #Javascript
You might like
php 算法之实现相对路径的实例
2017/10/17 PHP
JS Array对象入门分析
2008/10/30 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
js回调函数原理与用法案例分析
2020/03/04 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python中提高pip install速度
2020/02/14 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
几个数据库方面的面试题
2016/07/01 面试题
结构和类有什么异同
2012/07/16 面试题
酒店执行总经理岗位职责
2013/12/15 职场文书
护士实习鉴定范文
2013/12/22 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
函授药学自我鉴定
2014/02/07 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书