Javascript 鏈式調用實現代碼(參考jquery)

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Javascript 鏈式調用實現代碼(參考jquery)

編輯：JQuery特效代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Javascript鏈式調用</title> 
<script type="text/javascript"> 
function ele(){ 
this.elements=[]; 
var element; 
if(typeof arguments[0]=="string"){ 
element=arguments[0]; 
if (element.slice(0, 1) == '#') { 
element = document.getElementById(element.slice(1)); 
this.elements.push(element); 
}else if(element.slice(0,1)=='.'){ 
element=element.slice(1); 
var es = document.body.getElementsByTagName('*'); 
for (var i = 0, j = es.length; i < j; i++) { 
if (element.indexOf(es[i].className) != -1) { 
//alert(111); 
this.elements.push(es[i]); 
} 
} 
}else{ 
this.elements = document.getElementsByTagName(element); 
//alert(elements[0].id); 
} 
}else{ 
element=this; 
this.elements.push(element); 
} 
} 
ele.prototype.each=function(fn){ 
for(var i=0,l=this.elements.length;i<l;i++){ 
fn.call(this,this.elements[i]); 
} 
return this; 
}; 
ele.prototype.setStyle=function(prop,value){ 
this.each(function(el){ 
el.style[prop]=value; 
}); 
return this; 
}; 
ele.prototype.show=function(){ 
this.setStyle("display","block"); 
return this; 
}; 
window.$=function(){ 
return new ele(arguments[0]); 
}; 
</script> 
</head> 
<body> 
<div id="test" class="ttt" style="width:100px; height:100px; background-color:red; display:none;"></div> 
<div class="ttt" style="width:100px; height:100px; background-color:black; display:none;"></div> 
<script type="text/javascript"> 
$('.ttt').setStyle('width','300px').show(); 
　　　　 //$('#test').setStyle('width','300px').show(); 
　　　　 //$('div').setStyle('width','300px').show(); 
</script> 
</body> 
</html>

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

上一頁:jquery 輪換顯示第一小個例子
下一頁:jQuery模板技術和數據綁定實現代碼

JQuery特效代碼

jQuery 版元素拖拽原型代碼: 本文主要針對拖拽原型進行解析，給剛接觸 JQuery 的愛好者一個簡單的示例。在引入 Jquery.
jQuery調用AJAX時Get和post公用的亂碼解決方法實例說明: 以前在新浪博客寫過js調用AJAX時Get和post的亂碼解決辦法，但是使用js代碼比較繁瑣，我們在
跨域請求之jQuery的ajax jsonp的使用解惑: 直接執行了error方法提示錯誤——ajax jsonp之前並沒有用過，對其的理解為跟普通的ajax

DIV CSS 佈局教程網

相關文章