jQuery是干什么的?

主要內(nèi)容

JQuery 對(duì)象

jQuery 是一套兼容多瀏覽器的 javascript 腳本庫(kù). 核心理念是寫(xiě)得更少，做得更多，使用 jQuery 將極大的提高編寫(xiě) javascript 代碼的效率，幫助開(kāi)發(fā)者節(jié)省了大量的工作，讓寫(xiě)出來(lái)的代碼更加優(yōu)雅，更加健壯，"如虎添翼"。同時(shí)網(wǎng)絡(luò)上豐富的 jQuery 插件也讓我們的工作變成了"有了 jQuery，一切 so easy。" --因?yàn)槲覀円呀?jīng)站在巨人的肩膀上了。

jQuery 在 2006 年 1 月由美國(guó)人 John Resig 在紐約的 barcamp 發(fā)布，吸引了來(lái)自世界各地的眾多 JavaScript 高手加入，由 Dave Methvin 率領(lǐng)團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)。如今，jQuery已經(jīng)成為最流行的 javascript 框架，在世界前 10000 個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò) 55%在使用 jQuery。

Jquery的下載與安裝

下載

從 jquery.com 下載 jQuery 庫(kù)

版本

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下載 1.X)

（1）完整版 : jquery-2.1.4.js -->學(xué)習(xí)版本(學(xué)習(xí)源碼 想高手學(xué)習(xí)是最好學(xué)習(xí)方法)

（2）壓縮版 : jquery-2.1.4.min.js -->開(kāi)發(fā)版本(壓縮版，減少傳輸)

目前使用版本：jquery-3.4.1.js

優(yōu)點(diǎn)

（1）提供了強(qiáng)大的功能函數(shù)

（2）解決瀏覽器兼容性問(wèn)題

（3）實(shí)現(xiàn)豐富的 UI 和插件

（4）糾正錯(cuò)誤的腳本知識(shí)

安裝

在頁(yè)面引入即可

<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>

Jquery 核心

 $ 符號(hào)在 jQuery 中代表對(duì) jQuery 對(duì)象的引用, "jQuery"是核心對(duì)象。通過(guò)該對(duì)象可以獲取 jQuery 對(duì)象，調(diào)用 jQuery 提供的方法等。只有 jQuery 對(duì)象才能調(diào)用 jQuery 提供的方法。

$ <==> jQuery

Dom對(duì)象 與 Jquery 包裝集對(duì)象

明確 Dom 對(duì)象和 jQuery 包裝集的概念, 將極大的加快我們的學(xué)習(xí)速度。原始的 DoM 對(duì)象只有 DOM 接口提供的方法和屬性，通過(guò)js代碼獲取的對(duì)象都是 dom 對(duì)象；而通過(guò) jQuery 獲取的對(duì)象是 jQuery 包裝集對(duì)象，簡(jiǎn)稱(chēng) jQuery對(duì)象，只有 jQuery 對(duì)象才能使用jQuery 提供的方法。

Dom 對(duì)象

javascript 中獲取 Dom 對(duì)象，Dom 對(duì)象只有有限的屬性和方法：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

Jquery 包裝集對(duì)象

可以說(shuō)是 Dom 對(duì)象的擴(kuò)充.在 jQuery 的世界中將所有的對(duì)象, 無(wú)論是一個(gè)還是一組, 都封裝成一個(gè) jQuery 包裝集,比如獲取包含一個(gè)元素的 jQuery 包裝集：

var jQueryObject = $("#testDiv");

Dom 對(duì)象 轉(zhuǎn) Jquery對(duì)象

Dom 對(duì)象轉(zhuǎn)為 jQuery對(duì)象，只需要利用$()方法進(jìn)行包裝即可

var domDiv = document.getElementById('mydiv');  // 獲取Dom對(duì)象
mydiv = $(domDiv);

Jquery 對(duì)象 轉(zhuǎn) Dom 對(duì)象

jQuery 對(duì)象轉(zhuǎn) Dom 對(duì)象，只需要取數(shù)組中的元素即可

// 第一種方式 獲取jQuery對(duì)象
var jqueryDiv = jQuery('#mydiv');
// 第二種方式 獲取jQuery對(duì)象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 將以獲取的jquery對(duì)象轉(zhuǎn)為dom

通過(guò)遍歷 jQuery 對(duì)象數(shù)組得到的對(duì)象是 Dom 對(duì)象，可以通過(guò) $() 轉(zhuǎn)為 jQuery 對(duì)象

$('#mydiv').each(function() {//遍歷
       var jquery = $(this);    
});

案例：

<div id="mydiv">write less, do more</div>
 
<script type="text/javascript">
    console.log("-------------獲取dom對(duì)象------------------")
    // dom對(duì)象
    var domDiv = document.getElementById("mydiv");
    console.log(domDiv);
 
    console.log("-------------獲取jquery對(duì)象------------------")
    // 獲取jquery對(duì)象
    // 第一種方式
    var jqueryDiv = jQuery('#mydiv');
    console.log(jqueryDiv);
    // 第二種方式
    jqueryDiv = $('#mydiv');
    console.log(jqueryDiv);
 
    console.log("-------------dom轉(zhuǎn)jquery------------------")
    // dom轉(zhuǎn)jquery包裝集/對(duì)象
    var obj = $(domDiv);
    console.log(obj);
 
    console.log("-------------jquery轉(zhuǎn)dom------------------")
    // jquery對(duì)象轉(zhuǎn)dom對(duì)象
    var dom = $('#mydiv')[0]; // 獲取jquery對(duì)象轉(zhuǎn)為dom
    // 或
    var dom2 = jqueryDiv[0]; // 將jquery對(duì)象轉(zhuǎn)為dom
    console.log(dom);
    console.log(dom2);
 
    /* this代表了dom對(duì)象，不是jquery對(duì)象 */
    console.log("-------------dom轉(zhuǎn)jquery------------------")
    $('#mydiv').each(function() {
   // 通過(guò)id選擇器選擇了id為mydiv的所有元素然后進(jìn)行遍歷
   // 那么遍歷出的每個(gè)元素就是id為mydiv的標(biāo)簽元素
   // 而this就代表了當(dāng)前的這個(gè)元素
        var jquery = $(this);   
    });
 
    console.log("-------------jquery轉(zhuǎn)dom------------------")
    $('#mydiv').each(function() {
        var dom3 = this;    
    });
</script>