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

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

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

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

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

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

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

不污染頂級(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)作，可以直接連寫無需重復(fù)獲取對(duì)象。

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

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

豐富的插件支持。

完善的文檔。

開源

下載

可以通過node.js自帶的包管理器npm或者bower等包管理器下載，也可以通過官網(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文件即可，也可以在線引用

第一個(gè)jQuery程序

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

//引入jQuery

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

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

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

代碼規(guī)范

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

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

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

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

（3）對(duì)于多個(gè)對(duì)象的少量操作，可以每個(gè)對(duì)象寫一行，如果涉及子元素，可以考慮適當(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的人也不一定能一眼就看出作用，通過有意義的注釋可以提高開發(fā)效率

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

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

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

    
        
    
    
        
             //...   
        
        

            //...
        
        。。。
    

jQuery對(duì)象

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

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

注意：

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

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

在討論此之前規(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 沒有封裝想要的方法，不得不使用 DOM 對(duì)象的時(shí)候，有以下兩種處理方法。

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

案例html代碼：

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

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

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

（2）另一種方法是jQuery 本身提供的，通過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ì)象包裝起來，就可以獲得一個(gè)jQuery對(duì)象了。方式為$(DOM對(duì)象)

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

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

通過以上方法，可以任意相互轉(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";

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

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