jQuery是样工作的.docVIP

jQuery是怎样工作的 介绍 　　jQuery是时下最为流行的JavaScript库。它使用CSS选择器样式语法获取文档对象模型(DOM)中的元素到已包装的对象集合中，然后使用jQuery方法操纵这些元素来达到不同的效果。尽管jQuery的使用是非常方便和直观的，我们还是需要弄懂它背后的机制来更好的掌握它。 　　jQuery中的基本概念 　　在我们深入研究jQuery库前，需要了解一些jQuery中的一些基本概念。 　　$/jQuery对象和$()/jQuery()方法 　　$/jQuery对象是一个全局对象，通过它来访问所有的jQuery方法。 　　 　　它也是一个方法对象，所以使用它最通常的方法是通过$/jQuery()方法。$/jQuery()方法可以用来选择DOM中的一组元素。它也是一个包装函数，一个$/jQuery()方法的简单例子： 　　$(“#ABC”); 　　or 　　jQuery(“#ABC”); 　　传给$/jQuery()方法的参数是选择器( selector)。选择器是一个有CSS选择器样式语法的表达式。在上面的例子中，我要选择id等于 #ABC 的元素 　　包装集合(Wrapped set) 　　包装集合是一个类似数组的结构，里面包含了所有已选择的DOM元素。上面的$(#ABC)返回了一个包装集合。你可以像遍历数组那样访问包装集合或者通过索引访问。更重要的是，你可以在所有被选择的元素上应用jQuery方法。 　　jQuery $()/jQuery()方法在后台是怎么工作的 　　因为大多数jQuery方法调用都是以$()/jQuery()开头的，所以我们有必要弄懂在这后面发生了什么。在深入讨论前，我们先看看$()/jQuery()对象是在哪定义的。$/jQuery对象是jQuery方法的访问点，是在jQuery中定义的一个全局方法变量。这是在jQuery源码中定义它的那一行： 　　// Expose jQuery to the global object 　　window.jQuery = window.$ = jQuery; 　　window对象代表浏览器中打开的窗口，把$/jQuery放到window下，它就得定义为一个全局对象并且可以在当前打开的窗口中访问 　　但是，上面一行源码最的jQuery是什么?它被声明在jQuery库开始的地方。 　　var jQuery = (function() { 　　… 　　这所有的魔法都发生在jQuery对象的声明表达式中，如果你直接往里面看，可能会迷茫，所以让我来简化它吧。 　　简化版jQuery库源代码 　　警告：简化版本仅仅为了研究目的，它不并具有jQuery提供的所有功能，不要把它用在真实环境中。 　　var jQuery = (function () 　　{ 　　// Define a local copy of “k” 　　var k = function (selector, context) 　　{ 　　// The k object is actually just the init constructor enhanced 　　var kobj = new k.fn.init(selector, context); 　　return kobj; 　　}; 　　//Define k’s fn prototype, specially contains init method 　　k.fn = k.prototype = { 　　init: function (selector, context) 　　{ 　　if (!selector) 　　{ 　　return this; 　　} 　　} 　　}; 　　// Give the init function the “k” prototype for later instantiation 　　k.fn.init.prototype = k.fn; 　　// Return “k” to the global object 　　return k; 　　})(); 　　从上面的额源码你可以看到jQuery函数变量被定义为一个匿名方法的执行结果。 　　小贴士：怎样定义匿名函数 在Javascript中你可以定义一个匿名函数并马上调用它 例如， (function () { alert(“hello world”); })(); 通过把函数表达式 function() { alert(“hello word”); } 放进括号中 (function() { alert(“hello world”); }) 你可以在外面再加个括号马上调用它 　　在这个匿名函数内部定