1

<button type="button">按鈕</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

//當滑鼠點擊一次時
$("button").click(function(){
  $(this).css("background-color","red");
});

//當滑鼠連續點擊兩時
$("button").dblclick(function(){
  $(this).css("background-color","red");
});

//當滑鼠點下去時
$("button").mousedown(function(){
  $(this).css("background-color","red");
});

//當滑鼠下去後又放開時
$("button").mouseup(function(){
  $(this).css("background-color","");
});

1

<button type="button">按鈕</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

//當滑鼠移入時
$("button").mouseenter(function(){
  $(this).css("background-color","red");
});

//當滑鼠離開時
$("button").mouseleave(function(){
  $(this).css("background-color","");
});

//當滑鼠移入和離開時
$("button").hover(
  function() {
    $(this).css("background-color", "red"); 
  },
  function() {
    $(this).css("background-color", ""); 
  }
);

1
2
3
4
5
6

<select>
  <option value="蘋果">蘋果</option>
  <option value="香蕉">香蕉</option>
  <option value="鳳梨">鳳梨</option>
</select>
<p></p>

1
2
3
4

$("select").change(function(e){
  //<p>顯示選單的值
  $("p").text(e.target.value);
});

1
2
3
4
5
6
7
8
9

//焦點所在時
$("input").focus(function(){
  $(this).css("outline","solid 5px green");
});

//離開焦點
$("input").blur(function(){
  $(this).css("outline","solid 5px red");
});

1
2
3
4
5
6
7
8

$(document).mousemove(function(e){
  console.log(e.screenX); //距離 整個瀏覽器視窗 X軸
  console.log(e.screenY); //距離 整個瀏覽器視窗 Y軸
  console.log(e.pageX); //距離 整個html,body X軸
  console.log(e.pageY); //距離 整個html,body Y軸
  console.log(e.clientX); //距離 整個螢幕裝置 X軸
  console.log(e.clientY); //距離 整個螢幕裝置 Y軸
});

1
2
3

<div class="cursor">
  <img src="images/mouseImg.png">
</div>

1
2
3
4
5
6

html,body{
  cursor: none;
}
.cursor{
  position: fixed;
}

1
2
3
4
5
6
7
8

$(document).mousemove(function(event){
  let x = event.clientX;
  let y = event.clientY;
  $(".cursor").css({
    left: x + "px",
    top: y +"px"
  })
});

1

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

1
2
3

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

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);

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);

1
2
3

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

1

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

1
2
3

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