萬能媒體格式轉換工具

阿新 • • 發佈：2021-11-04

ready(fn)：當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式。

這是事件模組中最重要的一個函式，因為它可以極大地提高web應用程式的響應速度。

簡單地說，這個方法純粹是對向window.load事件註冊事件的替代方法。通過使用這個方法，可以在DOM載入就緒能夠讀取並操縱時立即呼叫你所繫結的函式，而99.99%的JavaScript函式都需要在那一刻執行。

有一個引數－－對jQuery函式的引用－－會傳遞到這個ready事件處理函式中。可以給這個引數任意起一個名字，並因此可以不再擔心命名衝突而放心地使用$別名。

請確保在 <body> 元素的onload事件中沒有註冊函式，否則不會觸發+$(document).ready()事件。

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

在DOM載入完成時執行的程式碼，可以這樣寫：

jQuery 程式碼:

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

描述:

使用 $(document).ready() 的簡寫，同時內部的 jQuery 程式碼依然使用 $ 作為別名，而不管全域性的 $ 為何。

jQuery 程式碼:

$(function($) {
  // 你可以在這裡繼續使用$作為別名...
});

on(events,[selector],[data],fn)：在選擇元素上繫結一個或多個事件的事件處理函式。

on()方法繫結事件處理程式到當前選定的jQuery物件中的元素。在jQuery 1.7中，.on()方法提供繫結事件處理程式所需的所有功能。幫助從舊的jQuery事件方法轉換，see.bind(),.delegate(), 和.live(). 要刪除的.on()繫結的事件，請參閱.off()。要附加一個事件，只執行一次，然後刪除自己，請參閱.one()

引數

events,[selector],[data],fn

events:一個或多個用空格分隔的事件型別和可選的名稱空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇的< null或省略，當它到達選定的元素，事件總是觸發。

data:當一個事件被觸發時要傳遞event.data給事件處理函式。
fn:該事件被觸發時執行的函式。 false 值也可以做一個函式的簡寫，返回false。

events-map,[selector],[data]

events-map:個用字串表示的，一個或多個空格分隔的事件型別和可選的名稱空間，值表示事件繫結的處理函式。
selector:一個選擇器字串過濾選定的元素，該選擇器的後裔元素將呼叫處理程式。如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函式。

描述:

Display a paragraph's text in an alert when it is clicked:

$("p").on("click", function(){
alert( $(this).text() );
});

Pass data to the event handler, which is specified here by name:

function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

Cancel a form submit action and prevent the event from bubbling up by returning false:

$("form").on("submit", false)

Cancel only the default action by using .preventDefault().

$("form").on("submit", function(event) {
  event.preventDefault();
});

Stop submit events from bubbling without preventing form submit, using .stopPropagation().

$("form").on("submit", function(event) {
  event.stopPropagation();
});

off(events,[selector],[fn])：在選擇元素上移除一個或多個事件的事件處理函式。

off()方法移除用.on()繫結的事件處理程式。有關詳細資訊，請參閱該網頁上delegated和directly繫結事件。特定的事件處理程式可以被移除元素上提供事件的名稱，名稱空間，選擇器，或處理函式名稱的組合。當有多個過濾引數，所提供的引數都必須匹配的事件處理程式被刪除。

如果一個簡單的事件名稱，比如提供"click"，所有這種型別的事件（包括直接和委派）從jQuery設定的元素上刪除。當編寫程式碼，將作為一個外掛使用，或者乾脆當一個大的程式碼基礎工作，最好的做法是安裝和取下使用名稱空間的事件，從而使程式碼不會無意中刪除其他程式碼附加事件處理程式。在一個特定的名稱空間中的所有型別的所有事件，可以從一個元素中刪除，只是提供了一個名稱空間，比如".myPlugin"。至少，無論是名稱空間或事件名稱必須提供。

