jQuery

jQuery源码

jQuery源码的基本结构：

定义了jQuery函数，并使它成为全局变量   window.jQuery = window.$ = jQuery;

jQuery函数定义:

var jQuery = function( selector, context ) {
                  return new jQuery.fn.init( selector, context );
              }

jQuery函数的原型：

jQuery.prototype = {

    ........................

length: 0,
  sort: [].sort,
  splice: [].splice

有了这几个属性，它就是一个类数组对象

}

jQuery初始化函数：

jQuery.fn.init = function(selector, context){

    查找元素

    return this;

}

jQuery函数有多个成员（JS里函数可以有成员，成员与函数体无关）其中：

jQuery.fn.init.prototype = jQuery.fn =jQuery.prototype;

jQuery.fn.extend=jQuery.extend;

几个使用过程的原理：

1、通过选择器获得jQuery对象 $("#id")

     即调用了jQuery函数，返回jQuery.fn.init构造的对象，这个对象以jQuery.fn.init.prototype为原型，即以jQuery.fn 、jQuery.prototype为原型，因此jQuery对象也是一个类数组对象，并且有jQuery.fn的所有成员，数组的元素为DOM对象。

2、扩展jQuery(插件开发)

       jQuery.fn.extend=jQuery.extend = function(object){把object的成员扩展到this}

      $.fn.extend(object);方法体里的this指向jQuery.fn即jQuery.prototype，因此扩展到jQuery原型。

    $.extend(object);方法体里的this指向$，因此扩展到jQuery函数。

jQuery使用

1、jQuery对象的结构:
[DOM对象]
{
length：DOM对象的长度
context：document对象（也是个DOM对象）
selector：选择器的字符串
__proto__：各种继承而来的jQuery方法
}

2、页面加载完成事件

$(function)等效于$(document).ready(function)或 $(window).on("load",function)

3、$也可以把非DOM数组打包成jQuery对象，从而可以使用jQuery对象的那些操作数组的函数。

3、jquery插件式的UI组件

UI 组件的对外接口应该包括：构建方法、事件、实例方法、属性值


(function($) {
    // 给jquery对象添加一个成员，传入参数
// 这个插件方法 作为 UI 组件的构建方，使用：$('#id').plugin(options);
    $.fn.plugin = function(options) {
        // each 对jquery对象里的DOM对象一一处理，后，返回当前jquery对象，使得能被链式调用
        return this.each(function() {
   // 可以把一些数据绑到DOM对象上
   this.pluginId = 1;
            var $this = $(this);
// 插件逻辑 
/**************************************************/
// 某种情况下触发事件，使用：$('#id').on('eventName',function(event,data){});
$this.trigger('eventName','data');
        });
    }

// 实例方法 和 属性值 也通过插件方法实现


})(jQuery);
//匿名立即执行函数，闭包

选择器

先后流行的选择器引擎有：getElementBySelector、cssQuery

jquery采用的选择器sizzle 的工作步骤: 1、切割选择符（便于后面，先通过选择符的后段查找，再以选择符前段过滤）2、查找（通过四大原生查找函数，最差的情况就是getElementByTagName(*)），过滤，去重

最新的浏览器自带原生选择器API：querySelecter、querySelecterAll