-------------------------------------------------------------------
Source Address: http://www.cnblogs.com/yunlei0821/p/7577400.html, reproduced please be sure to keep this source.
Child (/ Sun ) node :
. Children ([selector]). gets all immediate child elements (selectors optional) for each element in the matching element collection.
Instance:
<div>
<a href= "#" ><span>welcome to </span>zhenheinfo</a>
<p id= "P1" > Welcome to Zhen and information </p>
<p id= "P2" > Welcome to Zhen and information </p>
</div>
Action: $ ("div"). Children ();
Result: A total of 3 nodes were obtained for <a></a> and <p></p>.
Action: $ ("div"). Children ("#p1");
Result: Get <p id= "P1" ></p> node.
. Find (selectoR). gets the descendants (selectors must) for each element in the current matching element collection.
Instance:
<div>
<a href= "#" ><span>welcome to </span>zhenheinfo</a>
<p id= "P1" > Welcome to <span> and information </span></p>
<p id= "P2" > Welcome to Zhen and information </p>
</div>
Action: $ ("div"). Find ("span");
Results: 2 <span></span> nodes were obtained.
Brother Node :
. siblings ([selector]). gets the sibling elements (selectors optional) that match all elements in the element collection.
Instance:
<div>
<div>
<a href= "#" ><span>welcome to </span>zhenheinfo</a>
<p> Welcome to <span> and information </span></p>
<span id= "SP1" > Information </span>
</div>
<div>
<a href= "#" ><span>welcome to </span>zhenheinfo</a>
<p> Welcome to <span> and information </span></p>
</div>
</div>
Action: $ ("a"). siblings ();
Results: Get <p></p>,<span id= "SP1" ></span> a total of 3 nodes.
Action: $ ("a"). Siblings ("P");
Results: 2 <p></p> nodes were obtained.
. prev ([selector]). gets the previous sibling element (selector optional) adjacent to each element in the matching element collection.
. Next ([selector]). gets the next sibling element (selector optional) adjacent to each element in the matching element collection.
Instance:
<div>
<span id= "SP1" >zhenheinfo</span>
<a href= "#" ><span>welcome to </span>zhenheinfo</a>
<p id= "P1" > Welcome to <span> and information </span></p>
<p id= "P2" > Welcome to Zhen and information </p>
<span id= "SP2" > Information </span>
</div>
Action: $ ("#p1"). Prev (); Result: Get <a></a> node.
Action: $ ("#p1"). Next (); Result: Get <p id= "P2" ></p> node.
Action: $ ("#p1"). Prev ("span"); Result: Get <span id= "SP1" ></span> node.
Action: $ ("#p1"). Next ("span"); Result: Get <span id= "SP2" ></span> node.
. Prevall ([selector]). gets all the sibling elements (selectors optional) before each element in the matching element collection.
. Nextall ([selector]). gets all the sibling elements (selectors optional) for each element in the matching element collection.
Instance:
<div>
<div>
<lable id= "Lab-1" > Chinese Dream </lable>
<a href= "#" ><span>welcome to </span><b>zhenheinfo</b></a>
<p> Welcome to <span> and information </span></p>
<span id= "SP1" > Information </span>
<lable id= "Lab-2" > Chinese Dream </lable>
</div>
<div>
<a href= "#" ><span>welcome to </span>zhenheinfo</a>
<p> Welcome to <span> and information </span></p>
<lable id= "lab-3" > Chinese Dream </lable>
</div>
</div>
Action: $ ("P"). Prevall ();
Results: Get <a></a>,<lable id= "Lab-1" ></label> a total of 3 nodes.
Action: $ ("P"). Nextall ();
Result: Get <span id= "SP1" ></span> and <lable id= "Lab-2" ></lable> and <lable id= "lab-3" ></lable > A total of 3 nodes.
Action: $ ("P"). Prevall ("a");
Results: 2 <a></a> nodes were obtained.
Action: $ ("P"). Nextall ("lable");
Result: Get <lable id= "lab-2" ></lable> and <lable id= "lab-3" ></lable> node.
Parent (/ ancestor ) node :
. Parent ([selector]). Gets the parent element (selector optional) for each element in the current matching element collection.
. parents ([selector]). Gets the ancestor elements (selectors optional) for each element in the current matching element collection.
Example:
<div>
<div id= "D1" >
<lable id= "Lab-1" > Chinese Dream </lable>
<a href= "#" ><span>welcome to </span><b>zhenheinfo</b></a>
<p> Welcome to <span> and information </span></p>
<span id= "SP1" > Information </span>
<lable id= "Lab-2" > Chinese Dream </lable>
</div>
<div>
<a href= "#" ><span>welcome to </span>zhenheinfo</a>
<p> Welcome to <span> and information </span></p>
<lable id= "lab-3" > Chinese Dream </lable>
</div>
</div>
Action: $ ("span"). parent ();
Result: Get <div id= "D1" ></div> and <a></a> and <p></p> a total of 5 nodes.
Action: $ ("span"). Parent ("div");
Result: Get <div id= "D1" ></div> node.
Action: $ ("P"). Parents ();
Result: A total of 7 nodes were obtained for <div></div> and <a></a> and <p></p>.
Action: $ ("P"). Parents ("div");
Results: 3 <div></div> nodes were obtained.
PS: About DOM node operations, what are the representative related operations? welcome message to add OH.
JQuery DOM node Operations-parent node, child node, sibling node