jQuery 初階滑鼠事件 Click / Hover

原生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他買的是不是花ˊˋ");
    }
  }
);
Display
選擇物品一
選擇物品二
選擇物品三

已選擇物品:無

已選擇種類

滑鼠的移入移出

.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("使用者離開了 :(");
  }
);
Display
使用者移入了嗎?

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);
Display
10秒之後這裡變紅色

進階:倒數計時器製作

.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的値更新在文字上
Display
經過了×××秒

Leave a Reply

Your email address will not be published. Required fields are marked *