详解用原生JavaScript实现jQuery的某些简单功能

大致介绍

学习了妙味，用原生的JavaScript实现jQuery中的某些部分功能

定义自己的函数库lQuery

$()选择器的实现

jQuery是面向对象的，所以自己编写的也要是面向对象的，看看基本的结构

// 定义lQuery对象function lQuery(lArg){}function lQ(lArg){ return new lQuery(lArg);}// css()方法lQuery.prototype.css = function(){};// html()方法lQuery.prototype.html = function(){};

先来仿写jQuery中的$(函数)的方法

// 定义lQuery对象function lQuery(lArg){ // 用typeof判断参数的类型是 function 、 switch( typeof lArg){ case 'function':  // 如果采用这种写法，给lQ绑定相同的函数，但是只会执行一次  // window.onload = lArg;  // break; }}

如果写出这样的函数就会出现问题

lQ(function(){  alert(1); }); lQ(function(){  alert(2); });

这样就只会弹出'2'，但是在jQuery中都会弹出，所以上面的方法不对，我们采用事件绑定的形式来解决这个问题

// 绑定事件函数function lQbind(obj,eventName,fn){ // 标准浏览器 if(obj.addEventListener){ obj.addEventListener(eventName,fn,false); }else{ // IE浏览器 obj.attachEvent('on'+eventName,fn); }}

可以使用这样调用

switch( typeof lArg){ case 'function':  // 如果采用这种写法，给lQ绑定相同的函数，但是只会执行一次  // window.onload = lArg;  // break;  lQbind(window,'load',lArg);  break; }

仿写jQuery中的$('.div')、$('#div')、$('div')三种方法

这三种方法的区别是第一个字符的不同，所以我们可以根据第一个字符的不同来进行区别对待

先来仿写$('.div')

   // '.div'  case '.':  this.elements = getClass(document,lArg.substring(1));   break;

由于getElementsByClassName()是HTML5里的方法，像IE8以下不兼容所以我们自己写了一个简单的getClass方法

 // 获取class属性function getClass(obj,name){ var arr = []; var elems = obj.getElementsByTagName('*'); for(var i=0;i<elems.length;i++){ if(elems[i].className == name){  arr.push(elems[i]); } } return arr;}

仿写$('#div')

  case '#':   this.elements.push(document.getElementById(lArg.substring(1)));   break;   // '.div'  case '.':

仿写$('div')

default: // getElementsByTagName返回的是一个类数组NodeList,为了防止以后出现麻烦，要把他转为一个 // 数组 this.elements = toArray(document.getElementsByTagName(lArg)); break;

由于getElementsByTagName返回的是一个类数组NodeList,为了防止以后出现麻烦，要把他转为一个数组，自定义了一个toArray方法

// 将一个类数组转为真正的数组function toArray(lickArr){ var arr = []; for(var i=0;i<lickArr.length;i++){ arr.push(lickArr[i]); } return arr;}