jquery源码解析平常

介绍：JQuery是继prototype以后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各类浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将再也不支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML、events、实现动画效果，而且方便地为网站提供AJAX交互。jQuery还有一个比较大的优点是，它的文档说明很全，并且各类应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery可以使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只须要定义id便可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,作得更多)。
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可使开发更加便捷，例如操做文档对象、选择DOM元素、制做动画效果、事件处理、使用Ajax以及其余功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者能够很轻松的开发出功能强大的静态或动态网页。

1.$.each函数 原生js实现　

 var gt={
        each:function (object,callback)
        {
            var type=(function () {
               //分为不一样的几个类型
                switch (object.constructor){
                    case Object:
                        return 'Object';
                        break;
                    case Array:
                        return 'Array';
                        break;
                    case NodeList:
                        return 'NodeList';
                        break;
                    case HTMLCollection:
                        return 'HTMLCollection'
                    default:
                        return 'null';
                        break;
                }
            })()
            //为数组或者类数组 的状况下
            if(type==="Array" || type==='NodeList' || type==='HTMLCollection'){
                //因为存在类数组的nodelist和HTMLCollection，因此不能直接调用every方法
                //every() 方法用于检测数组全部元素是否都符合指定条件（使用指定函数检测数组中的全部元素）。
                //若是数组中检测到有一个元素不知足，则整个表达式返回 false ，且剩余的元素不会再进行检测，当且仅当全部元素都知足条件，则返回 true。
                //注意： every() 不会对空数组进行检测，不会改变原始数组。
                //用法 array.every(function(currentValue,index,arr), thisValue)
                /*
                * function(currentValue, index,arr)	必须。函数，数组中的每一个元素都会执行这个函数
                        函数参数:
                        参数	描述
                        currentValue	必须。当前元素的值
                        index	可选。当前元素的索引值
                        arr	可选。当前元素属于的数组对象
                        thisValue	可选。对象做为该执行回调时使用，传递给函数，用做 "this" 的值。
                        若是省略了 thisValue ，"this" 的值为 "undefined"
                */
                [].every.call(object,function (v,i) {
                    return callback.call(v,i,v) === false?false:true;
                })
            //为对象的状况下
            }else if(type==="Object"){
                for(var i in object){
                    if(callback.call(object[i],i,object[i])===false){
                        break;
                    }
                }
            }
        }
    }            

　　调用执行

   //数组调用
    gt.each([1,2,3,4],function (i, v) {
        console.log(v)
    })
    //对象调用
    gt.each([{name:"GT",age:10},{name:"Alice",age:11},{name:"Mike",age:12},{name:"Joe",age:13}],function (i, v) {
        console.log(v.name +'今天'+v.age+'岁了')
    })
    //元素集调用  两种元素集类型
    var ele=document.getElementsByClassName('eachListLi')  //HTMLCollection
    var ele2= document.querySelectorAll('.eachListLi'); //NodeList
    gt.each(ele,function (i, v) {
        console.log(v)
    })
    gt.each(ele2,function (i, v) {
        console.log(i+'：'+v)
    })

　  执行结果：

　　    对于两个js方法的解释：

　　　　(1) 　　every方法 　　若是数组中检测到有一个元素不知足，则整个表达式返回 false ，且剩余的元素不会再进行检测 当且仅当 全部元素都知足条件的时候 返回true

　　　

　　　　(2)　　call方法　　　　

　　　　call 和 apply 两个方法的第一个实参 是要调用函数的母对象 ，他是调用上下文 ，在函数提内经过this的来获取对他的引用。要想以对象 o的方法 来调用函数f()，能够这样使用call 和apply

　　f.call(o)
    f.apply(o)
    //上面两个实现功能和下面的相似  假设o对象中不存在m方法
    o.m=f;//将f存储为o的临时方法
    o.m();//执行方法 不传参数
    delete o.m //删除临时方法

　　在es5严格模式中，call 和apply 的第一个实参会变成this的值，哪怕传入的实参的原始值是null 或者undefined ，在非严格模式中，传入的null和undefined 会被全局对象代替 ，而其余原始值则会被相应的包装对象代替

　　call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差异以下：

　　call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 function.call(obj1,参数1, ... ,参数n )