要刪除特定的委派事件處理程式，提供一個selector的引數。選擇器字串必須是完全匹配遞到.on()事件處理程式附加的選擇器。要刪除非委託元素上的所有事件，使用特殊值"**"。

處理程式也可以刪除handler引數指定名稱的函式。當jQuery的繫結一個事件處理程式，它分配一個唯一的ID給處理函式。函式用jQuery.proxy()代理或類似有相同的唯一ID機制（代理函式），因此，通過代理處理程式.off可能會刪除比預期更多的處理程式。在這些情況下，最好是附加和移除事件處理程式，使用名稱空間。

和.on()一樣，你可以傳遞一個events-map>引數明確的指定而不是用events和handler作為單獨引數。鍵事件和/或名稱空間;值是處理函式或為false的特殊價值。

events,[selector],[fn]

events:一個或多個空格分隔的事件型別和可選的名稱空間，或僅僅是名稱空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin".
selector:一個最初傳遞到.on()事件處理程式附加的選擇器。
fn:事件處理程式函式以前附加事件上，或特殊值false.

events-map,[selector]

events-map:一個用字串表示的，一個或多個空格分隔的事件型別和可選的名稱空間，值表示先前事件繫結的處理函式。
selector:一個最初傳遞到.on()事件處理程式附加的選擇器。

示例：

Remove all event handlers from all paragraphs:

$("p").off()

Remove all delegated click handlers from all paragraphs:

$("p").off( "click", "**" )

Remove just one previously bound handler by passing it as the third argument:

var foo = function () {
  // code to handle some kind of event
};
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);

Unbind all delegated event handlers by their namespace:

var validate = function () {
  // code to validate form entries
};
// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);
// remove event handlers in the ".validator" namespace
$("form").off(".validator");

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

在每個物件上，這個事件處理函式只會被執行一次。其他規則與bind()函式相同。這個事件處理函式會接收到一個事件物件，可以通過它來阻止（瀏覽器）預設的行為。如果既想取消預設的行為，又想阻止事件起泡，這個事件處理函式必須返回false。

多數情況下，可以把事件處理函式定義為匿名函式（見示例一）。在不可能定義匿名函式的情況下，可以傳遞一個可選的資料物件作為第二個引數（而事件處理函式則作為第三個引數），見示例二。

type,[data],fnString,Object,Function

type:新增到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
data:將要傳遞給事件處理函式的資料對映
fn:每當事件觸發時執行的函式。

示例：

當所有段落被第一次點選的時候，顯示所有其文字。

jQuery 程式碼:

$("p").one("click", function(){
  alert( $(this).text() );
});

trigger(type,[data])：在每一個匹配的元素上觸發某類事件。

這個函式也會導致瀏覽器同名的預設行為的執行。比如，如果用trigger()觸發一個'submit'，則同樣會導致瀏覽器提交表單。如果要阻止這種預設行為，應返回false。

你也可以觸發由bind()註冊的自定義事件而不限於瀏覽器預設事件。

事件處理函式會收到一個修復的(規範化的)事件物件，但這個物件沒有特定瀏覽器才有的屬性，比如keyCode。

jQuery也支援 <a href="http://docs.jquery.com/Namespaced_Events">名稱空間事件</a>。這允許你觸發或者解除繫結一組特定的事件處理函式，而無需一一個指定。你可以在事件型別後面加上感嘆號 ! 來只觸發那些沒有名稱空間的事件處理函式。

jQuery 1.3中新增：

所有觸發的事件現在會冒泡到DOM樹上了。舉例來說，如果你在一個段落p上觸發一個事件，他首先會在這個元素上觸發，其次到父元素，在到父元素的父元素，直到觸發到document物件。這個事件物件有一個 .target 屬性指向最開始觸發這個事件的元素。你可以用 stopPropagation() 來阻止事件冒泡，或者在事件處理函式中返回false即可。

