﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-J2EE学习笔记-随笔分类-jQuery</title><link>http://www.blogjava.net/migrant/category/42678.html</link><description>我们的失落……</description><language>zh-cn</language><lastBuildDate>Mon, 09 Nov 2009 08:40:42 GMT</lastBuildDate><pubDate>Mon, 09 Nov 2009 08:40:42 GMT</pubDate><ttl>60</ttl><item><title>[转]jQuery基础---filter()和find()</title><link>http://www.blogjava.net/migrant/archive/2009/11/09/301714.html</link><dc:creator>J2EE学习笔记</dc:creator><author>J2EE学习笔记</author><pubDate>Mon, 09 Nov 2009 08:00:00 GMT</pubDate><guid>http://www.blogjava.net/migrant/archive/2009/11/09/301714.html</guid><wfw:comment>http://www.blogjava.net/migrant/comments/301714.html</wfw:comment><comments>http://www.blogjava.net/migrant/archive/2009/11/09/301714.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/migrant/comments/commentRss/301714.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/migrant/services/trackbacks/301714.html</trackback:ping><description><![CDATA[<p><span style="font-family: 新宋体"><span style="font-size: 10pt">这是jQuery里常用的2个方法。<br />
他们2者功能是完全不同的，而初学者往往会被误导。</span></span></p>
<p><br />
<span style="font-family: 新宋体"><span style="font-size: 10pt">首先 我们看.find()方法：<br />
现在有一个页面，里面HTML代码为：<br />
</p>
<div style="border-bottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 5px; font-size: 13px; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px"><img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" /><span style="color: #0000ff">&lt;</span><span style="color: #800000">div&nbsp;</span><span style="color: #ff0000">class</span><span style="color: #0000ff">="css"</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" />&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">p&nbsp;</span><span style="color: #ff0000">class</span><span style="color: #0000ff">="rain"</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">测试1</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">p</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" /></span><span style="color: #0000ff">&lt;</span><span style="color: #800000">div&nbsp;</span><span style="color: #ff0000">class</span><span style="color: #0000ff">="rain"</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" />&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">p</span><span style="color: #0000ff">&gt;</span><span style="color: #000000">测试2</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">p</span><span style="color: #0000ff">&gt;</span><span style="color: #000000"><br />
<img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" /></span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span></div>
<p><br />
如果我们使用find()方法：<br />
</p>
<div style="border-bottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 5px; font-size: 13px; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px"><img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" /><span style="color: #0000ff">var</span><span style="color: #000000">&nbsp;$find&nbsp;</span><span style="color: #000000">=</span><span style="color: #000000">&nbsp;$(</span><span style="color: #000000">"</span><span style="color: #000000">div</span><span style="color: #000000">"</span><span style="color: #000000">).find(</span><span style="color: #000000">"</span><span style="color: #000000">.rain</span><span style="color: #000000">"</span><span style="color: #000000">);<br />
<img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" />alert(&nbsp;$find.html()&nbsp;);</span></div>
<p><br />
将会输出：<br />
<img border="0" alt="" src="http://www.blogjava.net/images/blogjava_net/migrant/o_jqueryfindfilter.jpg" width="388" height="141" /><br />
如果使用filter()方法：<br />
</p>
<div style="border-bottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 5px; font-size: 13px; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px"><img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" /><span style="color: #0000ff">var</span><span style="color: #000000">&nbsp;$filter&nbsp;</span><span style="color: #000000">=</span><span style="color: #000000">&nbsp;$(</span><span style="color: #000000">"</span><span style="color: #000000">div</span><span style="color: #000000">"</span><span style="color: #000000">).filter(</span><span style="color: #000000">"</span><span style="color: #000000">.rain</span><span style="color: #000000">"</span><span style="color: #000000">);<br />
<img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" />alert(&nbsp;$filter.html()&nbsp;);</span></div>
<p><br />
将会输出：<br />
<img border="0" alt="" src="http://www.blogjava.net/images/blogjava_net/migrant/o_jqueryfindfilter1.jpg" /><br />
</span></span></p>
<p><span style="font-family: 新宋体"><span style="font-size: 10pt">也许你已经看出它们的区别了。<br />
<strong>find()会在div元素内 寻找 class为rain 的元素。<br />
而filter()则是筛选div的class为rain的元素。<br />
一个是对它的子集操作，一个是对自身集合元素筛选。</strong></span></span></p>
<p><span style="font-family: 新宋体"><span style="font-size: 10pt">另外find()其实还可以用选择器表示:</span></span></p>
<div style="border-bottom: #cccccc 1px solid; border-left: #cccccc 1px solid; padding-bottom: 4px; background-color: #eeeeee; padding-left: 4px; width: 98%; padding-right: 5px; font-size: 13px; word-break: break-all; border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; padding-top: 4px"><img align="top" src="http://www.blogjava.net/images/OutliningIndicators/None.gif"  alt="" /><span style="color: #0000ff">var</span><span style="color: #000000">&nbsp;$select&nbsp;</span><span style="color: #000000">=</span><span style="color: #000000">&nbsp;$(</span><span style="color: #000000">"</span><span style="color: #000000">div&nbsp;.rain</span><span style="color: #000000">"</span><span style="color: #000000">);</span></div> <img src ="http://www.blogjava.net/migrant/aggbug/301714.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/migrant/" target="_blank">J2EE学习笔记</a> 2009-11-09 16:00 <a href="http://www.blogjava.net/migrant/archive/2009/11/09/301714.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>