前端基礎之jQuery引入

Xiao0101發表於2024-03-23
前端jQuery

一、jQuery介紹

（1）JavaScript庫

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

簡單理解： 就是一個JS 檔案，裡面對我們原生js程式碼進行了封裝，存放到裡面。這樣我們可以快速高效的使用這些封裝好的功能了。

比如 jQuery，就是為了快速方便的操作DOM，裡面基本都是函式（方法）。

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

（2）jQuery的概念

jQuery是一個快速、簡潔的JavaScript框架，它封裝了JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，最佳化HTML文件操作、事件處理、動畫設計和Ajax互動。

  • jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。

  • 它具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的CSS選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。

  • 同時，jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

（3）jQuery的優勢

  1. 輕量級。核心檔案才幾十kb，不會影響頁面載入速度。
  2. 跨瀏覽器相容，基本相容了現在主流的瀏覽器。
  3. 鏈式程式設計、隱式迭代。
  4. 對事件、樣式、動畫支援，大大簡化了DOM操作。
  5. 支援外掛擴充套件開發。有著豐富的第三方的外掛，例如：樹形選單、日期控制元件、輪播圖等。
  6. 免費、開源。

二、jQuery的基本使用

（1）jQuery的下載

類似於python中的模組，在前端技術不叫模組，叫 “類庫”

  • 官網下載：Download jQuery | jQuery

    • 中文文件：jQuery API中文文件

  • 引入cdn連結：jquery (v3.7.1)

    • 缺點：必須聯網，而且連結有時候會失效

（2）版本介紹

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

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

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

（3）官網下載使用

  • 點選上方官網連結

Download the compressed, production jQuery 3.6.4, 就是壓縮過的

image

  • 點選上方箭頭，然後得到下方圖片上顯示的原始碼，右擊另存為，儲存到本地。

image

  • 儲存到本地所形成的js檔案

image

（4）html頁面匯入類庫檔案使用

  • 將類庫檔案儲存在專案目錄中，並在 HTML 檔案中使用<script>標籤來匯入類庫檔案。

  • 在<script>標籤中，使用src屬性指定類庫檔案的路徑，讓瀏覽器能夠載入並執行該檔案。

    // 方式一 ： src指向本地檔案
<script src="path/to/jquery-3.7.1.min.js"></script>

// 方式二 ： src直接指向引入的cdn連結
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    這樣，當瀏覽器解析到這兩個中任意一個<script>標籤時，就會下載並執行對應的類庫檔案。

（5）jQuery的入口函式

  • 一旦類庫檔案被載入和執行，就可以使用其中提供的功能了。

  • 通常，類庫會擴充套件或增強原生 JavaScript 的功能，透過在頁面中引入類庫檔案，我們可以使用類庫提供的函式、方法或特性。

    // 第一種: 簡單易用。
$(function () {   
    ...  // 此處是頁面 DOM 載入完成的入口
}) ; 

    
// 第二種: 繁瑣，但是也可以實現
$(document).ready(function(){
   // 在文件載入完成後執行一些程式碼
  // 使用類庫提供的函式或方法
});

  • 上述程式碼示例中，$符號是 jQuery 的別名，透過呼叫.ready()方法，我們可以確保在文件載入完成後執行傳入的函式。

（6）總結

  • 總結起來，匯入 jQuery 類庫涉及獲取類庫檔案、在 HTML 檔案中匯入類庫檔案，並透過呼叫類庫提供的功能來實現對頁面元素的操作、動態載入和事件處理等功能。

三、jQuery物件和DOM物件

（1）jQuery中的頂級物件$

$是 jQuery 的別稱，在程式碼中可以使用 jQuery 代替，但一般為了方便，通常都直接使用 $ 。

$是jQuery的頂級物件，相當於原生JavaScript中的 window。把元素利用$包裝成jQuery物件，就可以呼叫jQuery 的方法。

（2）DOM 物件（標籤物件）

  • DOM（文件物件模型）是瀏覽器提供的一種介面，用於操作網頁的結構。每個 HTML 元素都是一個 DOM 物件，可以透過 JavaScript 來訪問和操作。
  • 透過原生 JavaScript 可以使用 DOM 方法和屬性來操作頁面元素，例如 document.getElementById()、element.innerHTML 等。

（3）jQuery物件

  • jQuery 物件是由 jQuery 庫封裝的物件，用於簡化對 DOM 元素的操作。當你使用 jQuery 選擇器選取一個或多個元素時，返回的就是 jQuery 物件。
  • jQuery 物件具有 jQuery 提供的方法，可以方便地對選取的元素進行操作，如新增類、修改內容、繫結事件等。

（4）轉換關係（重要）

  • 可以透過 jQuery() 或 $() 函式將 DOM 物件轉換為 jQuery 物件，這樣就可以使用 jQuery 提供的方法來操作這些 DOM 元素。
  • 例如，可以使用 $(document) 或 $(element) 將 DOM 物件轉換為 jQuery 物件，然後就可以使用 jQuery 的方法來操作這些物件。
// 1.DOM物件轉換成jQuery物件，方法只有一種
var box = document.getElementById('box');  // 獲取DOM物件
var jQueryObject = $(box);  // 把DOM物件轉換為 jQuery 物件


// 2.jQuery 物件轉換為 DOM 物件有兩種方法：
//   2.1 jQuery物件[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery物件.get(索引值)
var domObject2 = $('div').get(0)

image

（5）區別

  • 最大的區別在於操作的便利性和方法的豐富性。jQuery 物件提供了更多實用的方法和功能，能夠簡化開發過程。
  • 另外，jQuery 物件是由 jQuery 庫建立的物件，而 DOM 物件是瀏覽器原生提供的物件。

（6）總結

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

  • 用原生 JS 獲取來的物件就是 DOM 物件。

  • jQuery 方法獲取的元素就是 jQuery 物件。

  • jQuery 物件本質是： 利用 $ 對DOM 物件包裝後產生的物件（偽陣列形式儲存）。

注意：只有 jQuery 物件才能使用 jQuery 方法，DOM 物件則使用原生的 JavaScirpt 方法。

總的來說，jQuery 物件是對 DOM 物件的封裝和擴充套件，提供了更便捷的方法和功能來操作頁面元素，使前端開發更加高效和簡單。在實際開發中，可以根據需求選擇使用原生 JavaScript 操作 DOM 物件或者使用 jQuery 操作 jQuery 物件。

相關文章