【JS】jQuery使用者觸發事件

this、parent、siblings、find、alert、remove、animate

 發表於 2024-02-02  |  1 分鐘  |  102 個字

【JS】jQuery使用者觸發事件

this、parent、siblings、find、alert、remove、animate

 發表於 2024-02-02  |  1 分鐘  |  102 個字

滑鼠點擊事件

1

<button class="box">按鈕</button>

1
2
3

$(".box").click(function(){
  $(this).css("background-color","red");
});

滑鼠移入、移出事件

1

<button class="box">按鈕</button>

1
2
3
4
5
6

$(".box").mouseenter(function(){
  $(this).css("background-color","red");
});
$(".box").mouseleave(function(){
  $(this).css("background-color","");
});

經過特定時間後執行

1

<p>五秒後可關閉廣告<button class="cross" style="display: none">Ｘ</button></p>

1
2
3

setTimeout(function(){
  $(".cross").show();
},5000);

setTimeout(動作,幾毫秒);

每經過特定時間後執行一次

1

<p>自動登出計時<span class="time">300</span></p>

1
2
3
4
5

let nowTime = 300;
setInterval(function(){
  nowTime = nowTime - 1; 
  $(".time").text(nowTime);
},1000);

setInterval(動作,幾毫秒);

倒數計時

1

<p>自動登出計時<span class="time">300</span></p>

1
2
3
4
5

let nowTime = 300;
setInterval(function(){
  nowTime = nowTime - 1; 
  $(".time").text(nowTime);
},1000);

setInterval(動作,幾毫秒);

暫停作用中效果

1
2
3

$("button").click(function(){
  $(".box").stop().sligeToggle(5000);
});

若toggle在展開時點擊，會直接收合

取消預設行為事件

1

<a class="link" href="www.google.com">連結</a>

1
2
3

$(".link").click(function(){
  event.preventDefault();//取消原本會連到google事件
});

javaScript 

其他相關