jQuery與javascript對照學習獲取父子前后元素實現代碼

2019-11-21 01:05:30

字體：大中小

來源：轉載

供稿：網友

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery與javascript對照學習(獲取父子前后元素)</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){//許多時候需要元素之間沒有間隙才能取到 //alert(obj.nextSibling.id); alert(jQuery(obj).next().attr("id"));//傳遞this，通過$(obj)轉化為jQuery對象 } function fPrev(obj){ //alert(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"));//取得className，當成屬性來取 } function fChild(obj){ //var childs = obj.childNodes; var childs = jQuery(obj).children(); for(i=0;i<childs.length;i++){ alert(childs[i].id); } //jQuery的each遍歷 } </script> </head> <body> <div   id="iwvjtn8m0"   class="c1" onclick="fChild(this);"> <div   class="iwvjtn8m0"   id="first" onclick="fNext(this);">first</div> <div   class="iwvjtn8m0"   id="second" onclick="fPrev(this);">second</div> <div   class="iwvjtn8m0"   id="third" onclick="fParent(this);">parent</div> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：通用javascript腳本函數庫方便開發

下一篇：jquery pagination插件實現無刷新分頁代碼