JQuery 學習筆記 03

8 min readSep 20, 2020

事件類型、事件冒泡阻止

// event.stopPropagation 阻止事件往上冒泡
$('div').click(function (event) {
 alert(this.id) 
 event.stopPropagation()
})// 阻止事件冒泡與默認行為，設定return false
$('a').click(function (event) {
 // 阻止a標籤的預設事件
 event.preventDefault()
 event.stopPropagation() // 阻止事件冒泡與默認行為
 return false
})// 事件位置
$(document).mousedown(function (event) {
// 得到滑鼠位置(不包含滾動距離)
  alert(event.pageX + ',' + event.pageY) 
// 得到滑鼠位置(包含滾動距離)
  alert(event.clientX + ',' + event.clientY) 
// JQ語法which，用在滑鼠事件：回傳滑鼠按了什麼button; 1-左鍵 2-滾輪 3-右鍵
  alert(event.which)
})// 鍵盤事件
// keydown：keyCode 鍵盤碼(不分大小寫)
$(document).keydown(ev=>{
 alert(event.which)
})// keypress: charCode 字符碼(分大小寫，但ctrl shift不支持)
$(document).keypress(ev=>{
  alert(event.which)
})

offset、position、offsetParent

offset：
相對；直接得到當前元素距離指定邊框的距離，margin不會計算
position：
直接得到當前元素，距離第一個有定位父節點的距離，margin會計算
offsetParent ：
得到第一個有定位的父節點，如果父節點沒有定位就往上找，最後找到

// 距離左邊界的距離offset().left
$('#div2').offset().left // 得到50px (div1與div2的margin總和)// 距離上邊界的距離position().top
// div1  position: relative 註解掉：
$('#div2').position().top // 得到10px (div1與div2的margin相差)// div1  position: relative 作用的情況下
$('#div2').position().top // -20px (0 - div2的margin)// div1  position: relative 註解掉 - div1變成黃色
// div1  position: relative 作用的情況下- body變成黃色
$('#div2').offsetParent().css('backgroundColor', 'yellow')// 應用：配合事件的pageX、pageY可以調整節點的位置

取值、賦值

// JQ取值只能取第一個符合的數值
 alert($('input').val()) // 得到aaa// JQ賦值會對所有擷取的節點進行賦值
 alert($('input').val("JQuery")) 所有input value變成"JQuery"// length、size()取得搜尋到的節點數量
 alert($('input').size()) // 3
 alert($('input').length) // 3// css()、attr()、html()都會對所有符合搜索條件的節點進行更改
// 如果想要各自處理，可以使用each 
// 下列寫法讓input value變成0、1、2
$('input').each(function(index,element){
 alert(index,element)
 element.value = index // JS物件方法 
 $(element).val(index) // JQ物件方法
})

動畫效果

// hover
$('#div1').hover(function(){
  ...滑鼠over時執行的內容...
},function(){
  ...滑鼠out時執行的內容...
})// hide() 隱藏節點 show()顯示節點
// 有兩個參數： 1. 動畫持續秒數 2. 動畫結束時執行callback
// 動畫效果：從左上角收起、展開

// slideDown() slideUp() // 動畫效果 卷軸效果

// fadeIn() fadeOut()動畫效果 淡入淡出效果

// fadeTo(動畫持續時間，透明度0~1，callback)

// animate(指定的CSS形式,動畫執行時間,callBack)

// 動畫方式：'linear' 平均速度(預設值)、'swing' 慢快慢

jQuery動畫框架jQuery-ui - 提供更多動畫方式

// 模擬落地效果
// 需要加上position: absolute的CSS設定

// 使用jQuery-ui後可以指定變化顏色的時間

動畫效果的停止

動畫如果不設定的話，會累積執行次數，直到所有動畫結束為止

stop()、finish()

$('#div1').stop()          // 停下一個進行中的動畫
$('#div1').stop(true)      // 所有動畫都停止
$('#div1').stop(true,true) // 所有動畫停止，直接顯示動畫結束的樣子
$('#div1').finish()        // 所有動畫停止，直接顯示動畫結束的樣子