jQuery 介紹(三)Event

• bind - 將符合的物件綁定一個事件

不含 class=button 和 Reset 的 button 物件，綁定 click 事件（先將所有有 id 的表格隱藏，再顯示同樣 ID 名稱的表格）

$(':button:not(".button"):not(".Reset")').bind("click",function(){
$("table[id]").hide();
$("#"+$(this).attr('class')).show();
});

• blur - 當符合的物件失去 focus
• change - 當符合的物件失去 focus 並且值有改變
• dblclick - 當滑鼠雙擊符合的物件
• error - 當有 error 事件發生時
• focus - 當符合的物件得到 focus
• hover - 當滑鼠移到和離開符合的物件

hover(over,out) 必須同時指定 over 和 out 要觸發的函數。over 時滑鼠移到的 div 套用 class1 樣式，out 時移除 class1 樣式。

$(document).ready(function(){
$('div').hover(function(){
	$(this).addClass('class1');
},
	function(){
	$(this).removeClass('class1');
});
});

• keydown - 當鍵盤按下某個按鍵時觸發

鍵盤 key 的定義可以參照 http://unixpapa.com/js/key.html (基本上是 ASCII) 。

• mousemove - 當滑鼠在符合的物件內移動

顯示滑鼠在頁面內的座標

$(document).ready(function(){
$(document).mousemove(function(e){
var Myx=e.pageX;
var Myy=e.pageY;
  $(':input[name=x]').val(Myx);
  $(':input[name=y]').val(Myy);
  return true
});
});

• one - 綁定的函數只執行一次
• select - 當符合的物件被選取
• submit - 當表單的 submit 按鈕被按下時

檢查是否表單的每個欄位都有填寫，若都有填寫，將欄位名稱及值顯示出來。

$(document).ready(function(){
$('#myform').submit(function(){
	$('#myform :input:not("#submit")').each(function(){
		var test=$(this).val();
		if (test=="")
		{
			alert($(this).attr('name')+'不可空白');
		}
		if (test!="")
		{
			$('#dis').append($(this).attr('name')+'='+test);
			}
});
return false
});
});

• trigger - 觸發其他函數

當欄位的值輸入完畢，利用 submit 將值顯示出來(可以用來傳送表單)。

$(document).ready(function(){
$('#myform :input').change(function(){
	$('#myform').trigger('submit');
});
$('#myform').submit(function(){
var test=$('#myform :input').val();
$('#dis').html('你搜索的是:'+test);
return false
});
});
網頁部分不需要 submit 按鈕:
<form id=myform>
Search:<input type=text name=name size=20>
</form>
<div id=dis></div>

From：《網頁設計，愛上jQuery》ISBN:978-986-6850-844

Please follow and like us: