摘要：前言對(duì)象是一個(gè)類(lèi)數(shù)組的對(duì)象，含有連續(xù)的整形屬性以及一系列的方法。它把所有的操作都包裝在一個(gè)函數(shù)中，形成了統(tǒng)一也是惟一的操作入口。從而避免重復(fù)創(chuàng)建對(duì)象。

jQuery對(duì)象是一個(gè)類(lèi)數(shù)組的對(duì)象，含有連續(xù)的整形屬性以及一系列的jQuery方法。它把所有的操作都包裝在一個(gè)jQuery()函數(shù)中，形成了統(tǒng)一(也是惟一)的操作入口。
其中我們用的非常頻繁的一個(gè)函數(shù)是$()或者說(shuō)是jQuery()，當(dāng)我們調(diào)用他的時(shí)候會(huì)根據(jù)傳入的參數(shù)的不同而達(dá)到不同的效果。

接下來(lái)會(huì)一一說(shuō)一下這7中用法，歡迎大家指正其中不正確的地方。

簡(jiǎn)要的說(shuō)是：接收一個(gè)css選擇器表達(dá)式(selector)和可選的選擇器上下文(context),返回一個(gè)包含了匹配的DOM元素的jQuery對(duì)象。

默認(rèn)情況下，對(duì)匹配元素的查找都是從根元素ducument對(duì)象開(kāi)始，也就是說(shuō)查找范圍是整棵文檔樹(shù)。但是如果給定了上下文context，則在指定上下文中查找

html

    body span
    body span
    body span
    

        wrap span
        wrap span
        wrap span
    

js

    $("span").css("background-color","red");//所有的span都會(huì)變紅
    $("span",".wrap").css("background-color","red");//只有.wrap中的span會(huì)變紅

用所提供的html代碼創(chuàng)建DOM元素

對(duì)于jQuery(html,ownerDocument)，參數(shù)html可以是單標(biāo)簽或者是多層標(biāo)簽之間的嵌套。第二個(gè)參數(shù)用于創(chuàng)建新DOM元素的文檔對(duì)象，如果不傳入則默認(rèn)為當(dāng)前的文檔對(duì)象。

    //單標(biāo)簽  兩種方式都可以往body中插入div
    /*   
     *   1  $("
").appendTo("body");
     *   2  $("
").appendTo("body");  
     */
    // 多標(biāo)簽嵌套
     $("
dfsg
").appendTo("body");
    

另外:對(duì)于單標(biāo)簽，jQuery(html,props)，props是一個(gè)包含屬性和事件的普通的對(duì)象，用法如下。(該用法有待考證，請(qǐng)知道這一用法的童鞋告知一下，感激不盡)

        $("
我是div
",{
            title:"我是新的div",
            click:function(){
                $(this).css("color","red");
                console.log(this);
            }
        }).appendTo("body");

如果傳入一個(gè)DOM元素或者是DOM元素的數(shù)組，則把DOM元素封裝到j(luò)Query對(duì)象中并返回。

html

    

        
1
        
2
        
3
        
4
        
5
    

js

         // 傳入DOM元素
         $("li").each(function(index,ele){
                $(ele).on("click",function(){
                    $(this).css("background","red");//這里的DOM元素就是this
                })
        })
        
        //傳入DOM數(shù)組
        var aLi=document.getElementsByTagName("li");
            aLi=[].slice.call(aLi);//集合轉(zhuǎn)數(shù)組
            var $aLi=$(aLi);
            $aLi.html("我是jQuery對(duì)象");//所有的li的內(nèi)容都變成"我是jQuery對(duì)象"
            

         

如果傳入的是一個(gè)object對(duì)象，則把該對(duì)象封裝到j(luò)Query對(duì)象中并返回。

    var obj={name:"謙龍"};
    var $obj=$(obj);//封裝成jQuery對(duì)象
    //綁定自定義事件
    $obj.on("say",function(){
        console.log(this.name)//輸出謙龍
    });
    $obj.trigger("say");

當(dāng)傳進(jìn)去的參數(shù)是函數(shù)的時(shí)候，則在document對(duì)象上綁定一個(gè)ready事件監(jiān)聽(tīng)函數(shù)，當(dāng)DOM結(jié)構(gòu)加載完成的時(shí)候執(zhí)行

    $(function(){
    
    })
    //以上代碼和下面的效果是一樣的
    $(document).ready(function(){
        ...//代碼
    })

當(dāng)傳進(jìn)去的參數(shù)是一個(gè)jQuery對(duì)象的時(shí)候，則創(chuàng)建該jQuery對(duì)象的一個(gè)副本并返回。副本與傳入的jQuery對(duì)象引用完全相同的元素

    var aLi=$("li");
    var copyLi=$(aLi);//創(chuàng)建一個(gè)aLi的副本
    console.log(aLi);
    console.log(copyLi);
    console.log(copyLi===aLi);

如果不傳入任何的參數(shù)，則返回一個(gè)空的jQuery對(duì)象，屬性length為0

注意這個(gè)功能可以用來(lái)復(fù)用jQuery對(duì)象，例如可以創(chuàng)建一個(gè)空的jQuery對(duì)象，然后在需要的時(shí)候先手動(dòng)修改其中的元素，然后在調(diào)用jQuery方法。從而避免重復(fù)創(chuàng)建jQuery對(duì)象。