原生JavaScript版

function()

function()，就是一連串的動作，後面一定要接()
$(this)，係指function的母事件所指定的元素

點擊觸發，與紀錄購買狀態(click)

 .buybtn 點擊購買

.buybtn
  border: 1px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
 
.buyed
  border: 1px solid #000
  background-color: #f24
  color: white

$(".buybtn").click(
  function() {
    $(this).text("已經購買");
    $(this).addClass("buyed");
  }
);

$(this)操作觸發的案件：請選擇物品

.selbtn(data-cata="tree") 選擇物品一
.selbtn(data-cata="sea") 選擇物品二
.selbtn(data-cata="flower") 選擇物品三
h4.show-info 已選擇物品：無
h4.show-cata 已選擇種類

.selbtn
  border: 1px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

.show-info
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

.show-cata
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

$(".selbtn").click(
  function() {
    //.text包空的表示選取前面this的文字
    $(".show-info").text($(this).text());
    //.attr選取html裡面的屬性
    $(".show-cata").text($(this).attr("data-cata"));
    //等於要兩個等號
    //事件用{}包住
    //符合→條件式後面直接加符合事件
    //不符合→else後面加不符合事件
    if ($(this).attr("data-cata") == "flower") {
      $(".show-cata").append("，他買的是花");
    } else {
      $(".show-cata").append("，NO他買的是不是花ˊˋ");
    }
  }
);

已選擇物品：無

已選擇種類

滑鼠的移入移出

.mbtn 使用者移入了嗎？

.mbtn
  border: 2px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

$(".mbtn").mouseenter(
  function() {
    $(this).css("background-color", "#333");
    $(this).css("color", "#fff");
    $(this).text("使用者進入了！!");
  }
);

$(".mbtn").mouseleave(
  function() {
    $(this).css("background-color", "#fff");
    $(this).css("color", "#333");
    $(this).text("使用者離開了 :(");
  }
);

setTimeout：一定時間後的效果

.timerbox 10秒之後這裡變紅色

.timerbox
  border: 2px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

//setTimeout(事件, 毫秒);→經過特定時間後執行
setTimeout(
  function() {
    $(".timerbox").css("background-color", "#f24");
  }, 10000);

進階：倒數計時器製作

.countbox 經過了×××秒

.countbox
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

var nowtime = 0;

//setInterval(事件, 毎隔多少秒改變的秒數)→毎隔×秒後會出現的效果
setInterval(
  function() {
    nowtime = nowtime + 1
    //.text("原本的文"+變數名稱+"字")→變數置入文字中
    $(".countbox").text("已經經過" + nowtime + "秒");
  }, 1000);
   //表示毎經過一秒，會觸發兩個動作
   //1 nowtime+1
   //2 nowtime的値更新在文字上