詳解jQuery的核心函數和事件處理

Posted on by

事件

頁面載入 

ready(fn)當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數

$(document).ready(function(){  // 在這裡寫你的代碼...});// 下面是簡寫$(function($) {  // 你可以在這裡繼續使用$作為別名...});

事件處理 on(events,fn)在選擇元素上綁定一個或多個事件的事件處理函數

// 給p標簽添加點擊事件監聽$("p").on("click", function(){alert( $(this).text() );});// 第二種寫法 等效於上面$("p").click(function(){alert( $(this).text() );});
  • off(events,[fn])在選擇元素上移除一個或多個事件的事件處理函數 
    // 移除p標簽綁定的所有事件監聽$("p").off()// 移除p標簽綁定的click事件監聽$("p").off( "click")

    bind(events,fn)為每個匹配元素的特定事件綁定事件處理函數

    // 移除p標簽綁定的所有事件監聽$("p").bind("click", function(){  alert( $(this).text() );});// 同時綁定多個事件類型$('#foo').bind('mouseenter mouseleave', function() {  alert();});

    unbind(type,fn]])bind()的反向操作，從每一個匹配的元素中刪除綁定的事件

    // 把所有段落的所有事件取消綁定$("p").unbind()// 將段落的click事件取消綁定$("p").unbind( "click" )

    one(type,[data],fn)為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數

    // 當所有段落被第一次點擊的時候，顯示所有其文本$("p").one("click", function(){  alert( $(this).text() );});

    事件委派 delegate(selector,[type],[data],fn)指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數

      <div style="background-color:red">      <p>這是一個段落。</p>      <button>請點擊這裡</button>  </div>
    // 當點擊button時，隱藏或顯示 p 元素  $("div").delegate("button", "click", function () {      $("p").slideToggle();  });

    在這裡插入圖片描述

    undelegate([selector,[type],fn])刪除由 delegate() 方法添加的一個或多個事件處理程序

    // 從p元素刪除由 delegate() 方法添加的所有事件處理器$("p").undelegate();// 從p元素刪除由 delegate() 方法添加的所有click事件處理器$("p").undelegate( "click" )

    事件切換 hover([over,]out)一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法
    over:鼠標移到元素上要觸發的函數
    out:鼠標移出元素要觸發的函數

    // 鼠標懸停的表格加上特定的類$("td").hover(  function () {    $(this).addClass("hover");  },  function () {    $(this).removeClass("hover");  });

    事件 blur([[data],fn])當元素失去焦點時觸發 blur 事件

    // 鼠標懸停的表格加上特定的類$("td").hover(  function () {    $(this).addClass("hover");  },  function () {    $(this).removeClass("hover");  });

    change([[data],fn])當元素的值發生改變時，會發生 change 事件

    // 觸發被選元素的 change 事件$(selector).change();

    click([[data],fn])觸發每一個匹配元素的click事件

    // 觸發頁面內所有段落的點擊事件$("p").click();

    dblclick([[data],fn])當雙擊元素時，會發生 dblclick 事件

    // 給頁面上每個段落的雙擊事件綁上 "Hello World!" 警告框$("p").dblclick( function () { alert("Hello World!"); });

    error([[data],fn])當元素遇到錯誤（沒有正確載入）時，發生 error 事件

    // 在服務器端記錄JavaScript錯誤日志:$(window).error(function(msg, url, line){  jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });});

    focus([[data],fn])當元素獲得焦點時，觸發 focus 事件

    // 當頁面加載後將 id 為 'login' 的元素設置焦點:$(document).ready(function(){  $("#login").focus();});

    focusin([data],fn)當元素獲得焦點時，觸發 focusin 事件

    <p><input type="text" /> <span>focusout fire</span></p><p><input type="password" /> <span>focusout fire</span></p>
    // 獲得焦點後會觸發動畫$("p").focusin(function() {$(this).find("span").css('display','inline').fadeOut(1000);});

    focusout([data],fn)當元素失去焦點時觸發 focusout 事件

    // 獲得焦點後會觸發動畫$("p").focusout(function() {  $(this).find("span").css('display','inline').fadeOut(1000);});

    keydown([[data],fn])當鍵盤或按鈕被按下時，發生 keydown 事件

    // 在頁面內對鍵盤按鍵做出回應，可以使用如下代碼$(window).keydown(function(event){  switch(event.keyCode) {    // ...    // 不同的按鍵可以做不同的事情    // 不同的瀏覽器的keycode不同    // 更多詳細信息:     http://unixpapa.com/js/key.html    // ...  }});

    keypress([[data],fn])當鍵盤或按鈕被按下時，發生 keypress 事件

    // 計算在輸入域中的按鍵次數$("input").keydown(function(){  $("span").text(i+=1);});

    keyup([[data],fn])當按鈕被松開時，發生 keyup 事件。它發生在當前獲得焦點的元素上

    // 當按下按鍵時，改變文本域的顏色$("input").keyup(function(){  $("input").css("background-color","#D6D6FF");});

    mousedown([[data],fn])當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件

    // 當按下鼠標按鈕時，隱藏或顯示元素$("button").mousedown(function(){  $("p").slideToggle();});

    mouseenter([[data],fn])當鼠標指針穿過元素時，會發生 mouseenter 事件

    // 當鼠標指針進入（穿過）元素時，改變元素的背景色$("p").mouseenter(function(){  $("p").css("background-color","yellow");});

    mouseleave([[data],fn])當鼠標指針離開元素時，會發生 mouseleave 事件

    // 當鼠標指針離開元素時，改變元素的背景色$("p").mouseleave(function(){  $("p").css("background-color","#E9E9E4");});

    mousemove([[data],fn])當鼠標指針在指定的元素中移動時，就會發生 mousemove 事件

    事件坐標

    event.clientX, event.clientY相對於視口的左上角event.pageX,event.pageY 相對於頁面的左上角event.offsetX,event.offsetY 相對於事件元素的左上角

    // 獲得鼠標指針在頁面中的位置$(document).mousemove(function(e){  $("span").text(e.pageX + ", " + e.pageY);});

    mouseout([[data],fn])當鼠標指針從元素上移開時，發生 mouseout 事件

    // 當鼠標從元素上移開時，改變元素的背景色：$("p").mouseout(function(){  $("p").css("background-color","#E9E9E4");});

    mouseover([[data],fn])當鼠標指針位於元素上方時，會發生 mouseover 事件

    // 當鼠標指針位於元素上方時時，改變元素的背景色$("p").mouseover(function(){  $("p").css("background-color","yellow");});

    mouseup([[data],fn])當在元素上放松鼠標按鈕時，會發生 mouseup 事件

    // 當松開鼠標按鈕時，隱藏或顯示元素$("button").mouseup(function(){  $("p").slideToggle();});

    resize([[data],fn])當調整瀏覽器窗口的大小時，發生 resize 事件

    // 改變頁面窗口的大小時彈出警告窗$(window).resize(function(){  alert("Stop it!");});

    scroll([[data],fn])當用戶滾動指定的元素時，會發生 scroll 事件

    // 當頁面滾動條變化時，執行的函數:$(window).scroll( function() {   alert("Stop it!");});

    select([[data],fn])當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件

    // 觸發所有input元素的select事件:$("input").select();

    submit([[data],fn])當提交表單時，會發生 submit 事件

    // 提交本頁的第一個表單:$("form:first").submit();// 阻止表單提交:$("form").submit( function () {  return false;} );

    unload([[data],fn])在當用戶離開頁面時，會發生 unload 事件
    點擊某個離開頁面的鏈接
    在地址欄中鍵入瞭新的 URL
    使用前進或後退按鈕
    關閉瀏覽器
    重新加載頁面

    // 頁面卸載的時候彈出一個警告框:$(window).unload( function () { alert("Bye now!"); } );

推薦閱讀：