脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-小谈Jquery框架，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 现在jquery框架对于开发人员基本上是无人不知，无人不晓了，用起来十分的方便，特别是选择器十分强大，提高了我们的开发速度。但是好多人也只是停留在了会用的基础上，我个人觉得会用一个框架不算什么，只能说明你对那个框架比较熟悉，知道里面的思想和实现才是王道。有好多大牛对Jquery框架进行了剖析，今天我只是根据我的见解来分析一下。
一段代码如下：
(function (win) {
VAR _$ = function (selector, context) {
return new _$.PRototyPE.InIT(selector, context);
}
_$.prototype = {
Init: function (selector, context) {
this.elements = [];
var context = context || document;
if (context.querySelectorAll) {
var arr = context.querySelectorAll(selector);
for (var i = 0; i < arr.length; i++) {
this.elements.push(arr[i]);
}
}
////这一块是选择器的实现,没有写完，可以自己实现
},
each: function (callback) {
if (this.elements.length > 0) {
for (var i = 0; i < this.elements.length; i++) {
callback.call(this, i, this.elements[i]);
}
}
}
}
_$.prototype.Init.prototype = _$.prototype;
window.$ = _$;
})(window || global);
一般的我们写一个函数，调用的方法如下：
var Demo=function(){
}
Demo.prototype= {
method:function(){
}
}
var demo=new Demo();//实例化Demo
之后我们可以调用Method方法：
demo.method();
如果这样的话，我们每次都要实例化一下，才能调用里面的方法，岂不是有点儿烦？
我想直接这样调用：Demo().method();这样不是省了一段代码（哈哈，程序员都喜欢偷懒）。
那么我们再写一段代码：
var demo=function(){
return new Demo();
}
然后就可以demo().method()这样调用了。
如果你理解了我讲的这个，相信下面的代码你就会明白了：
var _$ = function (selector, context) {
return new _$.prototype.Init(selector, context);
}
接下来我们再看看_$.prototype.Init方法的扩展
Init: function (selector, context) {
this.elements = [];
var context = context || document;
if (context.querySelectorAll) {
var arr = context.querySelectorAll(selector);
for (var i = 0; i < arr.length; i++) {
this.elements.push(arr[i]);
}
}
////这一块是选择器的实现,没有写完，可以自己实现
}
这里面有selector，context两个参数：
selector其实就是所谓的选择器符号了，我们是根据这个来找到dom节点对象的。
context就是我们所说的执行上下文了，通常都是window,这个是可选参数，只是为了以后的扩展。
然后我们要获取节点对象了
var arr = context.querySelectorAll(selector);
document.querySelector和document.querySelectorAll是w3c标准新加入的方法 ，是已经写好的选择器，但是ie8以下的版本不支持。
我们要优先查看有没有这个方法，有的话就直接用这个了。
没有就直接用document.getElementById, document.getElementsByClassName(IE8以下不兼容，须扩展)， document.getElementsByName,document.getelementsbytagname扩展了
（这个后面会讲具体实现）。
this.elements=[]保存查询出的dom节点对象。
然后说说each方法，这个其实是用回掉简化 elements的循环。
each: function (callback) {
if (this.elements.length > 0) {
for (var i = 0; i < this.elements.length; i++) {
callback.call(this, i, this.elements[i]);
}
}
}
这些方法我们都实现了，但是有一个问题：怎么让Init方法的this.elements这个属性让$也能共享呢？他们的作用域不一样呢。
var _$ = function (selector, context) {
return new _$.prototype.Init(selector, context);
}
我们最终得想法其实是想用$().method()这种方式去对dom节点做事件绑定，动画效果，样式设置等等处理。
我们知道：如果让两个对象共享一个属性，那么有一个方法就是让他们的原型指向一致
那么，关键的一段代码上场了：
_$.prototype.Init.prototype = _$.prototype;
这样之后我们就可以让_$和Init实现对elements的共享了。
Jquery框架的核心代码其实就是这些了。后面就可以对$进行方法扩展了。
今天就讲到这，有些说法不是很规范，但是应该能看懂，后面会陆续讲各个方法的具体实现。。。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-小谈Jquery框架全部内容，希望文章能够帮你解决javascript代码实例教程-小谈Jquery框架所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。