首页 ›存档› 技术 › 查看内容

（轻松学PHP-JS篇）用原生JavaScript实现jQuery的某些简单功能

2018-3-30 13:00 |来自: 互联网 298 0

摘要: PHP自学与交流中心QQ群：435916459 $()选择器的实现 jQuery是面向对象的，所以自己编写的也要是面向对象的，看看基本的结构 // 定义lQuery对象function lQuery(lArg){}function lQ(lArg){return new lQuery(lArg); ...

PHP自学与交流中心QQ群：435916459

$()选择器的实现

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

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

上一篇：超详细JS中常见排序算法详解下一篇：年薪20万的PHP工程师应备的技能

（轻松学PHP-JS篇）用原生JavaScript实现jQuery的某些简单功能

$()选择器的实现

相关分类