关于Jquery的parent和parents

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
可以看出parent取的很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。下面列出例子说明：
<html" title=class>class="tags" href="/tags/DIV.html" title=div>div id='html" title=class>class="tags" href="/tags/DIV.html" title=div>div1'>
<html" title=class>class="tags" href="/tags/DIV.html" title=div>div id='html" title=class>class="tags" href="/tags/DIV.html" title=div>div2'><p></p></html" title=class>class="tags" href="/tags/DIV.html" title=div>div>
<html" title=class>class="tags" href="/tags/DIV.html" title=div>div id='html" title=class>class="tags" href="/tags/DIV.html" title=div>div3' html" title=class>class='a'><p></p></html" title=class>class="tags" href="/tags/DIV.html" title=div>div>
<html" title=class>class="tags" href="/tags/DIV.html" title=div>div id='html" title=class>class="tags" href="/tags/DIV.html" title=div>div4'><p></p></html" title=class>class="tags" href="/tags/DIV.html" title=div>div>
</html" title=class>class="tags" href="/tags/DIV.html" title=div>div>

$('p').parent()取到的是html" title=class>class="tags" href="/tags/DIV.html" title=div>div2,html" title=class>class="tags" href="/tags/DIV.html" title=div>div3,html" title=class>class="tags" href="/tags/DIV.html" title=div>div4
$('p').parent('.a')取到的是html" title=class>class="tags" href="/tags/DIV.html" title=div>div3
$('p').parent().parent()取到的是html" title=class>class="tags" href="/tags/DIV.html" title=div>div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是html" title=class>class="tags" href="/tags/DIV.html" title=div>div1,html" title=class>class="tags" href="/tags/DIV.html" title=div>div2,html" title=class>class="tags" href="/tags/DIV.html" title=div>div3,html" title=class>class="tags" href="/tags/DIV.html" title=div>div4
$('p').parents('.a')取到的是html" title=class>class="tags" href="/tags/DIV.html" title=div>div3

Jquery的选择器真是很强大，我觉得Jquery用起来最舒服的就是它的选择器和筛选功能。

html" title=class>class="dp-xml">
1. html" title=class>class="tag">< html" title=class>class="tag-name">html html" title=class>class="tag">>   
2. html" title=class>class="tag">< html" title=class>class="tag-name">head html" title=class>class="tag">> html" title=class>class="tag"></ html" title=class>class="tag-name">head html" title=class>class="tag">>   
3. html" title=class>class="tag">< html" title=class>class="tag-name">body html" title=class>class="tag">>   
4. html" title=class>class="tag">< html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div  html" title=class>class="attribute">id =html" title=class>class="attribute-value">"d1" html" title=class>class="tag">>   
5.  html" title=class>class="tag">< html" title=class>class="tag-name">p html" title=class>class="tag">> Hello   
6.     html" title=class>class="tag">< html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div  html" title=class>class="attribute">id =html" title=class>class="attribute-value">"crd" html" title=class>class="tag">> xxxxxhtml" title=class>class="tag"></ html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="tag">>   
7.  html" title=class>class="tag"></ html" title=class>class="tag-name">p html" title=class>class="tag">>   
8. html" title=class>class="tag"></ html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="tag">>   
9. html" title=class>class="tag">< html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div  html" title=class>class="attribute">html" title=class>class =html" title=class>class="attribute-value">"selected" html" title=class>class="tag">>   
10. html" title=class>class="tag">< html" title=class>class="tag-name">p html" title=class>class="tag">> Hello Againhtml" title=class>class="tag"></ html" title=class>class="tag-name">p html" title=class>class="tag">>   
11. html" title=class>class="tag"></ html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="tag">>     
12. html" title=class>class="tag"></ html" title=class>class="tag-name">body html" title=class>class="tag">>   
13. html" title=class>class="tag"></ html" title=class>class="tag-name">html html" title=class>class="tag">>   
14.   
15.   
16. parent([expr])   
17. 说明：   
18. expr (String) : (可选)用来筛选的表达式   
19. 取得一个包含着所有匹配元素的唯一父元素的元素集合。   
20. 例：   
21. html" title=class>class="tag">< html" title=class>class="tag-name">PRE  html" title=class>class="attribute">html" title=class>class =html" title=class>class="attribute-value">js  html" title=class>class="attribute">name =html" title=class>class="attribute-value">"code" html" title=class>class="tag">> $("p").parent()   
22. html" title=class>class="tag"></ html" title=class>class="tag-name">PRE html" title=class>class="tag">>   
23. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">> 结果：   
24. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">> html" title=class>class="tag">< html" title=class>class="tag-name">PRE  html" title=class>class="attribute">html" title=class>class =html" title=class>class="attribute-value">html  html" title=class>class="attribute">name =html" title=class>class="attribute-value">"code" html" title=class>class="tag">> html" title=class>class="tag">< html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div  html" title=class>class="attribute">id =html" title=class>class="attribute-value">"d1" html" title=class>class="tag">> html" title=class>class="tag"></ html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="tag">> html" title=class>class="tag">< html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div  html" title=class>class="attribute">html" title=class>class =html" title=class>class="attribute-value">"selected" html" title=class>class="tag">> html" title=class>class="tag"></ html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="tag">> html" title=class>class="tag"></ html" title=class>class="tag-name">PRE html" title=class>class="tag">>   
25. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">>   
26. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">> html" title=class>class="hilite2">parents ([expr])   
27. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">> 说明：   
28. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">> 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。   
29. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">>   
30. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">> 主要是对祖先元素的理解。   
31. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">>   
32. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">> html" title=class>class="tag">< html" title=class>class="tag-name">PRE  html" title=class>class="attribute">html" title=class>class =html" title=class>class="attribute-value">js  html" title=class>class="attribute">name =html" title=class>class="attribute-value">"code" html" title=class>class="tag">> html" title=class>class="tag"></ html" title=class>class="tag-name">PRE html" title=class>class="tag">>   
33. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">> $("p").html" title=class>class="hilite2">parents ()    
34. html" title=class>class="tag">< html" title=class>class="tag-name">BR html" title=class>class="tag">>   

