jQuery简单实现

前言:他山之石，可以攻玉

jQuery使用流程;

1.查找(创建)jQuery对象：$obj=$("selector");

2、调用jQuery对象的方法：$obj.doWork();

以下是JQuery的一个简单实现:

<body> 
<div id="first" class="same">first div</div>
<div id="second" class="same">second div</div> <br/>
</body> 
<style type="text/css"> 
.same{ width:100px; height:100px; background-color:#D6AC00; float:left; margin-left:10px; } 
</style>

<script type="text/javascript"> 
//实现自己的JQuery框架 
var JQuery = function(selector){ 
if ( window == this ) return new JQuery(selector); //创建JQuery对象
var arr = []; 
var doms;
//实现dom类型的id或tag查找
if(/^#/.test(selector)){   //id查找,并将结果放入arr中
    doms = document.getElementById(selector.substr(1));    
    arr.push(doms);
}else{                    //tag查找
    var doms = document.getElementsByTagName(selector); //①
    for(var i=0; i<doms.length; i++){ 
        arr.push(doms.item(i)); 
    } 
}
return this.setArray(arr); //将arr中的全部元素设置为JQuery对象的数组元素
} 

JQuery.prototype.setArray = function(arr){
　　this.length=0; //把JQuery对象变为伪数组，类似于①处的doms,具有length属性但是不能使用push()或pop()
　　//[]是Array对象. 将arr的元素push到JQuery对象中. this为对象（但不为String对象）才可使用此方法 
　　[].push.apply(this, arr);  //此方法执行完成后JQuery对象
　　return this; 
} 

JQuery.fn = JQuery.prototype; 
var $ = JQuery; 

//方法扩展1)each 
JQuery.fn.each = function(method){ 
for(var i=0,l=this.length; i<l; i++){ 
method.call(this[i],i); 
} 
} 
//方法扩展2)show 
JQuery.fn.show = function(){ 
this.each(function(i){ 
alert("索引:"+i+" 节点id:"+this.id+" 文本值:"+this.innerText); 
}); 
} 
//debugger 
$("#first").show();  // 索引:0 节点id:first 文本值:first div
$("div").show(); // 索引:0 节点id:first 文本值:first div       索引:1 节点id:second 文本值:second div

</script>

 补充：javascript是个弱类型的语言。

例如：

var n=new Number(2);
n.age=10;
[].push.apply(n,[20]);
alert(n);       //2
alert(n.age);   //10
alert(n[0]);    //20

//但‘string’类型的对象不能转换为数组对象

posted @ 2017-10-25 07:39  Don1911  阅读(228)  评论(0)    收藏  举报