jQuery是干什么的?

主要內(nèi)容

JQuery 對象

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

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

Jquery的下載與安裝

下載

從 jquery.com 下載 jQuery 庫

版本

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 -->學習版本(學習源碼 想高手學習是最好學習方法)

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

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

優(yōu)點

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

（2）解決瀏覽器兼容性問題

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

（4）糾正錯誤的腳本知識

安裝

在頁面引入即可

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

Jquery 核心

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

$ <==> jQuery

Dom對象 與 Jquery 包裝集對象

明確 Dom 對象和 jQuery 包裝集的概念, 將極大的加快我們的學習速度。原始的 DoM 對象只有 DOM 接口提供的方法和屬性，通過js代碼獲取的對象都是 dom 對象；而通過 jQuery 獲取的對象是 jQuery 包裝集對象，簡稱 jQuery對象，只有 jQuery 對象才能使用jQuery 提供的方法。

Dom 對象

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

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

Jquery 包裝集對象

可以說是 Dom 對象的擴充.在 jQuery 的世界中將所有的對象, 無論是一個還是一組, 都封裝成一個 jQuery 包裝集,比如獲取包含一個元素的 jQuery 包裝集：

var jQueryObject = $("#testDiv");

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

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

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

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

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

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

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

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

案例：

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