jQuery_事件(Events)

本文总阅读量次

觸發事件函式

1
2
3
$('選擇器').on('事件類型', function(){
    任意處理程序
})
  • $()函式的功能是將HTML元素轉換為jQuery特殊元素，經此方法轉換後的HTML元素稱為「jQuery物件」
  • on()是設定「當某事件發生時，執行某指令」的方法。
  1. 第一個參數是「事件類型(Event Type)」：事件觸發的條件
  2. 第二個參數是「處理程序(Event Handler)」：事件被觸發後，接著要调用的方法。
範例1(更改css色系)

當滑鼠移入#typo，接著會執行：透過css樣式修改#typo的顏色

1
$('選擇器').css('屬性','值');

css()中所定義的指令是「jQuery方法」，意即「jQuery其js中定義了的css()這個函式」

1
2
3
4
5
6

$function(){
    $('#typo').on('mouseover',function(){
        $('#typo').css('color','#ebc000')
    })
}
1
2
3
4
5
6

$(function(){
    $('#typo').css('color','#556A5B');
    $('#typo').css('transform','rotate(10deg)')
    $('#typo .inner').css('opacity',0.5)
})

多個處理程序

在.on()方法中的第一個參數「事件類型」被觸發之後，第二個參數「處理程序函式」中可以執行數個個別處理的程序

1
2
3
4
5
6

$('選擇器').on('事件類型', function(){
    處理1;
    處理2;
    處理3...;
})
範例2

當滑鼠移入#typo，接著會修改#typo的顏色，透過css樣式修改header的背景顏色

1
2
3
4
5
6
7

$function(){
    $('#typo').on('mouseover',function(){
        $('#typo').css('color','#ebc000') ;
        $('header').css('background-color','#ffffff')
    })
}

主要的事件類型

jQuery中，大部分的操作都基於HTML DOM，所以必須確定頁面文件已經完全下載好，才能開始執行程式。

當DOM載入後，可執行ready()方法，或者直接寫function()。

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
    // 這裡放你要執行的程式碼
});

//or

$function(){
    // 這裡放你要執行的程式碼
}

統整Jquery動畫效果

slide滑動系列
  • slideUp : 關閉
  • slideDown ：開啟
  • slideToggle ：開關
  • slideToggle（2000）:兩秒呈現
1
2
3
4
5
$(document).ready(function(){
    $('.button').click(function(event){
        $('.text').slideToggle(2000);
    })
});
fade淡出效果
  • fadeOut : 關閉
  • fadeIn ：開啟
  • fadeToggle ：開關
1
2
3
4
5
$(document).ready(function(){
    $('.button').click(function(event){
        $('.text').fadeToggle();
    })
});
鏈式複合式動畫效果

連續動畫的效果很吸睛，只需要在slideUp後再新增幾組效果slideDown及slideUp，便可呈現開啟關閉效果。

1
2
3
4
5
$(document).ready(function(){
    $('.start').click(function(event){
        $('.box').slideUp(1000).slideDown(1000).slideUp(1000);
    });
});
延遲出現動畫效果

指定區塊後方新增.delay（毫秒）.fadeIn效果

1
2
3
4
5
6
7
$(document).ready(function(){
    $('.open').click(function(event){
        $('.box1').delay(0).fadeIn();
        $('.box2').delay(1000).slideDown();
        $('.box3').delay(2000).show(0);
    });
});
晃動效果
1
2
3
4
5
$(document).ready(function(){
    $('.open').click(function(event){
        $('.box').addclass('shake')
    });
});

另外也『 大推 』 CSS animate動畫工具，請參考 詳細使用說明