<ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <title>jquery Learning with JavaScript (get parent-child elements) </ title> <style type= "Text/css" > c1{background-color:green;padding:20px; . c2{background-color:red;padding:20px;} . C1 Div{background-color:gray;} </style> <script type= "Text/javascript" src= "style/jquery-1.3.2.min.js" ></script> <script type = "Text/javascript" > Function fnext (obj) {//many times require no gap between elements to get to//alert (obj.nextSibling.id); Alert (obj). Next (). attr ("id");//pass this to the JQuery object} function Fprev (obj) {//alert by $ (obj) Obj.previousSibling.id); Alert (JQuery (obj). Prev (). attr ("id")); function Fparent (obj) {//alert (obj.parentNode.className); Alert (JQuery (obj). Parent (). attr ("class")); jquery (obj). Parent (). Removeclass ("C1"). AddClass ("C2") Alert (jquery (obj). Parent (). attr ("ClassName")); Gets classname as a property to fetch} function Fchild (obj) {//var childs = obj.childnodes; var childs = jQuery (obj). Children (); for (I=0;i<childs. length;i++) {alert (childs[i].id); Each traversal of//jquery} </script> </pead> <body> <div class= "C1" onclick= "Fchild (this);" > <div id= "the" "onclick=" Fnext (this); >first</div> <div id= "second" onclick= "Fprev (this);" >second</div> <div id= "third" onclick= "fparent (this);" >parent</div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
