• Table of Contents

Overview

jQuery 是一個快速、小巧且功能豐富的 JavaScript 庫。

Usage

Import

import $ from "jquery";

Selector

// find element id is 'test'.
$("#test"

Event

• document ready

  $(document).ready(function(){
    // jQuery methods go here...
  });
  

• click

  $("p").click(function(){
    // action goes here!!
  });
  

• mouse

  • hover() : mouseenter() 和 mouseleave() 方法的組合
    • mouseenter() : 鼠標指針進入 HTML 元素時執行
    • mouseleave() : 鼠標指針離開 HTML 元素時執行
  • mousedown() : 當鼠標左鍵、中鍵或右鍵被按下，同時鼠標懸停在 HTML 元素上時，將執行該函數
  • mouseup() : 該函數在釋放鼠標左鍵、中鍵或右鍵時執行，同時鼠標懸停在 HTML 元素上
  • focus() : 當表單域獲得焦點時執行該函數
  • blur() : 當表單域失去焦點時執行該函數

  $("#p1").mousedown(function(){
    alert("Mouse down over p1!");
  });
  

Effect

• hide()/show() : 隱藏 / 顯示

  用法 : $(selector).hide(speed,callback);

  $("button").click(function(){
    $("p").hide(1000);
  });
  

• fade : 淡入淡出

  用法 : $(selector).fadeTo(speed,opacity,callback);

  • fadeToggle() : 切換淡入淡出
    • fadeIn()/fadeOut() : 淡入 / 淡出
  • fadeTo() : 淡入淡出到指定透明度

• slide : 滑動

  用法 : $(selector).slideToggle(speed,callback);

  • slideDown() : 向下滑動元素
  • slideUp() : 向上滑動元素
  • slideToggle() : 切換滑動元素

• animate : 動畫

  用法 : $(selector).animate({params},speed,callback);

  $("button").click(function(){
    $("div").animate({left: '250px'}, 1000);
  });
  

• stop() : 停止動畫或效果

  $("#flip").click(function(){
      $("#panel").stop();
      $("#panel").slideToggle("slow");
  });
  

Callback Function 回調函數－當前效果100%完成後執行回調函數

JavaScript 語句是逐行執行的。但是，有了效果，即使效果未完成，也可以運行下一行代碼。這可能會產生錯誤。為了防止這種情況，你可以創建一個當前效果完成後執行的回調函數。