1 整個jQuery的結(jié)構(gòu)

(function (window,undefined) {
//        構(gòu)造jQuery對象
        var jQuery=function () {
            var jQuery=function (select,context) {
                return new jQuery.fn.init(select,context,rootjQuery);
            };
            return jQuery;
        }();
//        工具方法
//        回調(diào)函數(shù)列表
//        異步對象
//        功能測試
//        數(shù)據(jù)緩存
//        隊列
//        屬性操作
//        事件系統(tǒng)
//        選擇器
//        DOM遍歷  過濾查找
//        DOM操作
//        樣式操作
//        Ajax異步請求
//        動畫
//        坐標尺寸等
        window.jQuery=window.$=jQuery;
    })(window);

2 構(gòu)造函數(shù)的7種用法

2.1 jQuery(selector [,context])

當選擇器是#id時，內(nèi)部調(diào)用document.getElementById()，其他是調(diào)用.find()方法。

$(".my").click(function () {
        $("span",this).text("bolala");
    })

2.2 jQuery(html[,ownerDocument])

當傳入的是單獨標簽時，會調(diào)用原生的createElement，當是復(fù)雜html時調(diào)用$.buildFragment()創(chuàng)建。
第二個可選參數(shù)ownerDocument指定文檔對象，默認是當前的document。

$("<p>BBQ</p>").appendTo($(".my"));

2.3 jQuery(element)

常用于事件監(jiān)聽中，將DOM元素封裝成jq對象。

  $(".my").click(function () {
        $(this).slideToggle();//封裝DOM元素
    })

2.4 jQuery(object)

將js對象封裝成jq對象。

2.5 jQuery(callback)

相當于在document上綁定ready事件。

$(function () {
        console.log("觸發(fā)事件")
    });
    $("document").ready(function () {
        console.log("觸發(fā)ready事件")
    })//兩個效果相同

2.6 jQuery(jQuery object)

傳入jq對象，創(chuàng)建jq對象副本引用相同的DOM元素。

2.7 jQuery()

不傳入?yún)?shù)，返回空jq對象。

3 jQuery構(gòu)造函數(shù)的結(jié)構(gòu)

(function (window,undefined) {
//        構(gòu)造jQuery對象
        var jQuery=(function () {
            var jQuery=function (select,context) {
                return new jQuery.fn.init(select,context,rootjQuery);
            };//3
//            jQuery構(gòu)造函數(shù)的原型
            jQuery.fn=jQuery.prototype={
                constructor:jQuery,
                init:function (select,context,rootjQuery) { }
//                其他原型屬性和方法
            };//5
            jQuery.fn.init.prototype=jQuery.fn;//6
            jQuery.extend=jQuery.fn.extend=function () { };//7
            jQuery.extend({
//                jQuery上擴展的靜態(tài)屬性和方法
            });//8
            return jQuery;//4
        })();//2
        window.jQuery=window.$=jQuery;
    })(window);//1

1處 執(zhí)行自調(diào)用匿名函數(shù)，執(zhí)行所有代碼。
2處 返回jQuery，后面暴露給window,并且定義$簡寫。
3+4處 又定義一個jQuery并返回給外層jQuery，3處的函數(shù)就是一個構(gòu)造函數(shù)。

 console.log($);
    /*
     * ? ( selector, context ) {
     *   return new jQuery.fn.init( selector, context, rootjQuery );
     * } 這就是jQuery構(gòu)造函數(shù)
     */

5處覆蓋構(gòu)造函數(shù)的原型對象，也定義了原型方法jQuery.fn.init方法，實際上當調(diào)用構(gòu)造函數(shù)時，返回的是init的實例，
另外還有一些其他的原型屬性和方法。
6處用jQuery.fn覆蓋jQuery.fn.init的原型。
7處定義extend方法 合并多個對象到第一個對象。
8處 定義構(gòu)造函數(shù)上的靜態(tài)屬性和方法。

tips1:

return new jQuery.fn.init(select,context,rootjQuery);

這樣寫當我們創(chuàng)建jQuery對象時，可以省略new直接寫jQuery()。

tips2:

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

