你知道jquery是怎么寫的么?看完我寫的這個(gè)例子你就知道原理的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="網(wǎng)站,微網(wǎng)站,App建設(shè)聯(lián)系QQ:632175205 陳先生" />
<title>你知道jquery是怎么寫的么?看完我寫的這個(gè)例子你就知道原理的</title>
</head>
<body>
<p>這個(gè)只是一個(gè)例子</p>
<h1 id="myh1">我是h1標(biāo)題<span style="display:none;">我是span</span></h1>
<script>
//原創(chuàng)QQ:632175205
function $(idname){
var cla={
init:function(name){
var t=this;//this指向t變量,this就是指cla這個(gè)變量(t也是cla),這樣子以便其它函數(shù)訪問,因?yàn)槊總(gè)函數(shù)都有自己的this
if(name.indexOf("#")!=-1){
var arr=name.split("#");
var id=arr[1];
t.obj=document.getElementById(id);
}
},css:function(opt){
var t=this;
if(t.obj!=null){
for(var key in opt){
t.obj.style[key]=opt[key];
}
}
return t;//迷局就是return ,這里的t就是cla這個(gè)變量,也叫類吧!這里一定要返回不然就不能.css({'color',"#fff"}).css({'color',"#fff"})一直點(diǎn)一下的
},show:function(){
var t=this;
if(t.obj){
t.obj.style.display="";
}
return t;//迷局就是return ,這里的t就是cla這個(gè)變量,也叫類吧!這里一定要返回不然就不能.css({'color',"#fff"}).css({'color',"#fff"})一直點(diǎn)一下的
},hide:function(){
var t=this;
if(t.obj){
t.obj.style.display="none";
}
return t;//迷局就是return ,這里的t就是cla這個(gè)變量,也叫類吧!這里一定要返回不然就不能.css({'color',"#fff"}).css({'color',"#fff"})一直點(diǎn)一下的
},find:function(lable){
var t=this;
var childs=t.obj.getElementsByTagName(lable);//getElementsByTagName獲取的是一個(gè)數(shù)組元素,getElements后有個(gè)s的
if(childs.length){
t.obj=childs[0];//對象改變成現(xiàn)在查到的這個(gè)例子
}
return t;//迷局就是return ,這里的t就是cla這個(gè)變量,也叫類吧!這里一定要返回不然就不能.css({'color',"#fff"}).css({'color',"#fff"})一直點(diǎn)一下的
}
}
cla.index=0;//初始值
cla.init(idname);
return cla;
}
$("#myh1").css({"color":"#FF0000"}).css({"background-color":"#000000"}).find("span").css({"font-size":"100px","color":"#FFFFFF"}).show().css({"border":"solid #F36 1px"});//看調(diào)用方式是不是跟你手里的用的jq一模一樣呢!
</script>
</body>
</html>