zoukankan      html  css  js  c++  java
  • 模仿jquery的一些实现 第二版

    具体如下:

    //w作为window的形参,就表示window
    (function(w) {
    
    	// 定义一个全局的window.wyl变量,就类似于jquery里的$,Jquery对象
    	w.wyl;
    	/**
    	 * 模仿$(domObj)的形式,通过wyl(domObj)的方式把一个dom转成wyl对象
    	 * 
    	 * @param para
    	 * @returns {wyl} 这里的selector暂时只能是dom对象
    	 */
    	wyl = function(selector) {
    		this._selector = selector;
    		if (this == window) {
    			// 我自己原来写的
    			// return this.wyl;
    			return new wyl(selector);
    		} else {
    			// 用来保存选中的元素
    			this.elements = [];
    
    			// 判断selector的类型,因为jquery(xxx)中的xxx总共有三种类型,1 function ,2 字符串 ,如
    			// '#aa','.my'等等 ; 3 dom对象也就是object
    
    			switch (typeof selector) {
    			case 'function':
    				this.wylAddEvent(w, 'load', selector);
    				break;
    			// 模拟 #xx选择器
    			case 'string':
    				switch (selector.charAt(0)) {
    				case '#':// 按照id选择器
    					var obj = document.getElementById(selector.substring(1));
    					this.elements.push(obj);
    					break;
    				case '.':// 按照class选择器
    					this.elements = getEleByClas(document, selector
    							.substring(1));
    					break;
    				default: // 按照tagName
    					this.elements = document.getElementsByTagName(selector);
    				}
    				break;
    			case 'object':
    				this.elements.push(selector);
    				break;
    			default:
    				break;
    			}
    
    			// 根据name获取dom
    			/* var dom_ = document.getElementsByName('' + selector); */
    			/**
    			 * 根据 document.getElementsByName('' +selector);的形式获取到的dom对象
    			 * 有length属性,而通过getElementById获取的dom对象没有length属性
    			 * 
    			 */
    			/*
    			 * if (dom_.length) { alert(dom_.length); } else {
    			 * alert(dom_.innerHTML + '目前这个框架只能通过传入name属性来使用,无法通过id来解析dom对象'); }
    			 */
    
    			// 作用:返回当前对象,即返回window.wyl这个对象
    			// return this;
    			var this_ = [].push.apply(this, this.elements);
    			// 注意这里返回的不是this_而是this
    			return this;
    		}
    
    	}
    	// 根据class进行选择,即模拟class选择器
    	wyl.getEleByClas = function(oParent, sClass) {
    		var aEle = document.getElementsByTagName("*");
    		var aResults = [];
    		for (i = 0; i < aEle.length; i++) {
    			if (aEle[i].className == sClass) {
    				aResults.push(aEle[i]);
    			}
    		}
    		return aResults;
    	}
    
    	wyl.prototype.wylAddEvent = wyl.wylAddEvent = function(obj, sEv, fn) {
    		if (obj.attachEvent) {
    			obj.attachEvent('on' + sEv, fn);
    		} else {
    			obj.addEventListener(sEv, fn, false);
    		}
    	}
    
    	// wyl.prototype.isArr的作用:在所有的wyl对象上加上isArr(para)的function,
    	wyl.prototype.isArr = wyl.isArr = function(para) {
    		/**
    		 * 在wyl对象上添加工具方法isArr(obj) 实例:var flag = wyl.isArr(obj); 如果为true那么就说明是数组
    		 */
    		if (typeof para == 'object' && para instanceof Array) {
    			return true;
    		} else {
    			return false;
    		}
    	}
    
    	/**
    	 * 实现类似框架中的linkbutton()功能的方法 框架中的使用实例: $obj.linkbutton({ disabled:true });
    	 * 
    	 */
    	wyl.prototype.print = wyl.print = function(para) {
    		alert(para);
    		return this;
    	}
    
    	wyl.prototype.linkbutton = wyl.linkbutton = function(para) {
    		var _type = typeof para;
    		if (_type != 'object') {
    			return this.print('传入的参数必须是object');
    		}
    		// 存放传入的obejct类型的参数
    		var para_ = para || {};
    		var f = para_.disabled;
    		if (f == true) {
    			$(this).removeClass();
    			$(this).addClass('l-btn-disabled');
    			return this;
    		} else {
    			$(this).removeClass();
    			$(this).addClass('l-btn-abled');
    			return this;
    		}
    	}
    
    	// 传入window对象
    })(window)
    

      

  • 相关阅读:
    chrony软件使用说明
    使用cobbler批量安装操作系统(基于Centos7.x )
    kickstart模式实现批量安装centos7.x系统
    uCGUI字符串显示过程分析和uCGUI字库的组建
    Network boot from AMD Am79C970A
    关于TFTLCD硬件接口和驱动的问题
    (转)关于模拟地和数字地分开的问题解释!
    获取单片机代码运行时间的方法
    stm32类型cl、vl、xl、ld、md、hd的含义
    RS232转RS485电路图分析
  • 原文地址:https://www.cnblogs.com/Sunnor/p/5763056.html
Copyright © 2011-2022 走看看