jQuery構(gòu)造函數(shù)實際上是init的實例，用jQuery的原型覆蓋init的原型可以使init()的實例訪問到j(luò)Query構(gòu)造函數(shù)的原型屬性和方法。

4 .extend([deep,] target,object1 [,objectN])

jQuery.extend()是擴展靜態(tài)屬性和方法，jQuery.fn.extend()是擴展原型屬性和方法。
用法：如果有兩個或更多的對象，會合并到第一個對象，如果只用一個對象，jQuery和jQuery.fn會被當成目標對象，通過這種方式可以添加屬性和方法，常常用于編寫插件和處理函數(shù)的參數(shù)。

var obj=$.extend({1:"bolala",2:"hashqi"},{2:"bbq"});
    console.log(JSON.stringify(obj));//{"1":"bolala","2":"bbq"}

5 原型屬性和方法

• selector 選擇器表達式
• jquery 版本號
• length 元素個數(shù)
• size() 元素個數(shù)

 $content=$("ul li");
    console.log( $content.selector);//ul li
    console.log( $content.jquery);//1.7.1
    console.log( $content.length);//5
    console.log( $content.size());//5

• toArray() 將jQuery對象這種類數(shù)組轉(zhuǎn)換為真正的數(shù)組
  （類數(shù)組：具有l(wèi)ength，并且有數(shù)組下標，例如函數(shù)參數(shù)argument）
• get() 有參數(shù)時返回指定位置的DOM元素，沒有參數(shù)時調(diào)用toArrary()

$content=$("ul li");
    console.log( $content.toArray());//所有DOM的數(shù)組
    console.log( $content.get());//所有DOM的數(shù)組
    console.log( $content.get(2));//第三個li DOM元素

• $.each()靜態(tài)遍歷方法，對于數(shù)組和類數(shù)組通過下標遍歷，其他對象通過屬性名(for-in)遍歷。
• each()遍歷jq對象并執(zhí)行函數(shù)，直接用$.each()實現(xiàn),所以一定是數(shù)字下標。

 $content=$("ul li");
    $content.each(function (i,item) {
        console.log(i+":"+item);
//        0:[object HTMLLIElement]等
    });
    var obj={name:"bolala",age:25,msg:"hello"} ;
    $.each(obj,function (i,item) {
        console.log(i+":"+item);
        //name:bolala等
    })

• $.map()遍歷數(shù)組或?qū)ο筇幚韴?zhí)行函數(shù)，結(jié)果放入新數(shù)組中。
• map()遍歷jq對象處理執(zhí)行函數(shù)，結(jié)果放入新jq對象中。

  $content=$("ul li");
    console.log($content.map(function (i, item) {
        return $(this).text();
    }).get().join(","));//1,2,3,4,5

    console.log($.map([3,6,2,5],function (n,i) {
        return n+2;
    })); //[5, 8, 4, 7]

• .pushStack() 入棧
• .end() 出棧 返回上一個篩選結(jié)果

$("ul").css({"background": "red"})
        .find("li").height("50px")
        .end().css({"color": "white"})

• .eq() 指定位置的元素
• .first() 第一個元素
• .last() 最后一個元素
• .slice() 一個范圍內(nèi)的元素

console.log($("ul li").slice(0, 2));//前兩個元素

• .push() 末尾添加
• .sort() 排序
• .splice() 插入，刪除，替換等
  

  ---

6 靜態(tài)屬性和方法

• jquery.noConflict() 解除$的引用
• jQuery.parseJSON() 解析成js數(shù)據(jù)

    var obj={name1:[{item1:"1",item2:"2",item3:"3"}],name2:[{item1:"1",item2:"2",item3:"3"}]};
    var str = '[{"name": "bolala", "age": "24"},{"name": "bolala", "age": "24"}]';//json數(shù)組
    console.log($.parseJSON(str));
    console.log(JSON.parse(str));
    console.log(JSON.stringify(obj));
    //{"name1":[{"item1":"1","item2":"2","item3":"3"}],"name2":[{"item1":"1","item2":"2","item3":"3"}]}

• jQuery.now() 當前時間的毫秒表示

    console.log($.now());//1582010627439

第一部分花了兩天時間，結(jié)束啦。明天開始選擇器部分。