事件物件構造器現在已經公開，並且你可以自行建立一個事件物件。這個事件物件可以直接傳遞給trigger所觸發的事件處理函式。事件物件的完整屬性列表可以在 <a href="http://docs.jquery.com/Events/jQuery.Event">jQuery.Event</a> 的文件裡找到。

你可以有三種方式指定事件型別：

* 你可以傳遞字串型的事件名稱(type引數)。

* 你可以使用jQuery.Event物件。可以將資料放進這個物件，並且這個物件可以被觸發的事件處理函式獲取到。

* 最後，你可以傳遞一個帶有資料的字面量物件。他將被複制到真正的jQuery.Event物件上去。注意在這種情況下你'''必須'''指定一個 <em>type</em> 屬性。

type,[data]String|Event,Array

type:一個事件物件或者要觸發的事件型別

data:傳遞給事件處理函式的附加引數

示例：

提交第一個表單，但不用submit()

jQuery 程式碼:

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

描述:給一個事件傳遞引數

jQuery 程式碼:

$("p").click( function (event, a, b) {
  // 一個普通的點選事件時，a和b是undefined型別
  // 如果用下面的語句觸發，那麼a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

描述:下面的程式碼可以顯示一個"Hello World"

jQuery 程式碼:

$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

hover([over,]out)：一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。

當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函式。當滑鼠移出這個元素時，會觸發指定的第二個函式。而且，會伴隨著對滑鼠是否仍然處在特定元素中的檢測（例如，處在div中的影象），如果是，則會繼續保持“懸停”狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。

over,outFunction,Function

over:滑鼠移到元素上要觸發的函式
out:滑鼠移出元素要觸發的函式

over,out 描述:滑鼠懸停的表格加上特定的類

jQuery 程式碼:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

out 描述:hover()方法通過繫結變數"handlerInOut"來切換方法。

jQuery 程式碼:

$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);

toggle([speed],[easing],[fn])：用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的 click 事件。

如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

[speed] [,fn]String,FunctionV1.0

speed: 隱藏/顯示效果的速度。預設是 "0"毫秒。可能的值：slow，normal，fast。"

fn:在動畫完成時執行的函式，每個元素執行一次。

[speed], [easing ], [fn ] String,String,FunctionV1.4.3

speed: 隱藏/顯示效果的速度。預設是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"

fn:在動畫完成時執行的函式，每個元素執行一次。

switchBooleanV1.3

用於確定顯示/隱藏的開關。如：true - 顯示元素，false - 隱藏元素

無引數描述:對錶格切換顯示/隱藏

jQuery 程式碼:

$('td).toggle();

speed 描述:用600毫秒的時間將段落緩慢的切換顯示狀態

jQuery 程式碼:

$("p").toggle("slow");

speed,fn 描述:用200毫秒將段落迅速切換顯示狀態，之後彈出一個對話方塊。

jQuery 程式碼:

$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

switch引數描述:如果這個引數為true ，那麼匹配的元素將顯示;如果false ，元素是隱藏的

jQuery 程式碼:

$('#foo').toggle(showOrHide);
//相當於
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}

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

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

fnFunctionV1.0

在每一個匹配元素的blur事件中繫結的處理函式。

[data],fnString,FunctionV1.4.3

data:blur([Data], fn) 可傳入data供函式fn處理。

fn:在每一個匹配元素的blur事件中繫結的處理函式。

描述:觸發所有段落的blur事件

jQuery 程式碼:

$("p").blur();

描述:任何段落失去焦點時彈出一個 "Hello World!"在每一個匹配元素的blur事件中繫結的處理函式。

jQuery 程式碼:

$("p").blur( function () { alert("Hello World!"); } );

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

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

引數

fnFunctionV1.0

在每一個匹配元素的change事件中繫結的處理函式。

[data],fnString,FunctionV1.4.3

data:change([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的change事件中繫結的處理函式。

描述:觸發被選元素的 change 事件。

jQuery 程式碼:

$(selector).change();

描述:給所有的文字框增加輸入驗證

jQuery 程式碼:

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

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

這個函式會呼叫執行繫結到click事件的所有函式。

fnFunctionV1.0

在每一個匹配元素的click事件中繫結的處理函式。

[data],fnString,FunctionV1.4.3

data:click([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的click事件中繫結的處理函式。

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

jQuery 程式碼:

$("p").click();

描述:將頁面內所有段落點選後隱藏

jQuery 程式碼:

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

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

當滑鼠指標停留在元素上方，然後按下並鬆開滑鼠左鍵時，就會發生一次 click。在很短的時間內發生兩次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件應用於同一元素，可能會產生問題。

fnFunctionV1.0

在每一個匹配元素的dblclick事件中繫結的處理函式。

[data],fnString,FunctionV1.4.3

data:dblclick([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的dblclick事件中繫結的處理函式。

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

jQuery 程式碼:

$("p").dblclick( function () { alert("Hello World!"); });

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

可以通過滑鼠點選或者鍵盤上的TAB導航觸發。這將觸發所有繫結的focus函式，注意，某些物件不支援focus方法。

fnFunction

在每一個匹配元素的focus事件中繫結的處理函式。

[data],fnString,Function

data:focus([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的focus事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

描述:使人無法使用文字框:

jQuery 程式碼:

$("input[type=text]").focus(function(){
  this.blur();
});

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

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

引數

fnFunction

在每一個匹配元素的focusin事件中繫結的處理函式。

[data],fnString,Function

data:focusin([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的focusin事件中繫結的處理函式。

示例

描述:獲得焦點後會觸發動畫:

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

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

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

引數

fnFunction

在每一個匹配元素的focusout事件中繫結的處理函式。

[data],fnString,Function

data:focusout([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的focusout事件中繫結的處理函式。

示例：

描述:失去焦點後會觸發動畫:

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

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

註釋：如果在文件元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。

引數

fnFunction

在每一個匹配元素的keydown事件中繫結的處理函式。

[data],fnString,Function

data:keydown([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的keydown事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

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

keypress 事件與 keydown 事件類似。當按鈕被按下時，會發生該事件。它發生在當前獲得焦點的元素上。不過，與 keydown 事件不同，每插入一個字元，就會發生 keypress 事件。註釋：如果在文件元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。

fnFunction

在每一個匹配元素的keypress事件中繫結的處理函式。

[data],fnString,Function

data:keypress([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的keypress事件中繫結的處理函式。

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

註釋：如果在文件元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。

fnFunction

在每一個匹配元素的keyup事件中繫結的處理函式。

[data],fnString,Function

data:keyup([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的keyup事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

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

mousedown 與 click 事件不同，mousedown 事件僅需要按鍵被按下，而不需要鬆開即可發生。

引數

fnFunctionV1.0

在每一個匹配元素的mousedown事件中繫結的處理函式。

[data],fnString,FunctionV1.4.3

data:mousedown([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的mousedown事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

mouseenter([[data],fn])：當滑鼠指標穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。

與 mouseover 事件不同，只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。如果滑鼠指標穿過任何子元素，同樣會觸發 mouseover 事件。

fnFunction

在每一個匹配元素的mouseenter事件中繫結的處理函式。

[data],fnString,Function

data:mouseenter([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的mouseenter事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

mouseleave([[data],fn])：當滑鼠指標離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。

與 mouseout 事件不同，只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。如果滑鼠指標離開任何子元素，同樣會觸發 mouseout 事件。

引數

fnFunction

在每一個匹配元素的mouseleave事件中繫結的處理函式。

[data],fnString,Function

data:mouseleave([Data], fn) 可傳入data供函式fn處理。

fn:在每一個匹配元素的mouseleave事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

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

mousemove事件處理函式會被傳遞一個變數——事件物件，其.clientX 和 .clientY 屬性代表滑鼠的座標

引數

fnFunctionV1.0

在每一個匹配元素的mousemove事件中繫結的處理函式。

[data],fnString,FunctionV1.4.3

data:mousemove([Data], fn) 可傳入data供函式fn處理。

fn:在每一個匹配元素的mousemove事件中繫結的處理函式。

示例

描述:

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

jQuery 程式碼:

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

$(".child").mousemove(function(e){ console.log(e.offsetX,e.offsetY); })

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

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

註釋：與 mouseleave 事件不同，不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。請看下面例子的演示。

引數

fnFunctionV1.0

在每一個匹配元素的mouseout事件中繫結的處理函式。

[data],fnString,FunctionV1.4.3

data:mouseout([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的mouseout事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

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

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

註釋：與 mouseenter 事件不同，不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。請看下面例子的演示。

引數

fnFunction

在每一個匹配元素的mouseover事件中繫結的處理函式。

[data],fnString,Function

data:mouseover([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的mouseover事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

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

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

引數

fnFunction

在每一個匹配元素的mouseup事件中繫結的處理函式。

[data],fnString,Function

data:mouseup([Data], fn) 可傳入data供函式fn處理。

fn:在每一個匹配元素的mouseup事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

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

引數

fnFunction

在每一個匹配元素的resize事件中繫結的處理函式。

[data],fnString,Function

data:resize([Data], fn) 可傳入data供函式fn處理。

fn:在每一個匹配元素的resize事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

描述:對瀏覽器視窗調整大小進行計數：

jQuery 程式碼:

$(window).resize(function() {
  $('span').text(x+=1);
});

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

scroll 事件適用於所有可滾動的元素和 window 物件（瀏覽器視窗）。

引數

fnFunction

在每一個匹配元素的scroll事件中繫結的處理函式。

[data],fnString,Function

data:scroll([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的scroll事件中繫結的處理函式。

示例

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

jQuery 程式碼:

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

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

jQuery 程式碼:

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

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

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

引數

fnFunction

在每一個匹配元素的select事件中繫結的處理函式。

[data],fnString,Function

data:select([Data], fn) 可傳入data供函式fn處理。

fn:在每一個匹配元素的select事件中繫結的處理函式。

示例

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

jQuery 程式碼:

$("input").select();

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

jQuery 程式碼:

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

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

該事件只適用於表單元素。

引數

fnFunctionV1.0

在每一個匹配元素的submit事件中繫結的處理函式。

[data],fnString,FunctionV1.4.3

data:submit([Data], fn) 可傳入data供函式fn處理。
fn:在每一個匹配元素的submit事件中繫結的處理函式。

示例

描述:提交本頁的第一個表單:

jQuery 程式碼:

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

描述:如果你要阻止表單提交:

jQuery 程式碼:

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

JS中阻止冒泡事件的三種方法

冒泡事件：比如說滑鼠點選了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡。

//冒泡事件

            function   stopPropagation(e){
                e.stopPropagation();//阻止事件冒泡
                e.preventDefault(); //阻止預設行為 reset  submit a [href]
                return false;
            }

           $(".child").click(function(e){
               console.log
               (".child");
               return stopPropagation(e);// 呼叫返回函式
           })

           $(".parent").click(function(){
               console.log(".parent");
           })

阻止冒泡事件有三種方法：

1.event.stopPropagation()方法

這是阻止事件的冒泡方法，不讓事件向documen上蔓延，但是預設事件任然會執行，當你掉用這個方法的時候，如果點選一個連線，這個連線仍然會被開啟。
例如：

2.event.preventDefault()方法

這是阻止預設事件的方法，呼叫此方法是，連線不會被開啟，但是會發生冒泡，冒泡會傳遞到上一層的父元素；

3.return false ；

這個方法比較暴力，他會同事阻止事件冒泡也會阻止預設事件；寫上此程式碼，連線不會被開啟，事件也不會傳遞到上一層的父元素；可以理解為return false就等於同時呼叫了event.stopPropagation()和event.preventDefault()