---
# System prepended metadata

title: 【Day17】前端進階程式 js part2

---

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

範例：
HTML(jade)
```htmlmixed=
.buybtn 點擊購買
.buybtn 點擊購買
```
CSS(sass)
```css=
.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
```javascript=
$(".buybtn").click(
  function(){
    $(this).text("已經購買");
    $(this).addClass("bought");
  }
);
```
呈現
- 點擊前
![](https://hackmd.io/_uploads/ByyBWK6ka.png)

- 點擊後
![](https://hackmd.io/_uploads/B1QKbY6yp.png)

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

範例：
HTML(jade)
```htmlmixed=
.selbtn(data-cata="tree") 選擇物品一
.selbtn(data-cata="flower") 選擇物品二
.selbtn(data-cata="sea") 選擇物品三
h4.show_info 已選擇物品: 無
h4.show_cata 已選擇種類
```
CSS(sass)
```css=
.buybtn,.selbtn
  border: solid 2px
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  transition-duration: 1s
```
JS
```javascript=
$(".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("，他買的不是花:(")
    }
  }
);
```
呈現
- 點擊前
![](https://hackmd.io/_uploads/S1dm7Fa1p.png)

- 點擊後
![](https://hackmd.io/_uploads/HJJ4XY61p.png)
![](https://hackmd.io/_uploads/rkH4XF6Ja.png)
![](https://hackmd.io/_uploads/ryLtmKTJp.png)

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

範例：
HTML(jade)
```htmlmixed=
h3 3. 滑鼠的移入移出
.buybtn.mbtn 使用者移入了嗎?
```
CSS(sass)
```css=
.buybtn
  border: solid 2px
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  transition-duration: 1s
```
JS
```javascript=
$(".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("使用者離開了");
  }
);
```
呈現
- 移入前
![](https://hackmd.io/_uploads/BJr9VF61p.png)

- 移入後
![](https://hackmd.io/_uploads/H1M38FpkT.png)

- 再次移開
![](https://hackmd.io/_uploads/HJZaIKpk6.png)


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

範例：
HTML(jade)
```htmlmixed=
.selbtn.timerbox 五秒後這裡會移動且變紅色
.countbox 經過了xxx秒
```
CSS(sass)
```css=
.selbtn
  border: solid 2px
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  transition-duration: 1s
```
JS
```javascript=
setTimeout(
  function(){
    $(".timerbox").css("background-color","red");
  }
  ,5000);

nowtime=0;
setInterval(
  function(){
    nowtime=nowtime+1;
    $(".countbox").text("已經經過"+nowtime+"秒");
  }
  ,1000);
```
呈現
- 5秒前
![](https://hackmd.io/_uploads/SJL5tYaJT.png)

- 第5秒
![](https://hackmd.io/_uploads/rypcYK61p.png)

- 5秒後
![](https://hackmd.io/_uploads/r18sKFpyT.png)

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