菜鳥工程師訓練營

document/window事件
load:載入所有檔案
resize:改變視窗大小引發
scroll
unload:關掉分頁或視窗引發

表單事件
submit
reset
change
focus
blur

鍵盤事件
keypress
keydown
keyup

但是等onload載完資料再開始js太慢
所以用這種方式
$(document).ready(function(){});

也可以縮寫
$(function(){

});

滑鼠移入移出元素
mouseover & mouseout
可以合併成hover

$('selector').hover(function1,function2)

停止事件行為

preventDefault()事件可以阻止瀏覽器事件的預設回應

EX:$('selector').click(function(event){

event.preventDefault();

});

移除事件

$('selector').off(''mouseover)

 

.off()則可以移除所有事件

on()

$('#selector').on('click',selector,'Data',Function)

第一個參數放事件，可以放多個以空白分隔

selector: Dom元素、.aaa、#bbb

Data:傳給函式的資料

Function:事件引發要執行的動作

<script>
       var linkvar = { msg: 'Hello from a link' };
       var pvar = { msg: 'hello from a paragraph' };
        
      $('#aa').on('mouseover',linkvar,function(evt){
           alert(evt.data.msg);
       });
       $('#aa').on('click', pvar, function (evt) {
           alert(evt.data.msg);
       });

   </script>

 

動畫跟特效

1.淡入淡出
$('element').fadeOut('slow') 淡出

$('element').fadeIn(1000) 淡入

fadeToggle()  淡入或淡出

fadeTo() 指定變淡到什麼程度

EX:$('element').fateTo('normal', .75)

裡面也可以放數字(毫秒)

速度的關鍵字對應

fast:200ms

normal:400ms

slow:600ms

2.

show()

hide()

toggle():反轉元素現在的狀況

 

3.滑動

slideDown():從上到下顯示

slideUp():從下到上隱藏

slideToggle():顯示或隱藏

※js不接受破折號的css
font-size是合法的css屬性，但不能當物件實字的key

除非改成fontSize

如果一定要用的話要加上引號'font-size'

 

4.動畫

animate()

第一個參數放帶有css的物件實字

第二個放動畫時間(以毫秒計)

$(function () {
            $('#test').click(function () {
                $('#area').animate({
                    left: '650px',
                    opacity: .5,
                    fontSize:'30px'
                }, 1500);


            });

        });

除了指定也可以用+=或-=的方式

 $('#area').animate({
     fontSize: '+=30px'
                }, 1000);

 

5.漸進

內建只有2個

swing:一開始較快，後來減速

linear:穩定動畫、每步都相同

放在jquery效果的第二個參數

animate的第3個參數

 $('#area').animate({
     fontSize: '+=30px'
                }, 1000,'linear');

或是

$('element').slideUp(1000,'linear')

 

6.如果是要在效果完成後執行動作

比方說圖片淡入完再顯示文字

函式後要再丟一個function進去

或是直接用chain連接函示