JQuery DOM node Operations-parent node, child node, sibling node

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

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