html" title=class>class="language-html"><html>
<head></head>
<body>
<html" title=class>class="tags" href="/tags/DIV.html" title=div>div id="d1">
 <p>Hello
    <html" title=class>class="tags" href="/tags/DIV.html" title=div>div id="crd">xxxxx</html" title=class>class="tags" href="/tags/DIV.html" title=div>div>
 </p>
</html" title=class>class="tags" href="/tags/DIV.html" title=div>div>
<html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="selected">
<p>Hello Again</p>
</html" title=class>class="tags" href="/tags/DIV.html" title=div>div> 
</body>
</html>


parent([expr])
说明：
expr (String) : (可选)用来筛选的表达式
取得一个包含着所有匹配元素的唯一父元素的元素集合。
例：

  <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="dp-highlighter">
   <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="bar">
    <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="tools">
     Js代码 
     


    html" title=class>class="tags" href="/tags/DIV.html" title=div>div>

   html" title=class>class="tags" href="/tags/DIV.html" title=div>div>

   
html" title=class>class="dp-c">
$(html" title=class>class="html" title=string>string">"p"
).parent()  

  html" title=class>class="tags" href="/tags/DIV.html" title=div>div>
html" title=class>class="js" style="display: none;">html" title=class>class="language-html">$("p").parent()



结果：



 <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="dp-highlighter">

  <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="bar">

   <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="tools">
    Html代码 
    


   html" title=class>class="tags" href="/tags/DIV.html" title=div>div>

  html" title=class>class="tags" href="/tags/DIV.html" title=div>div>

  
html" title=class>class="dp-xml">
html" title=class>class="tag"><
html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div
 html" title=class>class="attribute">id
=html" title=class>class="attribute-value">"d1"
html" title=class>class="tag">>
html" title=class>class="tag"></
html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div
html" title=class>class="tag">>
html" title=class>class="tag"><
html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div
 html" title=class>class="attribute">html" title=class>class
=html" title=class>class="attribute-value">"selected"
html" title=class>class="tag">>
html" title=class>class="tag"></
html" title=class>class="tag-name">html" title=class>class="tags" href="/tags/DIV.html" title=div>div
html" title=class>class="tag">>
  

 html" title=class>class="tags" href="/tags/DIV.html" title=div>div>
html" title=class>class="language-html"><html" title=class>class="tags" href="/tags/DIV.html" title=div>div id="d1"></html" title=class>class="tags" href="/tags/DIV.html" title=div>div><html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="selected"></html" title=class>class="tags" href="/tags/DIV.html" title=div>div>




html" title=class>class="hilite2">parents
([expr])


说明：


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




主要是对祖先元素的理解。





 <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="dp-highlighter">

  <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="bar">

   <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="tools">
    Js代码 
    


   html" title=class>class="tags" href="/tags/DIV.html" title=div>div>

  html" title=class>class="tags" href="/tags/DIV.html" title=div>div>

  
html" title=class>class="dp-c">
  

 html" title=class>class="tags" href="/tags/DIV.html" title=div>div>


$("p").html" title=class>class="hilite2">parents
() 

结果为：html" title=class>class="tags" href="/tags/DIV.html" title=div>div元素、body元素、html元素、 <html" title=class>class="tags" href="/tags/DIV.html" title=div>div html" title=class>class="selected"></html" title=class>class="tags" href="/tags/DIV.html" title=div>div>元素。