App下載

jQuery是干什么的?

猿友 2021-02-05 15:24:09 瀏覽數(shù) (7100)
反饋

主要內(nèi)容

JQuery.png

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

(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 包裝集的概念, 將極大的加快我們的學(xué)習(xí)速度。原始的 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>


0 人點贊