[ 第 12 週] 認識 JQuery


JQuery 是一個 JavaScript 的 library。
把很多東西都用 function 包好,可以更方便使用,避免掉寫一大串程式碼佔記憶體的問題。
早期會那麼夯的點是可以跨瀏覽器的支援,只要用一個寫法,就可以在不同的瀏覽器上跑。

使用示範

點擊一個按鈕後,會跳出警告視窗。
原本寫法:

document.addEventListener('DOMContentLoaded', function() {  
     document.querySelector('.btn').addEventListener('click', function() {
    alert('click!') 
     })
})

JQuery 寫法

jQuery(document).ready(function() {
  jQuery('.btn').click(function(e) {
    alert('click JQ!')
  })
})

因為在 JQuery 裡定義了 var $ =jQuery
所以上面的寫法可以改成:

$(document).ready(function() {
      $('.btn').click(function(e) {
        alert('click JQ!')
        })
    })

常用語法

可以直接改變 css
.hide() 隱藏
.show() 顯示
.fadeIn(秒數) 淡入
.fadeOut(秒數) 淡出

.val() 取出該值,get 的概念
.val(abc) 給一個 abc 的值, set 的概念

其他可以參考:
You might not need jQuery
jQuery
You-Dont-Need-jQuery

#jquery






你可能感興趣的文章

MTR04_0614

MTR04_0614

React-[基礎篇]- React中的狀態state

React-[基礎篇]- React中的狀態state

ElementPlus的自定義主題

ElementPlus的自定義主題






留言討論