導入jQuery - CDN

• 插入在body內，Js的前方

01. select item

1. select an item
   $("#header h1");

2. select many items
   $("button");

02. styles

1. get css value
   console.log($("h1").css("color"));

2. set css value
   $("h1").css("color", "green");

3. add class names
   $("h1").addClass("big-title margin-50");

4. remove class name
   $("h1").removeClass("big-title");

5. whether have class name (return boolean)
   $("h1").hasClass("bid-title");

03. text

1. change pure text
   $("h1").text("Bye");

2. change html text (innerHTML)
   $("h1").html("<em>Bye</em>");

04. attribute

1. get attribute value
   console.log($("img").attr("src"));

2. set attribute value
   $("a").attr("href", "https://www.yahoo.com")

3. also effect on class
   $("h1").attr("class")

05. Event listener

1.listen to mouse

$("h1").click(function(){
    $("h1").css("color", "purple");

});

2.listen to keyboard

$(document).keypress(function(event){
    console.log(event.key);
})

3.ask all items to listen

$("button").click(function(){
    $("h1").css("color", "purple");
})

4.listen to other Events

$("h1").on("mouseover", function(){
    $("h1").css("color", "purple");
})

06. add new element

1. before: add before selected element
   $("h1").before("<button>New</button>")

   New

   Hello

2. after:add after selected element
   $("h1").after("<button>New</button>")

   Hello

   New

3. prepend: before selected content
   $("h1").prepend("<button>New</button>")

   NewHello

4. append: add selected content
   $("h1").append("<button>New</button>")

   HelloNew

5. remove elements
   $("button").remove();

07. other website animation

可用效果一覽

1.隱藏 / 顯示

$("h1").hide();
$("h1").show();
$("h1").toggle();

2.淡出 / 淡入

$("h1").fadeOut();
$("h1").fadeIn();
$("h1").fadeToggle();

3.滑出 / 滑入

$("h1").slideUp();
$("h1").slideDown();
$("h1").slideToggle();

4.自訂效果 (限number value in CSS code)

$("h1").animate({opacity: 0.5});

5.多種效果依照順序改變

$("h1").fadeOut().fadeIn().animate({opacity: 0.5});