摘要：一初步了解介紹由創(chuàng)建于年一月的開(kāi)源項(xiàng)目，憑借著跨平臺(tái)的兼容性，簡(jiǎn)潔的語(yǔ)法，極大的簡(jiǎn)化了人員遍歷文檔，操作，處理事件，執(zhí)行動(dòng)畫(huà)，和開(kāi)發(fā)的操作。只建立一個(gè)名為的對(duì)象。對(duì)發(fā)生在同一個(gè)對(duì)象上的一組動(dòng)作，可以直接連寫(xiě)無(wú)需重復(fù)獲取對(duì)象。

由John Resig創(chuàng)建于2006年一月的開(kāi)源項(xiàng)目，jQuery憑借著跨平臺(tái)的兼容性，簡(jiǎn)潔的語(yǔ)法，極大的簡(jiǎn)化了JavaScript人員遍歷HTML文檔，操作DOM，處理事件，執(zhí)行動(dòng)畫(huà)，和開(kāi)發(fā)Ajax的操作。

輕量級(jí)。采用Uglifys壓縮后保持再30kb左右。

擁有強(qiáng)大的選擇器。jQuery允許開(kāi)發(fā)者使用CSS1到CSS3幾乎所有選擇器，以及jQuery獨(dú)創(chuàng)的高級(jí)而復(fù)雜的選擇器。

出色的DOM封裝操作。jQuery封裝了大量常用的DOM操作，使開(kāi)發(fā)者再編寫(xiě)DOM操作相關(guān)程序的時(shí)候能夠得心應(yīng)手。

可靠的事件處理機(jī)制。jQuery的事件處理機(jī)制吸收了Javascript專(zhuān)家編寫(xiě)的Dean Edwards編寫(xiě)的事件處理函數(shù)的精華，使得jQuery再處理事件綁定的時(shí)候相當(dāng)可靠。在預(yù)留退路（graceful degradation）、循序漸進(jìn)以及非入侵式（Unobtrusive）編程思想方面，jQuery也做得非常不錯(cuò)。

完善的Ajax。jQuery將所有的ajax操作封裝到一個(gè)函數(shù)$.ajax()里，使得開(kāi)發(fā)者處理Ajax的時(shí)候能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯而無(wú)需關(guān)心復(fù)雜的瀏覽器兼容性和XMLHttpRequest對(duì)象的創(chuàng)建和使用問(wèn)題。

不污染頂級(jí)變量。jQuery只建立一個(gè)名為jQuery的對(duì)象。其所有的函數(shù)方法都在這個(gè)對(duì)象之下。其別名$也可以隨時(shí)交出控制權(quán)，絕對(duì)不會(huì)污染其他的對(duì)象。使得jQuery庫(kù)可以與其他Js庫(kù)共存

出色的瀏覽器兼容性

鏈?zhǔn)讲僮鞣绞?。?duì)發(fā)生在同一個(gè)jQuery對(duì)象上的一組動(dòng)作，可以直接連寫(xiě)無(wú)需重復(fù)獲取對(duì)象。

隱式迭代。當(dāng)用jQuery找到帶有.myClass類(lèi)的全部元素時(shí)，無(wú)需循環(huán)遍歷每一個(gè)返回的元素。

行為層與結(jié)構(gòu)層的分離。開(kāi)發(fā)者可以使用jQuery選擇器選中元素，然后直接給元素添加事件。簡(jiǎn)單的來(lái)說(shuō)就是可以在js中操作html。

豐富的插件支持。

完善的文檔。

開(kāi)源

下載

可以通過(guò)node.js自帶的包管理器npm或者bower等包管理器下載，也可以通過(guò)官網(wǎng)下載

npm下載/cnpm下載/bower下載

npm i jquery/cnpm i jquery/bower i jquery

官網(wǎng)下載

https://code.jquery.com/jquery-3.4.1.min.js，另存為Js文件即可，也可以在線(xiàn)引用

第一個(gè)jQuery程序

開(kāi)始之前需要知道一點(diǎn)，在jQuery庫(kù)中，$就是jQuery的一個(gè)簡(jiǎn)寫(xiě)形式，例如$("#foo")和jQuery("#foo")是等價(jià)的，$.ajax和jQuery.ajax是等價(jià)的。

//引入jQuery

其中$(document).ready();這段代碼類(lèi)似于window.onload的作用，但是其中有些差別

鏈?zhǔn)酱a風(fēng)格

我的理解是通過(guò).運(yùn)算符來(lái)鏈接層級(jí)操作，類(lèi)似于Js原生的document.getElementById("#app").value這樣的。

代碼規(guī)范

（1）對(duì)于同一個(gè)對(duì)象不超過(guò)三個(gè)操作的，可以直接寫(xiě)成一行。

``$("li").show().unbind("click");

（2）對(duì)于同一個(gè)對(duì)象不超過(guò)三個(gè)操作的，建議每行寫(xiě)一個(gè)操作

$(this).removeClass("mouseout")
       .addClass("mouseout")
       .stop()
       .fadeTo("fast",0.6)
       .fadeTo("fast",1)
       .unbind("click")

（3）對(duì)于多個(gè)對(duì)象的少量操作，可以每個(gè)對(duì)象寫(xiě)一行，如果涉及子元素，可以考慮適當(dāng)?shù)乜s進(jìn)，例如上面提到的代碼。

