愈來愈少人用JQuery，但你就不學了嗎？（1）

果你想成爲一名優秀的java架構師，看這裏 → 樂字節免費公開課（騰訊課堂）

如須要跟多資料請點擊下方圖片⬇（掃碼加好友→備註66）

主要內容

Jquery對象

​ jQuery 是一套兼容多瀏覽器的 javascript 腳本庫. 核心理念是寫得更少，作得更多，使用 jQuery 將極大的提升編寫 javascript 代碼的效率，幫助開發者節省了大量的工做，讓寫出來的代碼更加優雅，更加健壯，"如虎添翼"。同時網絡上豐富的 jQuery 插件也讓咱們的工做變成了"有了 jQuery，一切 so easy。" --由於咱們已經站在巨人的肩膀上了。

​ jQuery 在 2006 年 1 月由美國人 John Resig 在紐約的 barcamp 發佈，吸引了來自世界各地的衆多 JavaScript 高手加入，由 Dave Methvin 率領團隊進行開發。現在，jQuery已經成爲最流行的 javascript 框架，在世界前 10000 個訪問最多的網站中，有超過 55%在使用 jQuery。

Jquery的下載與安裝

下載

​ http:// jquery.com/下載

版本

​ 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 -->開發版本(壓縮版，減小傳輸)

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

優勢

​ （1）提供了強大的功能函數

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

​ （3）實現豐富的 UI 和插件

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

​ ......

安裝

​ 在頁面引入便可

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

Jquery核心

​ <font color="red"> $ 符號在 jQuery 中表明對 jQuery 對象的引用, "jQuery"是核心對象。</font>經過該對象能夠獲取jQuery對象，調用jQuery提供的方法等。只有jQuery對象才能調用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對象 轉 Jquery對象

​ Dom對象轉爲jQuery對象，只須要利用$()方法進行包裝便可

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

Jquery對象 轉 Dom對象

​ jQuery對象轉Dom對象，只須要取數組中的元素便可

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

​ 經過遍歷jQuery對象數組獲得的對象是Dom對象，能夠經過$()轉爲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轉jquery------------------")
    // dom轉jquery包裝集/對象
    var obj = $(domDiv);
    console.log(obj);

    console.log("-------------jquery轉dom------------------")
    // jquery對象轉dom對象
    var dom = $('#mydiv')[0]; // 獲取jquery對象轉爲dom
    // 或
    var dom2 = jqueryDiv[0]; // 將jquery對象轉爲dom
    console.log(dom);
    console.log(dom2);

    /* this表明了dom對象，不是jquery對象 */
    console.log("-------------dom轉jquery------------------")
    $('#mydiv').each(function() {
   // 經過id選擇器選擇了id爲mydiv的全部元素而後進行遍歷
   // 那麼遍歷出的每一個元素就是id爲mydiv的標籤元素
   // 而this就表明了當前的這個元素
        var jquery = $(this);   
    });

    console.log("-------------jquery轉dom------------------")
    $('#mydiv').each(function() {
        var dom3 = this;    
    });
</script>

console.log("-------------jquery轉dom------------------")
$('#mydiv').each(function() {
    var dom3 = this;    
});

文章持續更新，能夠微信搜索「 雲璈公子 」閱讀，回覆【資料】【面試】【簡歷】有我準備的一線大廠面試資料和簡歷模板，同時個人GitHub <https://github.com/1170300826/JavaInterview>; 有互聯網一線大廠面試指南。