Jquery源码探索
封装原理
这里参考的jquery来进行封装的一个常用方法的一个库,可作为自己的一个库
原理:创建一个构造函数,将所有方法放在该构造函数原型里,访问$()方法时,返回这个构造函数的实例化,这样就简单的实现了jquery的用法
function VQuery(vArg)
{
//用来保存选中的元素
this.elements=[]; switch(typeof vArg)
{
case 'function':
//window.onload=vArg;
myAddEvent(window, 'load', vArg);
break;
case 'string':
switch(vArg.charAt(0))
{
case '#': //ID
var obj=document.getElementById(vArg.substring(1)); this.elements.push(obj);
break;
case '.': //class
this.elements=getByClass(document, vArg.substring(1));
break;
default: //tagName
this.elements=document.getElementsByTagName(vArg);
}
break;
case 'object':
this.elements.push(vArg);
}
} VQuery.prototype.click=function (fn)
{
var i=0; for(i=0;i<this.elements.length;i++)
{
myAddEvent(this.elements[i], 'click', fn);
}
}; VQuery.prototype.show=function ()
{
var i=0; for(i=0;i<this.elements.length;i++)
{
this.elements[i].style.display='block';
}
}; VQuery.prototype.hide=function ()
{
var i=0; for(i=0;i<this.elements.length;i++)
{
this.elements[i].style.display='none';
}
}; VQuery.prototype.hover=function (fnOver, fnOut)
{
var i=0; for(i=0;i<this.elements.length;i++)
{
myAddEvent(this.elements[i], 'mouseover', fnOver);
myAddEvent(this.elements[i], 'mouseout', fnOut);
}
}; VQuery.prototype.css=function (attr, value)
{
if(arguments.length==2) //设置样式
{
var i=0; for(i=0;i<this.elements.length;i++)
{
this.elements[i].style[attr]=value;
}
}
else //获取样式
{
//return this.elements[0].style[attr];
return getStyle(this.elements[0], attr);
}
}; VQuery.prototype.attr=function (attr, value)
{
if(arguments.length==2)
{
var i=0; for(i=0;i<this.elements.length;i++)
{
this.elements[i][attr]=value;
}
}
else
{
return this.elements[0][attr];
}
}; VQuery.prototype.toggle=function ()
{
var i=0;
var _arguments=arguments; for(i=0;i<this.elements.length;i++)
{
addToggle(this.elements[i]);
} function addToggle(obj)
{
var count=0;
myAddEvent(obj, 'click', function (){
_arguments[count++%_arguments.length].call(obj);
});
}
}; VQuery.prototype.eq=function (n)
{
return $(this.elements[n]);
}; function appendArr(arr1, arr2)
{
var i=0; for(i=0;i<arr2.length;i++)
{
arr1.push(arr2[i]);
}
} VQuery.prototype.find=function (str)
{
var i=0;
var aResult=[]; for(i=0;i<this.elements.length;i++)
{
switch(str.charAt(0))
{
case '.': //class
var aEle=getByClass(this.elements[i], str.substring(1)); aResult=aResult.concat(aEle);
break;
default: //标签
var aEle=this.elements[i].getElementsByTagName(str); //aResult=aResult.concat(aEle);
appendArr(aResult, aEle);
}
} var newVquery=$(); newVquery.elements=aResult; return newVquery;
}; function getIndex(obj)
{
var aBrother=obj.parentNode.children;
var i=0; for(i=0;i<aBrother.length;i++)
{
if(aBrother[i]==obj)
{
return i;
}
}
} VQuery.prototype.index=function ()
{
return getIndex(this.elements[0]);
}; function $(vArg)
{
return new VQuery(vArg);
} function myAddEvent(obj, sEv, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+sEv, function (){
fn.call(obj);
});
}
else
{
obj.addEventListener(sEv, fn, false);
}
} function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var i=0; for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
} return aResult;
} function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
Jquery源码探索的更多相关文章
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- jQuery源码学习感想
还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...
- Jquery源码学习(第一天)
jQuery是面向对象的设计通过window.$ = window.jQuery = $; 向外提供接口,将$挂在window下,外部就可以使用$和jQuery $("#div1" ...
- jQuery源码 Ajax模块分析
写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...
- jQuery源码:从原理到实战
jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...
- 【菜鸟学习jquery源码】数据缓存与data()
前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...
- 从jquery源码中看类型判断和数组的一些操作
在深入看jquery源码中,大家会发现源码写的相当巧妙.那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣. 1.将类数组转化成数组 我想大家首先想到的方法是fo ...
- 读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一
背景: 有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期. 所以,网上寻找高手的源码分析.再经过自己思考,整理,验证.以求有所收获. 此篇为读高手艾伦<jQuer ...
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
随机推荐
- vue-cli3快速创建项目
文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn ...
- Python 新建程序
1.建立一个新的文件夹 2.建一个包 3.建一个程序项目 4.默认模板配置
- Java se基础(类的属性及关键字)
public:说明该类的访问类型是公有的,它生成的对象能被其他的对象调用! abstract:用来声明抽象类! final;如果一个类被声明成final类型,那么就不能再由它派生出子类. 可以简单的看 ...
- Mac 如何安装 chromedriver
1.使用brew 命令 前提是要安装 brew 这里不做介绍 使用命令 brew install chromedriver 如上图出现错误,根据提示可以使用如下命令安装 brew cask inst ...
- css无定宽水平居中
转载:http://www.cnblogs.com/jogen/p/5213566.html 这个博客的菜单ui还是棒棒的. 方法一 思路:显示设置父元素为:table,子元素为:cell-table ...
- Unity Shader入门精要之 screen post-processing effect
本篇记录了学习Unity Shader入门精要的屏幕后处理的一些知识点. OnRenderImage(RenderTexture src, RenderTexture dest) 以上函数是Unity ...
- 第 8 章 容器网络 - 055 - 创建 macvlan 网络
1.创建 macvlan 网络 在 host1 和 host2 中创建 macvlan 网络 mac_net1: docker network create -d macvlan --subnet=1 ...
- 一、win+git安装
最近公司版本控制准备弃用svn,采用git.所以在个人系统安装玩了下,留点爪印... 1.下载最新的 git 包(根据电脑系统) 官网地址:https://git-scm.com/download/w ...
- php oracle数据库clob和nclob字段
php oracle数据库clob和nclob字段 nclob类型 1.nclob不能使用php的stream_get_contents来获取数据库的资源内容, 2.并且nclob只能使用to_cha ...
- LeetCode--342--4的幂
问题描述: 给定一个整数 (32 位有符号整数),请编写一个函数来判断它是否是 4 的幂次方. 示例 1: 输入: 16 输出: true 示例 2: 输入: 5 输出: false 进阶:你能不使用 ...