jQuery與javascript對照學(xué)習(xí) 獲取父子前后元素實現(xiàn)代碼

更新時間：2009年10月13日 20:54:58 作者：

jQuery與javascript對照學(xué)習(xí)(獲取父子前后元素) ，需要的朋友可以參考下，看看與js有什么不同。

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery與javascript對照學(xué)習(xí)(獲取父子前后元素)</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)轉(zhuǎn)化為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，當(dāng)成屬性來取 } 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="7zv33j3"   class="c1" onclick="fChild(this);"> <div   class="5j33pjd"   id="first" onclick="fNext(this);">first</div> <div   class="pvphl3p"   id="second" onclick="fPrev(this);">second</div> <div   class="h35bjtr"   id="third" onclick="fParent(this);">parent</div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

jquery中獲取元素里某一特定子元素的代碼
這篇文章主要介紹了jquery中獲取元素里某一特定子元素的代碼,需要的朋友可以參考下
2014-12-12
Jquery 組合form元素為json格式,asp.net反序列化
Jquery組合form元素為json格式,asp.net反序列化實現(xiàn)代碼，大家可以具體的看下面的說明。
2009-07-07
點擊彈出層外區(qū)域關(guān)閉彈出層jquery特效示例
擊彈出層，點擊彈出層外區(qū)域關(guān)閉彈出層，點擊關(guān)閉關(guān)閉彈出層jquery特效，具體代碼如下，喜歡的朋友可以學(xué)習(xí)下
2013-08-08
jQuery操作select的實例代碼
jQuery操作select的實例代碼，這篇比較簡單，如果想要想了解更多可以參考腳本之家以前發(fā)布的文章
2012-06-06
jQuery提交多個表單的小技巧
本節(jié)主要介紹了jQuery提交多個表單的小技巧,需要的朋友可以參考下
2014-07-07
jQuery插件jPaginate實現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。
2015-05-05
圖標(biāo)線性回歸斜著移動到指定的位置
圖標(biāo)斜著移動到指定的位置如何實現(xiàn)，本文給予了詳細(xì)的解決方法，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
利用jQuery+localStorage實現(xiàn)一個簡易的計時器示例代碼
這篇文章主要給大家介紹了關(guān)于利用jQuery+localStorage實現(xiàn)一個簡易的計時器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-12-12
jquery easyui如何實現(xiàn)格式化列
本篇文章主要介紹了jquery easyui如何實現(xiàn)格式化列，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
在myeclipse中如何加入jquery代碼提示功能
這篇文章主要介紹了在myeclipse中如何加入jquery代碼提示功能,需要的朋友可以參考下
2014-06-06