jQuery 介紹 以及基本使用

1.1 JavaScript 庫

JavaScript庫：即 library，是一個封裝好的特定的集合（方法和函數）。從封裝一大堆函數的角度理解庫，就是在這個庫中，封裝了不少預先定義好的函數在裏面，好比動畫animate、hide、show，好比獲取元素等。

簡單理解： 就是一個JS 文件，裏面對咱們原生js代碼進行了封裝，存放到裏面。這樣咱們能夠快速高效的使用這些封裝好的功能了。

好比 jQuery，就是爲了快速方便的操做DOM，裏面基本都是函數（方法）。

常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto等，這些庫都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實現的，咱們主要學習的是 jQuery。

1.2  jQuery的概念

jQuery整體概況以下 :

• jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。

• j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操做作了封裝，咱們能夠快速的查詢使用裏面的功能。

• jQuery 封裝了 JavaScript 經常使用的功能代碼，優化了 DOM 操做、事件處理、動畫設計和 Ajax 交互。

• 學習jQuery本質： 就是學習調用這些函數（方法）。

• jQuery 出現的目的是加快前端人員的開發速度，咱們能夠很是方便的調用和使用它，從而提升開發效率。

   

   

1.3 jQuery的優勢

• 輕量級。核心文件才幾十kb，不會影響頁面加載速度。

• 跨瀏覽器兼容，基本兼容瞭如今主流的瀏覽器。

• 鏈式編程、隱式迭代。

• 對事件、樣式、動畫支持，大大簡化了DOM操做。

• 支持插件擴展開發。有着豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等。

• 免費、開源。

2. jQuery 的基本使用

2.1 jQuery 的下載

jQuery的官網地址： https://jquery.com/，官網便可下載最新版本。

各個版本的下載：https://code.jquery.com/

版本介紹：

1x ：兼容 IE 678 等低版本瀏覽器， 官網再也不更新

2x ：不兼容 IE 678 等低版本瀏覽器， 官網再也不更新

3x ：不兼容 IE 678 等低版本瀏覽器， 是官方主要更新維護的版本

2.2. 體驗jQuery

步驟：

• 引入jQuery文件。

• 在文檔最末尾插入 script 標籤，書寫體驗代碼。

• $('div').hide() 能夠隱藏盒子。

2.3. jQuery的入口函數

jQuery中常見的兩種入口函數：等頁面加載完畢再執行裏面的代碼

// 第一種: 簡單易用。 
$(function () {   
    ...  // 此處是頁面 DOM 加載完成的入口
}) ; 
​
// 第二種: 繁瑣，可是也能夠實現
$(document).ready(function(){
   ...  // 此處是頁面DOM加載完成的入口
});

總結：

1. 等着 DOM 結構渲染完畢便可執行內部代碼，沒必要等到全部外部資源加載完成，jQuery 幫咱們完成了封裝。

2. 至關於原生 js 中的 DOMContentLoaded。

3. 不一樣於原生 js 中的 load ，load事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼。

4. 更推薦使用第一種方式。

2.4. jQuery中的頂級對象$

1. $是 jQuery 的別稱，在代碼中能夠使用 jQuery 代替，但通常爲了方便，一般都直接使用 $ 。

2. $也是jQuery的頂級對象，至關於原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就能夠調用jQuery 的方法。

<script>
        // $是jQuery的別稱 ,同時也是jQuery的頂級對象
        // $(function () {
        //     alert(1);
        // });
        jQuery(function () {
            // alert(11);
            // $('div').hide();
            jQuery('div').hide();
       })
</script>

 

2.5. jQuery 對象和 DOM 對象

使用 jQuery 方法和原生JS獲取的元素是不同的，總結以下 :

1. 用原生 JS 獲取來的對象就是 DOM 對象

2. jQuery 方法獲取的元素就是 jQuery 對象。

3. jQuery 對象本質是： 利用$對DOM 對象包裝後產生的對象（僞數組形式存儲）。

<script>
        // 用原生 JS 獲取來的對象就是 DOM 對象
        var div = document.querySelector('div');
        console.dir(div);
        // jQuery 方法獲取的元素就是 jQuery 對象。
        console.dir($('div')); //利用$對DOM 對象包裝後產生的對象（僞數組形式存儲）。
    </script>

 

注意：

只有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法。

 

 

2.6. jQuery 對象和 DOM 對象轉換

DOM 對象與 jQuery 對象之間是能夠相互轉換的。由於原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給咱們封裝. 要想使用這些屬性和方法須要把jQuery對象轉換爲DOM對象才能使用。

<script>
 // 1. DOM對象轉換爲jQuery對象
 // (1)直接獲取視頻，獲得就是jQuery對象
 // $('video');
 // (2) 使用原生js獲取過來DOM對象
 var myvideo = document . querySelector( 'video' );
 // $(myvideo) 這樣就能夠實現轉換
 // $(myvideo).play(); //jquery裏面沒有play 這個方法
 // 2.jQuery對象轉換爲DOM對象
 // myvideo.play();
 $('video')[e].play()
 $('video').get(0).play()
</script>

總結：實際開發比較經常使用的是把DOM對象轉換爲jQuery對象，這樣可以調用功能更增強大的jQuery中的方法。