jQuery函數學習之六(Events部分)

 

函數：blur(),click(),focus(),select(),submit()
功能：這類函數主要是引發對象的相應事件
返回：jQuery對象
例子：
jQuery Code
$("p").click();
Before
<p onclick="alert('Hello');">Hello</p>
Result:
alert('Hello');

jQuery Code
$("form").submit();

 

 

函數：blur(fn),click(fn),dblclick(fn),error(fn),focus(fn),
      keydown(fn),keypress(fn),keyup(fn),load(fn),
      mousedown(fn),mouseover(fn),mousemove(fn),mouseup(fn),
      ready(fn),resize(fn),scrool(fn),select(fn),unload(fn)
功能：給匹配元素添加相應的事件
返回：jQuery對象
參數：要激發的事件響應函數
例子：
jQuery Code
$("p").click( function() { alert("Hello"); } );
Before
<p>Hello</p>
Result:
<p onclick="alert('Hello');">Hello</p>

 

 

函數：bind(type, data, fn)
功能：給匹配元素繫結事件的響應函數
參數：type事件類型名，data一個用來個響應函數傳遞參數的json對象，fn響應函數
例子：
jQuery Code
$("p").bind("click", function(){
  alert( $(this).text() );
});
Before
<p>Hello</p>
Result:
alert("Hello")

Pass some additional data to the event handler.

jQuery Code
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
Result:
alert("bar")

 

 

函數：unbind(type, fn)
功能：解除事件的綁定
返回：jQuery對象
參數：type事件的類型名，fn響應函數
例子：
jQuery Code
$("p").unbind()
Before
<p onclick="alert('Hello');">Hello</p>
Result:
[ <p>Hello</p> ]

jQuery Code
$("p").unbind( "click" )
Before
<p onclick="alert('Hello');">Hello</p>
Result:
[ <p>Hello</p> ]

 

 

函數：one(type, data, fn) 
功能：只響應一次事件，類似bind(type,data,fn)

 

 

函數：hover(over, out)
功能：設定滑鼠劃入和划出匹配元素的事件
返回：jQuery對象
參數：
over (Function): The function to fire whenever the mouse is moved over a matched element. 
out (Function): The function to fire whenever the mouse is moved off of a matched element. 
例子：
jQuery Code
$("p").hover(function(){
  $(this).addClass("hover");
},function(){
  $(this).removeClass("hover");
});

 

 

函數：trigger(type, data)
功能：引發相應事件
返回：jQuery對象
參數：type事件類型名，data要傳遞給事件處理函數的選擇性參數
例子：
jQuery Code
$("p").trigger("click")
Before
<p click="alert('hello')">Hello</p>
Result:
alert('hello')

Example of how to pass arbitrary data to an event

jQuery Code
$("p").click(function(event, a, b) {
  // when a normal click fires, a and b are undefined
  // for a trigger like below a refers too "foo" and b refers to "bar"
}).trigger("click", ["foo", "bar"]);

jQuery Code
$("p").bind("myEvent",function(event,message1,message2) {
    alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent",["Hello","World"]);
Result:
alert('Hello World') // One for each paragraph

 

 

函數：toggle(even, odd)
功能:每次單擊時切換事件處理
返回：jQuery對象
參數：
even (Function): The function to execute on every even click. 
odd (Function): The function to execute on every odd click. 
例子:
jQuery Code
$("p").toggle(function(){
  $(this).addClass("selected");
},function(){
  $(this).removeClass("selected");
});