iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 13

JS Library 學習筆記:首先當然來試試 jQuery (二)

  • 分享至 

  • xImage
  •  
//jQuery 使用Id指定
$('#my-div')
//jQuery 使用Class指定
$('.my-div')

當指定到對的網頁元件後,原生的addEventListener可以直接使用定義好的on()函數,兩者用法差不多相同,第一個參數是需監聽的事件,第二個則是要執行的對應function:

$('#my-div').on('click',function(){
    $( this ).css('border-width','2px')
})
// function使用的是jQuery的css函式

除此之外,jQuery還把常使用到的click、hover等事件,提供對應的click()、hover()函式,以上方例子來說,可以改寫成:

$('#my-div').click(function(){
    $( this ).css('border-width','2px')
})

jQuery的事件們:
https://api.jquery.com/category/events/


上一篇
JS Library 學習筆記:首先當然來試試 jQuery (一)
下一篇
JS Library 學習筆記:首先當然來試試 jQuery (三)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言