JQuery 的元素选择器的实现原理

jQuery源码的结构

(function( window, undefined) {
   
    var jQuery = (function() {
       // 构建jQuery对象
       var jQuery = function( selector, context ) {
           return new jQuery.fn.init( selector, context, rootjQuery );
       }
   
       // jQuery对象原型
       jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init:  function ( selector, context, rootjQuery ) {
           }
       };
   
       // 合并内容到第一个参数中，后续大部分功能都通过该函数扩展
       // 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数
       jQuery.extend = jQuery.fn.extend = **function**() {};
      
       // 在jQuery上扩展静态方法
       jQuery.extend({
           
       });
 
        // 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展
       return jQuery;
   
    })();
   
    window.jQuery = window.$ = jQuery;
})(window);

下面是模拟jQuery实现简单的获取元素内容

    
    



    

        测试文本
    

结论

所以，JQuery 其实就是在一个匿名自调用函数内来实现把JQuery 作为 window 对象的方法，这样，当我们想使用 JQuery 的时候，就可以通过 window.JQuery() 或 window.$() 来使用，因为 window 对象的属性和方法都是全局的，所以也可以简写为 JQuery() 或 $()。