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

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery與javascript對照學習獲取父子前後元素實現代碼

編輯：JQuery特效代碼

<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 class="c1" onclick="fChild(this);"> 
<div id="first" onclick="fNext(this);">first</div> 
<div id="second" onclick="fPrev(this);">second</div> 
<div id="third" onclick="fParent(this);">parent</div> 
</div> 
</body> 
</html>

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

上一頁:jquery pagination插件實現無刷新分頁代碼
下一頁:JQuery 綁定事件時傳遞參數的實現方法

JQuery特效代碼

jQuery彈性滑動導航菜單實現思路及代碼: . 代碼如下: <!-- 本文參照了該作者的思路：http://runjs.cn/code/o
jquery改變disabled的boolean狀態的三種方法: 第一種：改變disabled的boolean狀態，具體代碼及解釋如下：代碼如下: . 代碼如下:
解析Jquery中如何把一段html代碼動態寫入到DIV中(實例說明): . 代碼如下:nav1 = <div style=width:145px;height:62p

DIV CSS 佈局教程網

相關文章