什麼是JavaScript類庫

qq_46670991發表於2020-11-03
JavaScript

JavaScript類庫簡稱JS庫，可以簡化JavaScript的開發或DOM的使用。

JS庫會根據特定需求封裝一系列的操作，例如日期控制元件。

原理：

定義一系列的屬性和方法，預定義一系列物件和函式

作用：

  1. 降低使用JavaScript的難度
  2. 相容各個瀏覽器
  3. 提供簡單易用的相應功能

用最少的程式碼，解決複雜而困難的功能

版本選擇：

  1. 生命週期長
  2. 市場佔有率高

jQuery是什麼

是一個主流、優秀的JavaScript類庫，是John Resig建立於2006年1月的開源專案。

分成了核心庫，UI，外掛，和jQuery Mobile … 等模組

優點：

有著強大的選擇器、鏈式操作、出色的瀏覽器相容性

作用：

  1. 簡化訪問和更新HTML頁面、DOM操作、事件處理以及執行動畫

設計初衷：“寫得少，做的多”

使用方法：

  1. 本地引入檔案

    <script src="jquery-1.12.4.js">

  2. 網路引入

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

區別：

使用站點的jQuery的好處是 在訪問站點時，網頁已經載入過jQuery，所以訪問時會減少載入時間。CDN也會確保訪問時，會從離使用者最近的伺服器返回響應，也會提高載入速度。

我的結果： 還是本地引入載入的快。

工廠函式

是作為jQuery操作的入口，通過該函式實現定位頁面元素、將DOM物件包裝成jQuery物件，以及建立頁面元素 … 功能。

<script src="jquery.js"></script>
    
<body>
    <button id="btn">按鈕</button>
<script>
    //DOM操作（返回DOM物件） - 獲取到頁面中的按鈕元素
    var btn = document.getElementById('btn');
    console.log(btn);       // <button id="btn">按鈕</button>

    /* jQuery操作 - 獲取頁面中的按鈕元素
        jQuery() - 稱為jQuery的工廠函式
        * 作用 - 該函式是jQuery操作的一個入口
            第一個作用  用於定位頁面中的元素
            第二個作用
        * 另一個用法 "$()"
        * 返回值 - jQuery物件
    */
    //var btn = jQuery('#btn');   
    /*jQuery.fn.init [button#btn, context: document, selector: "#btn"]  --  按鈕名btn，未傳遞節點document，選擇器ID

    0: button#btn  --  索引值0，按鈕名稱為btn
    context: document  -- 未傳遞節點文件document
    length: 1 -- 返回陣列中元素的數目為1
    selector: "#btn"  --  選擇器  ID
    __proto__: Object(0) -- 原型物件
    */
    var btn = $('#btn');   // jQuery.fn.init(1)同上面的返回值結果一樣
    console.log(btn);
</script>    
</body>

BypuQA.png

有兩種寫法：(selector/element （選擇器/元件）)

  • jQuery(selector/element);
  • $(selector/element);

所以$與jQuery含義一樣

window.jQuery = window.$ = jQuery;

jQuery物件

當變數名相同，同時有dom內容和jQuery內容時，區分方法是使用jQuery物件約定 —— 在返回的變數增加一個字首"$"

var $btn = $('#btn');
console.log($btn);

DOM物件

var title = document.getElementByld('title');

指由DOM的官方規範提供的物件，或通過DOM提供的物件屬性或方法定位HTML頁面元素得到的物件。

jQuery物件

var $title = $('title');

指由DOM物件封裝成的物件，它的底層邏輯依舊是DOM物件。

jQuery物件是基於DOM物件封裝成了一個新的物件，並提供一系列的屬性和辦法。

相關文章