摘要：一初步了解介紹由創建于年一月的開源項目，憑借著跨平臺的兼容性，簡潔的語法，極大的簡化了人員遍歷文檔，操作，處理事件，執行動畫，和開發的操作。只建立一個名為的對象。對發生在同一個對象上的一組動作，可以直接連寫無需重復獲取對象。

由John Resig創建于2006年一月的開源項目，jQuery憑借著跨平臺的兼容性，簡潔的語法，極大的簡化了JavaScript人員遍歷HTML文檔，操作DOM，處理事件，執行動畫，和開發Ajax的操作。

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

擁有強大的選擇器。jQuery允許開發者使用CSS1到CSS3幾乎所有選擇器，以及jQuery獨創的高級而復雜的選擇器。

出色的DOM封裝操作。jQuery封裝了大量常用的DOM操作，使開發者再編寫DOM操作相關程序的時候能夠得心應手。

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

完善的Ajax。jQuery將所有的ajax操作封裝到一個函數$.ajax()里，使得開發者處理Ajax的時候能夠專心處理業務邏輯而無需關心復雜的瀏覽器兼容性和XMLHttpRequest對象的創建和使用問題。

不污染頂級變量。jQuery只建立一個名為jQuery的對象。其所有的函數方法都在這個對象之下。其別名$也可以隨時交出控制權，絕對不會污染其他的對象。使得jQuery庫可以與其他Js庫共存

出色的瀏覽器兼容性

鏈式操作方式。對發生在同一個jQuery對象上的一組動作，可以直接連寫無需重復獲取對象。

隱式迭代。當用jQuery找到帶有.myClass類的全部元素時，無需循環遍歷每一個返回的元素。

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

豐富的插件支持。

完善的文檔。

開源

下載

可以通過node.js自帶的包管理器npm或者bower等包管理器下載，也可以通過官網下載

npm下載/cnpm下載/bower下載

npm i jquery/cnpm i jquery/bower i jquery

官網下載

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

第一個jQuery程序

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

//引入jQuery

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

鏈式代碼風格

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

代碼規范

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

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

（2）對于同一個對象不超過三個操作的，建議每行寫一個操作

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

（3）對于多個對象的少量操作，可以每個對象寫一行，如果涉及子元素，可以考慮適當地縮進，例如上面提到的代碼。

$(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的人也不一定能一眼就看出作用，通過有意義的注釋可以提高開發效率

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

DOM對象（Document Object Model，文檔對象模型）

每一份DOM都可以表示成一顆樹，樹的內容為html代碼的標簽元素，按層級表示

    
        
    
    
        
             //...   
        
        

            //...
        
        。。。
    

jQuery對象

jQuery對象就是通過jQuery包裝DOM對象后產生的對象。

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

注意：

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

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

在討論此之前規定好代碼規范：

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

var $variable = jquery對象

如果獲取的是DOM對象，

var variable = DOM對象

jQuery對象轉成DOM對象

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

jQuery 提供了兩種方法將一個jQuery對象轉換成 DOM 對象，即[index]和get(index)

案例html代碼：

（1）jQuery對象是一個類似于數組的對象，可以通過[index]的方法得到相應的DOM對象

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

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

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

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

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

DOM對象轉成jQuery對象

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

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

轉換后，可以任意使用jQuery 中的方法。

通過以上方法，可以任意相互轉換jQuery 兌現和 DOM 對象。

范例代碼)

在jQuery 庫中，幾乎所有的插件都被限制在它的命名空間里 -- jQuery。通常，全局對象都被很厚地儲存在jQuery 命名空間里，因此當jQuery 庫和其他JavaScript 庫一起使用時不會引起沖突。

默認情況下，jQuery用 -- $作為快捷方式。

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

方式一：移交“$”使用權

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

/**
                 * 在該函數內就可以用“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";

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

其一：移交使用權時傳參，之后就可以在jQuery方法內使用字符$而不用別名

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

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

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