當前位置: 首頁 前端更多技術 jQuery

前言

jQuery是使用JS構成的函式庫，jQ官方的口號是「寫的少，做的多」，即使對程式語言沒有經驗也可以透過jQ包裝的語法輕鬆寫出各種動畫、功能效果，雖然jQuery可以幫助你快速編寫JS效果也非常適合JS初學者學習，但建議還是需要對JS有基本的了解再操作會比較妥當。

在使用jQuery的同時，可以參考官方API文件，文件說明每項語法可以做到哪些功能，在初期學習時幫助非常大。

jQuery介紹

    jQuery的優點

  • 學習成本低，即使是程式新手也能快速上手
  • 語法簡潔且直觀，有非常多現有資源可以使用(套件)
  • 兼容各種瀏覽器，不用額外針對特別瀏覽器進行處理(尤其是IE)
  • jQuery背後有非常大的社群幫助維護，就算有BUG也會短時間內就修正
  • 選擇器使用方法統一，尤其JS使用前必須先選擇對象這點jQuery的選擇器優勢就非常明顯

    jQuery的缺點

  • jQuery的寫法是典型的鏈式寫法，針對單一DOM進行過多操作會造成一大串可讀性差的語法
  • 與JS一樣再大型網站中使用jQuery會比使用三大框架還要弱勢且維護困難
  • 需要額外載入套件，與直接執行JS的效率比起來還要再下降一階
  • 載入過多套件容易產生衝突需要手動排除
  • 社群正在開始排斥使用jQuery

常見疑問

jQuery正在被社群棄用那我為什麼要學它?

即使現今社群在排斥使用它，但jQuery的占比率仍然是遠遠超過其他三大框架加起來(截止2021年底)，原因就是上手相對容易，且使用框架必須要有一些先決條件。

你說jQuery選取多方便到底是多方便?

以常見的針對DOM進行修改文字內容兩者的差異會是

        document.getElementById('news').textContent = 'JS edit' //JS
        $('#news').text('jQ edit') //jQ

是否感受到明顯的長度差距?這就是jQuery的口號「寫的少，做的多」。

學也是學，那我為什麼不直接使用ARV其中一種框架就好?

針對這點如果還沒有看過本站的Vue介紹的話建議先看一下，沒有萬用的工具只有在對應場景用出符合的工具才會獲得最大效益，ARV三種框架在越大型的網站優勢體現越大，而jQ並非不能做大型網站只是相較之下明顯劣勢，無論jQ的選取有多方便畢竟都還是以針對DOM進行操作的概念去執行無法與資料驅動框架比較。

那我如果想快點學到實用技能例如飛來飛去的動畫，應該選哪個學?

如果是初學程式的話我會建議你了解JS變數與陣列等基本概念開始學jQuery，否則如果寫出以下

    let n = [10,20,30,40,50]
    let n1 = [...n]
    $('#news').text(n1)

這種程式碼要在IE執行，我只能說jQ畢竟還是程式語言而不是自然語言轉換程度還是有限...。

所以說了這麼多你到底是主要寫什麼?

作為一個邁向優良工程師之路努力的菜鳥無論是JS或jQ我都會寫，差別度只是在熟不熟悉而已，而如果要成為前端工程師那我建議你還是主要走向JS，早學晚學都要學後面還有nodeJS、框架等等會接觸...，好吧，我承認我主要是寫JS，寧願燒腦不支援IE我也不寫jQ，不是因為jQ有多爛而是習慣JS之後就會習慣開始用原生的方式去撰寫。

開始寫jQuery

使用jQuery之前必須先導入jQ檔案才可以使用，若不是特殊需求如支援IE舊版瀏覽器建議使用最新的壓縮版本(2021年底為v3.6.0)，以下皆以使用官網提供的CDN方式載入。

  1.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    2. 如果是開發產品無論是否為jQ一律強烈建議將JS檔載入到本地端進行引用，避免CDN發生意外無法連線導致功能異常造成不必要損失。