$(this).addClass("highlight").children("li").show().end()
---------------------------------------------------------
$(this).addClass("highlight")
       .children("li").shiw().end()

注釋的重要性

$("#table > tbody > tr:has(td:has(:checkbox:enabled))").css("background","red");

這一行代碼就算是精通jQuery的人也不一定能一眼就看出作用，通過(guò)有意義的注釋可以提高開(kāi)發(fā)效率

//在一個(gè)id為table的表格的tbody中，如果每行的一列中的checkbox沒(méi)有被禁用，則把這行的背景設(shè)為紅色
$("#table > tbody > tr:has(td:has(:checkbox:enabled))").css("background","red");

DOM對(duì)象（Document Object Model，文檔對(duì)象模型）

每一份DOM都可以表示成一顆樹(shù)，樹(shù)的內(nèi)容為html代碼的標(biāo)簽元素，按層級(jí)表示

    
        
    
    
        
             //...   
        
        

            //...
        
        。。。
    

jQuery對(duì)象

jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。

//通過(guò)獲取id為foo的元素內(nèi)的html代碼。.html()是jQuery里的方法

注意：

在jQuery對(duì)象中無(wú)法使用DOM對(duì)象的任何方法。，DOM對(duì)象中也不能使用任何jQuery方法。

像DOM對(duì)象有innerHTML方法，但是jQuery中沒(méi)有；jQuery對(duì)象中有html()方法，但是DOM中沒(méi)有。

在討論此之前規(guī)定好代碼規(guī)范：

如果獲取的是jQuery對(duì)象，那么在變量前面加上$

var $variable = jquery對(duì)象

如果獲取的是DOM對(duì)象，

var variable = DOM對(duì)象

jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象

jQuery 對(duì)象不能使用DOM 中的方法，但如果對(duì) jQuery 對(duì)象所提供的方法不熟悉，或者 jQuery 沒(méi)有封裝想要的方法，不得不使用 DOM 對(duì)象的時(shí)候，有以下兩種處理方法。

jQuery 提供了兩種方法將一個(gè)jQuery對(duì)象轉(zhuǎn)換成 DOM 對(duì)象，即[index]和get(index)

案例html代碼：

（1）jQuery對(duì)象是一個(gè)類(lèi)似于數(shù)組的對(duì)象，可以通過(guò)[index]的方法得到相應(yīng)的DOM對(duì)象

var $cr = $("#cr");   //jquery 對(duì)象
var cr = $cr[0];      //DOM 對(duì)象

alert(cr.checked);    //檢測(cè)這個(gè)checkbox是否被選中

（2）另一種方法是jQuery 本身提供的，通過(guò)get(index)方法得到相應(yīng)的 DOM 對(duì)象

var $cr = $("#cr");   //jquery 對(duì)象
var cr = $cr.get(0);      //DOM 對(duì)象

alert(cr.checked);    //檢測(cè)這個(gè)checkbox是否被選中

DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象

對(duì)于一個(gè) DOM 對(duì)象，只需要用$()把DOM對(duì)象包裝起來(lái)，就可以獲得一個(gè)jQuery對(duì)象了。方式為$(DOM對(duì)象)

var cr = document.getElemntById("cr");   //DOM 對(duì)象
var $cr = $(cr);                         //jQuery 對(duì)象

轉(zhuǎn)換后，可以任意使用jQuery 中的方法。

通過(guò)以上方法，可以任意相互轉(zhuǎn)換jQuery 兌現(xiàn)和 DOM 對(duì)象。

范例代碼)

在jQuery 庫(kù)中，幾乎所有的插件都被限制在它的命名空間里 -- jQuery。通常，全局對(duì)象都被很厚地儲(chǔ)存在jQuery 命名空間里，因此當(dāng)jQuery 庫(kù)和其他JavaScript 庫(kù)一起使用時(shí)不會(huì)引起沖突。

默認(rèn)情況下，jQuery用 -- $作為快捷方式。

一共有三種方式，其中第三種有兩種方法

方式一：移交“$”使用權(quán)

jQuery.noConflict();    //將變量$ 的控制權(quán)交給prototype.js

/**
                 * 在該函數(shù)內(nèi)就可以用“jQuery”代替字符“$”使用jquery
                 */
jQuery(function(){//使用jQuery
    jQuery("p").click(function(){
        alert(jQuery(this).text());
    })
})
$("pp").style.display = "none"; //使用pototype.js隱藏元素

方式二：起別名

var $J = jQuery.noConflict();    //自定義快捷方式
            
            /**
             * 同樣的，在這里可以使用“$J”代替字符“$”使用jquery
             */
            $J(function(){
                $J("p").click(function(){
                    alert($J(this).text());
                })
            })
            $("pp").style.display = "none";

方式三：既可以使用字符$，又不用起別名

其一：移交使用權(quán)時(shí)傳參，之后就可以在jQuery方法內(nèi)使用字符$而不用別名

jQuery.noConflict();
//使用jQuery設(shè)定頁(yè)面加載時(shí)執(zhí)行的函數(shù)傳參
jQuery(function($){
    $("p").click(function(){
        alert($(this).text());
    })
});
$("pp").style.display = "none";

其二：類(lèi)似于一，不過(guò)是使用匿名函數(shù)

jQuery.noConflict();
//匿名函數(shù)內(nèi)部的 $ 均為jQuery
(function($){
    $("p").click(function(){
        alert($(this).text());
    })
})
$("pp").style.display = "none";