基本動畫

元素.show([speed],[callback])

元素.hide([speed],[callback])

元素.toggle([speed],[callback])

元素.slideDown([speed],[callback])

元素.slideUp([speed],[callback])

元素.slideToggle([speed],[callback])

元素.fadeIn([speed],[callback])

元素.fadeOut([speed],[callback])

元素.fadeToggle([speed],[callback])

自定義動畫

• 元素.animate({params},[speed],[easing],[callback]);

• 引數：

  • ① params ,必選。 表示運動的哪些樣式屬性，用物件 表示。

  • ② [speed] ，可選，表示動畫執行時長，數字 表示毫秒。

  • ③ [easing] ，可選，表示運動的方式，預設為swing（緩動）慢快慢 可以是linear（勻速）。

  • ④ callback，可選，表示動畫執行完後要執行的程式，用函式 表示。

動畫的佇列和動畫停止

元素.stop([clearQueue], [jumpToEnd]);

• 引數：

• clearQueue ，可選，表示是否清空動畫佇列。 預設為false。 若是false 時，會停止當前這一個動畫，開始佇列中的下一個動畫。 若是true 時，停止動畫並清空所有的動畫佇列。

• jupmToEnd ，可選，表示是否讓當前動畫直接達到目標值。預設為false 若是false 時，會直接停止當前動畫，不會達到目標值。 若是true 時，則會停止當前動畫，直接達到目標值。

on事件

// 第一個引數：events，繫結事件的名稱可以是由空格分隔的多個事件（標準事件或者自定義事件）
// 第二個引數：selector, 執行事件的後代元素（可選），如果沒有後代元素，那麼事件將有自己執行。
 

// 第三個引數：data，傳遞給處理函式的資料（可選），事件觸發的時候通過event.data來使用（不常使用）
// 第四個引數：handler，事件處理函式
$(selector).on(events[,selector][,data],handler);

簡單事件註冊：

// 給按鈕註冊事件
$('button').on('click', function(){
    console.log('click');
});

多個事件註冊

$('button').on(
    {
        click:function() {
            console.log('click'),
        },
        mouseover:function() {
            console.log('mouseover'),
        },
        mouseout:function() {
            console.log('mouseout'),
        }    
    }
);

事件委託

// li的點選事件 全部委託給其父元素ul
$('ul').on('click', 'li', function(){
    alert($(this).text());
});

jQuery觸發事件

• 觸發方式1： ​ 元素.事件名();

• 觸發方式2： ​ 元素.trigger('event name');

<script>
    $('#btn').click(function(){
        alert('觸發了');
    });
    // 觸發方式1
    $('#btn').click();
    // 觸發方式2：
    $('#btn').trigger('click');
</script>

jQuery解綁事件

// 解綁匹配元素的所有事件
$(selector).off();
// 解綁匹配元素的所有click事件
$(selector).off('click');

jQuery事件物件

$(document).click( function(e) {  // 形參e就是我們的 事件物件
  console.log(e);
});

// screenX和screenY    對應螢幕最左上角的值
// clientX和clientY    距離頁面左上角的位置（忽視滾動條）
// pageX和pageY    距離頁面最頂部的左上角的位置（會計算滾動條的距離）

// event.keyCode    按下的鍵盤程式碼
// event.data    儲存繫結事件時傳遞的附加資料

// event.stopPropagation()    阻止事件冒泡行為
// event.preventDefault()    阻止瀏覽器預設行為
// return false 既能阻止事件冒泡，又能阻止瀏覽器預設行為。