起手式

對於剛入門學習程式的人經常會犯一種錯就是程式執行的位置在DOM尚未產生前，也就是當對象還沒載入完畢功能就已經觸發這樣產生的選取對象會是不預期的結果，因此jQuery官方提供一種封裝方式，只要在最外層加上這一段程式碼就可以確保在執行jQ的時候已經先載入完畢HTML的DOM了。

  1.     $(function(){
        //程式片段
    })

    2. 使用jQ之前要知道jQ有很多語法都是透過包裝後改良的簡潔語法，使用上會與JS較不相同，關於ready事件可以參jQuery官方說明

選取器與應用

jQ容易上手的原因很大一部分在於選取器簡單，在JS動作都是選取對象>觸發時機>執行功能，三種流程，jQ自然也不例外，使用「$」這個萬用選取器符號可以直接幫我們選到想要選取的對象，以下應用程式碼省略載入JQ檔案

    常見的監聽DOM觸發點擊事件時執行功能

  1.     $('#id').on('click',function(){
        $('#id').text('this is id')
    })
    2. 當然，也支援ES6的箭頭函式寫法 
  2.     $('.class').on('click',()=>{
        $('.class').text('this is class.')
    })

    3. 除非明確知道不會使用this功能否則建議使用傳統function寫法，也有一些jQ針對常用功能進行封裝的效果可以使用

  3.     <div class="jq1">
        <p>隱藏效果的文字</p>
    </div>
    <button class="jq1_btn">查看效果</button>
    <script>
        $('.jq1_btn').on('click',function(){
            $('.jq1').toggle(500)
        })
    </script>

    4. toggle可以偵測對象是否為隱藏狀態，如果是則顯示，反之則隱藏，()內可以放入時間參數設定切換改為動畫產生單位是毫秒

    隱藏效果的文字

    也可以透過jQ控制css屬性樣式

  4.     <style>
        .jq2_class{
            color: red;
        }
    </style>
    <div class="jq2">
        <p>新增/移除class的文字</p>
    </div>
    <button class="jq2_btn">查看效果</button>
    <script>
    $('.jq2_btn').on('click',function(){
        $('.jq2').toggleClass('jq2_class')
    })
    </script>

    5. 在這邊使用class的原因是因為不考慮css權重時css處理樣式使用的資源會低於JS，且使用class可以觸發多個不同效果只要在一個class內預先寫好樣式即可

    新增/移除class的文字

    也可以透過選取器與JS的功能進行操作

  5.     <div class="jq3"> 目標是我 我離網頁最頂端的距離有<span style="color:rgb(255,0,0)"></span>px</div>
    <button class="jq3_btn">查看效果</button>
    <srcipt>
    $('.jq3_btn').on('click',function(){
        $('.jq3').children('span').text($('.jq3').offset().top)
    })
    </script>

    6. 獲取元素離頂的距離之後可以用於動畫觸發條件判斷，偵測使用者當前在網頁是處於哪一個範圍內，在有動畫的需求上效果非常實用

    目標是我 我離網頁最頂端的距離有 px

以上是一些在jQ常見的應用功能，更多還有動畫效果animation的API可以參考官方文件，在學習一個框架或函式庫的時候直接查看文件說明是最好的學習方式之一。

小結

實際應用過jQuery之後應該都可以理解「用的少，做的多」這句口號了吧?

在應用上jQuery與JS有許多相似的地方，如果是直接學jQ的話在使用JS上可能會覺得有不順手的感覺是很正常的，但如果已經對JS有基本了解那學習jQ的速度會非常的快且觀念也會較正確，因此才會推薦先JS再jQ。

哪怕社群都開始在棄用jQuery但使用他不要覺得是件可恥的事情，應該要想想他到底可以帶給你什麼效益才是重點，針對更多jQuery的學習及觀念講解可以參考:Alex jQ從入門到認識

jQ見山是山

影片出處:這裡