什麼是 jQuery ?


Posted by GL on 2022-03-06

jQuery 簡介

jQuery 是一個 JavaScript 的 liberary,為 John Resig 於 2006/01/14 於 BarCamp NYC 首次發表。其設計概念為 "write Less,Do More"。

jQuery 已經事先幫開發者實作許多 Javescript 常用的功能,讓開發者在使用 jQuery 時,可以輕易撰寫出對 DOM 元素的操作、事件處理、動畫設計、Ajax 且支援各種瀏覽器的簡化程式,令開發者專注在程式的邏輯架構上。

舉例生活的例子:

小美剛與小明結婚,小美為了清楚即將到來的情人節,打算與小明兩人在家吃自己親手做情人節大餐。她在 fb 的新手老婆社團中看到最近網路上有種服務,會幫你把一道菜的新鮮原料都切好備好,整包真空直送送到家,只要按照食譜烹煮即可,對於每天加班到晚上八點,沒時間也不知道怎麼選食材的小美來說,這項服務簡直是她的救星,小美馬上毫不猶豫地訂了五菜一湯的食材包,準備大展身手!

jQuery 就像已經一包包的食材,開發者能簡便且快速的製作網站功能

圖片來源

在 Javascript 中用 document.querySelector 來選取 DOM 節點中特定 element ,而在 jQuery 只要用一個 $('')選取。
例如:

<div id="username">小明</div>

// JavaScript
document.querySelector("#username") ,

// jQuery
${'#usernname'}

如此一來,這樣就可以少打很多英文字!沒錯,偷懶的天性是工程師解決問題的動力來源。

然而,近年來 ECMAScript 的語法調整,用 Javascipt 寫的程式不一定就比較繁雜(參考: You might not need jQuery),加上各家瀏覽器逐漸標準化、以及 React、Vue、Angular 等框架的流行,jQuery 有逐漸退流行的趨勢。

jQeury 優缺點

優點

jQuery 最大的優點就是縮短開發時間,以及跨瀏覽器整合。

  1. 輕量級:jQuery 是輕量的 JavaScript 框架,gzip 壓縮後,甚至能小於 20KB
  2. 語法簡潔:將常用的 Javascript 實現實作並打包,所以較 JavaScript 寫法簡便許多。
    例如:

    獲取元素的值
    <input type= "text" id="elementid"/>
    
        //javascript 程式碼
        document.querySelector('#elementid').value
    
        //jQuery:
        $('#elementid').val();
    
  3. 瀏覽器兼容性: jQuery 基本相容了現在主流的瀏覽器,讓開發者不再為瀏覽器的相容問題去建立各別瀏覽器的兼容庫

  4. 鏈式操作方式:jQuery 的鍊式操作,可以對同一個對象的多個操作連寫在一行程式碼裡。
    例如:

    在 class 為 "intro" 的 <p>標籤中 ,
    增加一個叫做 "nick" 的 class ,同時以動畫效果緩緩顯示
    
        // HTML
        <p class="intro"></p>
    
        // jQuery
        $("p.intro").addClass("nick").show("slow");
    
        僅僅通過一行代碼就能實現上述效果。
    
  5. 選擇器:開發者可以使用 CSS3 的選擇器,以及 jQuery 定義的选择器。豐富的選擇器,讓很多複雜的情況,往往在 jQuery 中一行程式碼就搞定。
    例如:

    改變的 <table id="tb1"> 裡所有單數 < tr > 的文字顏色及背景色。
    
        // jQuery
        $("#tb1 tr:odd").css("background-color", "red").css("color", "blue");
    
  6. 完善的 Ajax: jQuery 簡化 ajax 程式碼,開發者使用 $.ajax () 代替 XMLHttpRequest
    例如:用 GET方法發出請求

     // XMLHttpRequest 寫法
        var request = new XMLHttpRequest();
        request.open('GET', '/my/url', true);
    
        request.onload = function() {
          if (this.status >= 200 && this.status < 400)
            var resp = this.response;
          } else {
    
          }
        };
    
        request.onerror = function() {
    
        };
    
        request.send();
    
    // jQuery 寫法
        $.ajax({
          type: 'GET',
          url: '/my/url',
          success: function(resp) {
    
          },
          error: function() {
    
          }
        });
    
  7. 開源社群且使用支援強大:jQuery 是一款開源的產品,可以自由地使用并提出修改。jQuery 有良好的文件和幫助手冊,而且允許開發者定製外掛,透過有許多成熟的第三方外掛。開發者可以輕易實現很多絢麗的效果。
  8. 節省開發者學習時間:jQuery 提供了大量範例,新手開發者在編寫代碼前,可先查看 jQuery 是否有類似插件,了解插件程式碼原理,除了能夠迅速開始開發,且能提高技巧。

缺點

  1. 不能向後相容:新版本不兼容早期版本。因此若新版本 jQuery 移除某些不支援功能,開發者用早期版本寫好的程式碼或外掛可能就會無法正常使用,使用的插件越多,發生的機率越高。。
  2. 多個外掛衝突:同一頁面上使用多個外掛時,易發生衝突現象,如果這些外掛依賴相同事件或 selector 時。

    想像將泰式酸辣湯底與咖哩湯底的料理包,同時用在同一鍋湯中,兩種湯都發揮了本色,卻又無法發揮本色。

  3. 瀏覽器依賴:jQuery 所有動作是以 DOM 操作出發,所以在沒有 DOM 的環境中,基本上無法使用(例如: node.js)

jQuery 與 vanilla JS 的關係?

什麼 vanilla JS? 可以吃嗎?

vanilla JS:指的就是原生的 JavaScript。中文為香草的 vanilla 是傳統冰淇淋的口味中最標準、最常見的預設口味,於是軟體領域中被引申為 "由原作者發布時未經改動或客製化的版本。

jQuery 與 vanilla JS 有什關係?

jQuery:是基於原生的 JavaScript 所產生的 liberary,也就是說沒有 vanilla JS 就無法使用 jQuery,但沒有 jQuery 還是可以用 vanilla JS;而且在開發時,可根據情況將 jquery 跟 vanilla JS 一起使用,並非用了 jQuery,開發者就無法在檔案中其他地方寫 vanilla JS。
jQuery 在某些功能上輔助了開發者用更少的程式碼做快速開發,在前期瀏覽器百家爭鳴的時代,jQuery 簡潔的程式碼與跨瀏覽器兼容的特點深受開發者歡迎。
隨著瀏覽器們越來越規範化,以及 JavaScript 語法版本的更新,多數情況下使用 vanilla JS 已能輕鬆達成功能,省去下載 jQuery 的負擔。更重要的是,由於 vanilla JS 執行在客戶端,節省了伺服器的請求時間和頻寬,提升了執行的效率。
library 或 framework 都是用來方便開發的工具,唯有熟悉其定位與價值,在底層 Javascript 知識的基礎上,才能在開發過程中適時地引入。
參考來源:


#javascript #jquery







Related Posts

【Day06】實戰開始 - 區塊分割2

【Day06】實戰開始 - 區塊分割2

Web Component 實戰

Web Component 實戰

JS 與 Node.js 的執行環境異同

JS 與 Node.js 的執行環境異同


Comments