# 【Day17】前端進階程式 js part2
## jquery 初階滑鼠事件
### 1. 點擊觸發，與紀錄購買狀態(click)
==$("").click()==

範例：
HTML(jade)

.buybtn 點擊購買
.buybtn 點擊購買

CSS(sass)

.buybtn
  border: solid 2px
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  transition-duration: 1s
  
.bought
  border: solid 2px black
  background-color: #f24
  color: white

JS

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

呈現
- 點擊前

- 點擊後

### 2. $(this) 操作觸發動作的按鍵: 選擇物品
- 注意：this不須雙引號
- 利用 ==function(){}== 套用一組動作
- 屬性: ==$().attr("")==
- if else條件句應用

範例：
HTML(jade)

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

CSS(sass)

.buybtn,.selbtn
  border: solid 2px
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  transition-duration: 1s

JS

$(".selbtn").click(
  function(){
    $(".show_info").text($(this).text());
    $(".show_cata").text($(this).attr("data-cata"));
    if ($(this).attr("data-cata")=="flower") {
      $(".show_cata").append("，他買的是花!!")
    } else{
      $(".show_cata").append("，他買的不是花:(")
    }
  }
);

呈現
- 點擊前

- 點擊後

### 3. 滑鼠的移入移出
- 滑鼠移入 ==$("").mouseenter()==
- 滑鼠移開 ==$("").mouseleave()==
- 改變css屬性 ==$().css("屬性","屬性值")==

範例：
HTML(jade)

h3 3. 滑鼠的移入移出
.buybtn.mbtn 使用者移入了嗎?

CSS(sass)

.buybtn
  border: solid 2px
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  transition-duration: 1s

JS

$(".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("使用者離開了");
  }
);

呈現
- 移入前

- 移入後

- 再次移開

### 4. 時間相關的一些觸發
- ==set Timeout(動作，時間)== ---> 經過特定時間後執行
- ==set Interval(動作，時間)== ---> 每經過特定時間後執行

範例：
HTML(jade)

.selbtn.timerbox 五秒後這裡會移動且變紅色
.countbox 經過了xxx秒

CSS(sass)

.selbtn
  border: solid 2px
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  transition-duration: 1s

JS

setTimeout(
  function(){
    $(".timerbox").css("background-color","red");
  }
  ,5000);

nowtime=0;
setInterval(
  function(){
    nowtime=nowtime+1;
    $(".countbox").text("已經經過"+nowtime+"秒");
  }
  ,1000);

呈現
- 5秒前

- 第5秒

- 5秒後

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::