網頁

2018年3月27日 星期二

jQuery 事件

資料引用來源:jQuery 事件

jQuery 事件函數
jQuery 事件處理方法是 jQuery 中的核心函數。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
術語由事件“觸發”(或“激發”)經常會被使用。

通常會把 jQuery 代碼放到 <head> 部分的事件處理方法中:

實例:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>
 在上面的例子中,當按鈕的點擊事件被觸發時會調用一個函數:
$("button").click(function() {..some code... } )
 該方法隱藏所有 <p> 元素:
$("p").hide();
單獨文件中的函數
如果您的網站包含許多頁面,並且您希望您的 jQuery 函数易于维護,那麼請把您的 jQuery 函数放到獨立的 .js 文件中。

當我們在教程中演示 jQuery 時,會將函數直接添加到 <head> 部分中。不過,把它們放到一個單獨的文件中會更好,就像這样(通過 src 屬性來引用文件):
實例:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名稱沖突
jQuery 使用 $ 符号作為 jQuery 的簡介方式。

某些其他 JavaScript 庫中的函数(比如 Prototype)同样使用 $ 符號。

jQuery 使用名为 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict(),幫助您使用自己的名稱(比如 jq)來代替 $ 符號。

jQuery 事件
下面是 jQuery 中事件方法的一些例子:

Event 函數 绑定函數至
$(document).ready(function) 將函數绑定到文檔的就續事件(當文檔完成加載時)
$(selector).click(function) 觸發或将函數绑定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或将函數绑定到被選元素的雙擊事件
$(selector).focus(function) 觸發或将函數绑定到被選元素的獲得焦点事件
$(selector).mouseover(function) 觸發或将函數绑定到被選元素的鼠標懸停事件

方法描述
bind()向匹配元素附加一個或更多事件處理器
blur()觸發、或将函數绑定到指定元素的 blur 事件
change()觸發、或将函數绑定到指定元素的 change 事件
click()觸發、或将函數绑定到指定元素的 click 事件
dblclick()觸發、或将函數绑定到指定元素的 double click 事件
delegate()向匹配元素的當前或未來的子元素附加一個或多個事件處理器
die()移除所有通過 live() 函数添加的事件處理程序。
error()觸發、或将函數绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 對象上是否調用了 event.preventDefault()。
event.pageX相對於文檔左邊緣的鼠標位置。
event.pageY相對於文檔上邊緣的鼠標位置。
event.preventDefault()阻止事件的默認動作。
event.result包含由被指定事件觸發的事件處理器返回的最后一個值。
event.target觸發該事件的 DOM 元素。
event.timeStamp該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。
event.type描述事件的類型。
event.which指示按了哪個键或按钮。
focus()觸發、或将函數绑定到指定元素的 focus 事件
keydown()觸發、或将函數绑定到指定元素的 key down 事件
keypress()觸發、或将函數绑定到指定元素的 key press 事件
keyup()觸發、或将函數绑定到指定元素的 key up 事件
live()為當前或未來的匹配元素添加一個或多個事件處理器
load()觸發、或将函數绑定到指定元素的 load 事件
mousedown()觸發、或将函數绑定到指定元素的 mouse down 事件
mouseenter()觸發、或将函數绑定到指定元素的 mouse enter 事件
mouseleave()觸發、或将函數绑定到指定元素的 mouse leave 事件
mousemove()觸發、或将函數绑定到指定元素的 mouse move 事件
mouseout()觸發、或将函數绑定到指定元素的 mouse out 事件
mouseover()觸發、或将函數绑定到指定元素的 mouse over 事件
mouseup()觸發、或将函數绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。
ready()文檔就緒事件(當 HTML 文檔就緒可用時)
resize()觸發、或将函數绑定到指定元素的 resize 事件
scroll()觸發、或将函數绑定到指定元素的 scroll 事件
select()觸發、或将函數绑定到指定元素的 select 事件
submit()觸發、或将函數绑定到指定元素的 submit 事件
toggle()綁定兩個或多個事件處理器函數,當發生輪流的 click 事件時執行。
trigger()所有匹配元素的指定事件
triggerHandler()第一個被匹配元素的指定事件
unbind()從匹配元素移除一個被添加的事件處理器
undelegate()從匹配元素移除一個被添加的事件處理器,现在或将来
unload()觸發、或将函數绑定到指定元素的 unload 事件


沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。