这次给大家带来jQuery框架使用详解，jQuery框架使用的注意事项有哪些，下面就是实战案例，一起来看一下。
下面将使用简化的代码来介绍，主要关注jQuery的实现思想~>_
//匿名立即执行函数
//.防止污染全局空间
//.选择性保护内部变量
(function(window, undefined){
//第二参数undefined设置而不传的原因：
// 外部发生这种情况:var undefined = 时，undefined会被篡改
// 设置第二参数而不传，则undefined就会被重置回原来值
function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype;
//对外暴露jQuery：将jQuery绑定在window上面
window.$ = jQuery;
})(window);
--------------------------
jQuery一开始使用匿名立即执行函数包裹其内部，并在第5行对外暴露；
所谓的匿名立即执行函数即这个函数是匿名的（没有名字）、定义完后立即调用的；
当我们在外部调用$("p")时，其实调用的就是内部的jQuery("p")；
(function(window, undefined){
//内部变量
//对外暴露jQuery：将jQuery绑定在window上面
window.$ = jQuery;
})(window);
$("p")--------------------------
好，接下来稍复杂点，下面的代码主要实现如图的互相引用：
以$('p')调用为例：
从第2行代码可以看出，jQuery使用jQuery.prototype.init来实例化jQuery对象，但这会带来一个问题：
实例化的对象只能访问到init下的变量，而不能访问到jQuery.prototype（jQuery对外提供的API绑定在该对象下）。
于是乎，补写第21行代码，将init.prototype指向jQuery.prototype即可。
这样就完成了，使用init来实例化，且可以在init作用域下访问到jQuery.prototype。
function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype;为什么使用jQuery.prototype.init来实例化对象，而不直接使用jQuery函数呢？
假设使用jQuery函数来实例化对象，这样对象之间的引用的确可以简化为 jQuery-->jQuery.prototype。
但是调用会变得繁琐起来：new $('p')，所以基于这个考虑（猜测(⊙０⊙)），在内部使用较为复杂的实现，来简化调用。
--------------------------
好，最后，再来看一下init的实现。同样也简化了代码，只实现了最常用的一种情况。
jQuery会把获取到的nodeList处理成数组（方便后续使用），并在其下挂载一些变量，如length,selector。
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle，这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
乐彼多用户商城系统，采用ASP.NET分层技术和AJAX技术，运营于高速稳定的微软.NET+MSSQL 2005平台；完全具备搭建超大型网络购物多用户网上商城的整体技术框架和应用层次LBMall 秉承乐彼软件优秀品质，后台人性化设计，管理窗口识别客户端分辨率自动调整，独立配置的菜单操作锁，使管理操作简单便捷。待办事项1、新订单、支付、付款、短信提醒2、每5分钟自动读取3、新事项声音提醒 店铺管理1