　　apply 的全部参数都必须放在一个数组里面传进去 function.apply(obj1,[参数1, ..., 参数n])

　　bind 除了返回是函数之外，它的参数形式和 call 同样。

固然，三者的参数不限定是 string 类型，容许是各类类型，包括函数 、 object 等等！

在看 jq是如何实现的

 //jq定义的each方法 
        each: function( obj, callback ) {
            var length, i = 0;
            //分为两个数组类型 和对象类型 分别执行方法
            //类数组类型
            if ( isArrayLike( obj ) ) {
                length = obj.length;
                for ( ; i < length; i++ ) {
                    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                        break;
                    }
                }
            } else {
                //对象类型
                for ( i in obj ) {
                    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                        break;
                    }
                }
            }

            return obj;
        },

　　检验是否为类数组的方法

 //类数组
    function isArrayLike( obj ) {

        // Support: real iOS 8.2 only (not reproducible in simulator)
        // `in` check used to prevent JIT error (gh-2145)
        // hasOwn isn't used here due to false negatives
        // regarding Nodelist length in IE
        //支持：仅限真正的iOS 8.2（在模拟器中不可重现）
        //`in`检查用于防止JIT错误（gh-2145）
        // 此处未使用hasOwn
        //关于IE中的Nodelist长度  这一点不知道会有什么影响 多是为了兼容
        var length = !!obj && "length" in obj && obj.length,
                type = toType( obj );
        //当对象 是 方法和window对象的时候 直接 返回false
        if ( isFunction( obj ) || isWindow( obj ) ) {
            return false;
        }
        //只有 1.类型为数组 2.长度为0 3.为数字类型 且长度大于1  ( length - 1 ) in obj的状况下 返回ture
        return type === "array" || length === 0 ||
                typeof length === "number" && length > 0 && ( length - 1 ) in obj;
    }

　　初步判断类型的方法 声明了两个变量 

var class2type = {};

var toString = class2type.toString;

　toType的方法

//toType的方法  初步判断类型的方法
    function toType( obj ) {
        //当obj为null 是 返回null 类型字符串
        if ( obj == null ) {
            return obj + "";
        }

        // Support: Android <=2.3 only (functionish RegExp)
        //支持：Android <= 2.3（功能RegExp）
        //当为 对象和方法的时候 取class2type对象中的toString.call( obj )   　　　　　　　　　　　　这一块没看懂
//或者直接返回object类型 当不为对象 方法 null的状况下 使用typeof 判断后返回类型
        return typeof obj === "object" || typeof obj === "function" ?
                class2type[ toString.call( obj ) ] || "object" :
                typeof obj;
    }

　　总结 $.each的方法实现 首先要 分开类型 数组 和对象 而后 数组用for 循环 对象用 for in 循环完成  

2.元素事件列表说明注：不带参数的函数，其参数为可选的 fn。jQuery不支持form元素的reset事件。事件 描述 支持元素或对象blur( )                             元素失去焦点 a, input, textarea, button, select, label, map, areachange( )                       用户改变域的内容 input, textarea, selectclick( )                             鼠标点击某个对象 几乎全部元素dblclick( )                        鼠标双击某个对象 几乎全部元素error( )                          当加载文档或图像时发生某个错误 window, imgfocus( )                         元素得到焦点 a, input, textarea, button, select, label, map, areakeydown( )                   某个键盘的键被按下 几乎全部元素keypress( )                   某个键盘的键被按下或按住 几乎全部元素keyup( )                       某个键盘的键被松开 几乎全部元素load( fn )                        某个页面或图像被完成加载 window, imgmousedown( fn )          某个鼠标按键被按下 几乎全部元素mousemove( fn )           鼠标被移动 几乎全部元素mouseout( fn )              鼠标从某元素移开 几乎全部元素mouseover( fn )            鼠标被移到某元素之上 几乎全部元素mouseup( fn )              某个鼠标按键被松开 几乎全部元素resize( fn )                  窗口或框架被调整尺寸 window, iframe, framescroll( fn )                      滚动文档的可视部分时 windowselect( )                      文本被选定 document, input, textareasubmit( )                    提交按钮被点击 formunload( fn )                    用户退出页面 window