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

前端之家收集整理的这篇文章主要介绍了详解用原生JavaScript实现jQuery的某些简单功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

大致介绍

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

定义自己的函数库lQuery

$()选择器的实现

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

方法 lQuery.prototype.css = function(){}; // html()方法 lQuery.prototype.html = function(){};

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

函数,但是只会执行一次 // window.onload = lArg; // break; } }

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

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

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

可以使用这样调用

函数,但是只会执行一次 // window.onload = lArg; // break; lQbind(window,'load',lArg); break; }

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

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

先来仿写$('.div')

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

获取class属性 function getClass(obj,name){ var arr = []; var elems = obj.getElementsByTagName('*'); for(var i=0;i

仿写$('#div')

仿写$('div')

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

仿写$(对象)的方法

// window document case 'object': this.elements.push(lArg); break;

html()的实现

html()方法分为有参和无参

方法 lQuery.prototype.html = function(str){ if(str){ //设置 for(var i=0;i

on()方法的实现

利用前面实现的绑定函数可以很容易的实现

lQuery.prototype.on = function(eventName,fn){ for(var i=0;i

click()和mouSEOver()方法的实现

利用on()方法可以容易的实现

方法 lQuery.prototype.click = function(fn){ this.on('click',fn); return this; } // mouSEOver()方法 lQuery.prototype.mouSEOver = function(fn){ this.on('mouSEOver',fn); return this; }

hide()和show()方法的实现

方法 lQuery.prototype.hide = function(){ for(var i=0;i方法 lQuery.prototype.show = function(){ for(var i=0;i

hover()方法的实现

方法 lQuery.prototype.hover = function(fnover,fnout){ this.on('mouSEOver',fnover); this.on('mouSEOut',fnout); return this; }

css()方法的实现

实现$('div').css('width')和$('div').css('width','200px')

定义了getStyle()方法是为了能找到行内样式以外的样式

获取属性 function getStyle(obj,attr){ if(obj.currentStyle[attr]){ obj.currentStyle[attr]; }else{ obj.getComputedStyle(obj,false)[attr]; } }

attr()方法的实现

用了和css()不同的方法

方法 lquery.prototype.attr = function(attr,value){ if(arguments.length == 2){ //设置 for(var i=0;i获取 return this.elements[0].getAttribute(attr); } return this; };

eq()方法的实现

 实现$('div').eq(1)

 由于eq()方法返回的对象要操作许多lQuery的方法,所以返回的对象必须是lQuery对象

index()方法的实现

实现$('div').index() 返回这个元素在同辈元素中的位置

阻止默认事件和阻止事件冒泡

在jQuery中 return false 是阻止默认事件和事件冒泡,所以我们要对lQbind函数进行修改,通过判断绑定的函数的返回值是否为false来判断是否要进行阻止默认事件和阻止事件冒泡

find()方法的实现

仿写$('div').find('.Box')和$('div').find('#Box')方法

这里涉及到通过判断find()参数第一个字符的方法来进行不同的操作和$()方法差不多,在循环时要使用concat()方法来连接数组,最后返回一个lQuery对象

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

猜你在找的jQuery相关文章