手写jQuery框架

功能的实现只是机械地调用,框架的编写才是代码的升华

;
(function(window) {
	function jQuery(option) {
		this.event=[];
        switch(typeof option){
        	case "function":addEvent(window,"load",option);
        	break;
        	case "string":switch(option.charAt(0)){
        		case "#":
        		  var obj=document.getElementById(option.substring(1));
        		  this.event.push(obj);
        		  break;
        		case ".":
        		  this.event=getClass(document,option.substring(1));
        		  break;
        		default:
        		break;	
        		
        	}
        	break; 
        	default:
        	break;
        }
	}
	jQuery.prototype={
		click:function(fn){
			/*
			 *this是运行时绑定,指向的调用该方法的对象
			 *this.event是一个数组,不能直接添加事件绑定,这里用到for循环 
			 */
			for(var i=0;i<this.event.length;i++){
				addEvent(this.event[i],"click",fn);
			}
		},
		css: function(){
			
		},
		animate:function(){
			
		},
		//……………………………各种方法
	}
    function addEvent(obj,event,fn){//绑定事件
		//console.log("nihao");
		obj.addEventListener(event,fn,false);//采用addEventListener可以同时绑定多个事件
		//console.log(event); 
		      
	}
    function getClass(ohtml,oclass){
    	var elementArr=ohtml.getElementsByTagName("*");
    	var result=[];
    	for(var i=0;i<elementArr.length;i++){
    		if(elementArr[i].className===oclass){
    			result.push(elementArr[i]);
    		}
    		
    	}
    	return result;
    }
	function $(option) {
	   return new jQuery(option);
	}
	
    window.jQuery=window.$=$;
})(window)  


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值