事件

ready 頁面載入

在同一個頁面中無限次地使用$(document).ready()事件。其中註冊的函式會按照（程式碼中的）先後順序依次執行。

$(document).ready(function () {
    // 在這裡寫你的程式碼...
});

on

on()方法綁

$('#div1').on('mousemove', function () { //滑鼠移動上去後彈出move
    alert('move')
})
$('#div1').on('mousedown', function () {  //滑鼠按下後彈出down
    alert('down')
})

定事件處理程式到當前選定的jQuery物件中的元素。

off 移除

off() 方法移除用.on()繫結的事件處理程式

$('#div1').off('mousedown')//選中單個
$('#div1').off('mousedown', 'mousemove')//多個,都有才能選中
 

one

one 只執行一次，然後刪除自己，

$('ul').one('mousedown', function () { 
    console.log('ulmove')
})//點選ul後出現  ulmove  ,之後在點無效果
 

change 改變

當元素的值發生改變時，會發生 change 事件。

該事件僅適用於文字域（text field），以及 textarea 和 select 元素。當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生。

$(selector).change();
or
$("input[type='text']").change( function() {
  // 這裡可以寫些驗證程式碼
});
 

click 點選

例:觸發頁面內所有段落的點選事件

jQuery 程式碼:

$("p").click();

將頁面內所有段落點選後隱藏。

$("p").click( function () { $(this).hide(); });

dblclick 雙擊

給頁面上每個段落的雙擊事件綁上 "Hello World!" 警告框

jQuery 程式碼:

$("p").click( function () { $(this
 
).hide(); });

mousemove 滑鼠移動

獲得滑鼠指標在頁面中的位置：

$(document).mousemove(function(e){
 $("span").text(e.pageX + ", " + e.pageY);
});

focus 獲得焦點1

當頁面載入後將 id 為 'login' 的元素設定焦點:

jQuery 程式碼:

$(document).ready(function(){
  $("#login").focus();
});

使人無法使用文字框:

jQuery 程式碼:

$("input[type=text]").focus(function(){
  this.blur();
});//得到焦點後失去焦點
 

focusin 獲得焦點2

跟focus事件區別在於，他可以在父元素上檢測子元素獲取焦點的情況。

獲得焦點後會觸發動畫:

HTML 程式碼:

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

jQuery 程式碼:

$("p").focusin(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

blur 失去焦點1

當元素失去焦點時觸發 blur 事件。

這個函式會呼叫執行繫結到blur事件的所有函式，包括瀏覽器的預設行為。可以通過返回false來防止觸發瀏覽器的預設行為。blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的

$('input[type="text"]').blur(function () 
 {
    $('#div1').css('color', 'red')//單行css樣式
    
    $('#div1').css({              //多行css樣式
        'color': 'red',
        'background': 'lightblue',
        ' width': '100px'
    })
})//text框失去焦點時div1顏色變紅

focusout 失去焦點2

失去焦點後會觸發動畫:

跟blur 事件區別在於，他可以在父元素上檢測子元素失去焦點的情況。

HTML 程式碼:

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

jQuery 程式碼:

$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});//this 指 p,誰呼叫誰是this

keydown 鍵盤/按鈕按下1

在頁面內對鍵盤按鍵做出迴應，可以使用如下程式碼:

jQuery 程式碼:

$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按鍵可以做不同的事情
    // 不同的瀏覽器的keycode不同
    // 更多詳細資訊:     https://unixpapa.com/js/key.html
    // 常用keyCode： 空格 32   Enter 13   ESC 27
  }
});
 

keypress 鍵盤/按鈕按下2

與 keydown 事件不同，每插入一個字元，就會發生 keypress 事件.

keyup 按鈕鬆開

它發生在當前獲得焦點的元素上。

當按下按鍵時，改變文字域的顏色：

$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});
 

mousedown 按下滑鼠

當按下滑鼠按鈕時，隱藏或顯示元素：

$("button").mousedown(function(){
  $("p").slideToggle();
});
 

mouseenter a滑鼠指標只穿選中的

大多數時候會與mouseleave 事件一起使用。

與 mouseover 事件不同，只穿被選中的

當滑鼠指標進入（穿過）元素時，改變元素的背景色：

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

mouseleave a 滑鼠指標離開選中元素a

只離開被選中的時

當滑鼠指標離開元素時，改變元素的背景色：：

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});
 

mouseover b滑鼠指標位於元素上方

多與 mouseout 事件一起使用。

穿過被選元素或其子元素，都會觸發 mouseover 事件。

當滑鼠指標位於元素上方時時，改變元素的背景色：

$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

mouseout b 滑鼠離開任何元素

離開被選元素還是任何子元素，都會觸發 mouseout 事件。

當滑鼠從元素上移開時，改變元素的背景色：

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});
 

mouseup 放鬆滑鼠按鈕

與 click 事件不同，mouseup 事件僅需要放鬆按鈕。當滑鼠指標位於元素上方時，放鬆滑鼠按鈕就會觸發該事件。

相當於放上

當鬆開滑鼠按鈕時，隱藏或顯示元素：

resize 調整視窗

$("button").mouseup(function(){
  $("p").slideToggle();
});

當調整瀏覽器視窗的大小時，發生 resize 事件。

讓人每次改變頁面視窗的大小時很鬱悶的方法:

$(window).resize(function(){
  alert("Stop it!");
});

scroll 滾動指定的元素

當頁面滾動條變化時，執行的函式:

$(window).scroll( function() { /* ...do something... */ } );

對元素滾動的次數進行計數：

$("div").scroll(function() {
  $("span").text(x+=1);
});

select 執行繫結到select

當 textarea 或文字型別的 input 元素中的文字被選擇時，會發生 select 事件。

這個函式會呼叫執行繫結到select事件的所有函式，包括瀏覽器的預設行為。可以通過在某個繫結的函式中返回false來防止觸發瀏覽器的預設行為。

觸發所有input元素的select事件:

$("input").select();

當文字框中文字被選中時執行的函式:

$(":text").select( function () { /* ...do something... */ } );

submit 提交表單

提交本頁的第一個表單:

$("form:first").submit();

如果你要阻止表單提交

$("form").submit( function () {
  return false;
} );