$(id)定義
取得DOM元素常用的方法document.getElementById，可轉換成$，而document.getElementById(id)即變成$(id)，這樣的寫法jQuery中常見到，其定義如下：
function $(id){
return document.getElementById(id);
}
先來看看網頁載入後，執行指定函數，在JavaScript與jQuery的不同寫法
JavaScript中
function init()
{
}
window.onload=init;
其意思就是網頁載入完成後，隨即執行指定init()函數，window.onload=init 可以改成 window.onload=function(){}，此稱為匿名寫法。jQuery中
jQuery(document).ready(function(){});
這樣的寫法效果等同於window.onload，也可以簡化些jQuery(function(){});
當然程式設計師在撰寫jQuery網頁時，會再更簡化，以減少打字的次數$(function(){});
$(function(){});在jQuery中常用的方式，未來看到這樣的寫法千萬要記得，就表示函數在網頁成功載入之後執行。舉個例子以便複習用
JavaScript的寫法
<HTML>
<HEAD>
<TITLE>測試JavaScript</TITLE>
<script type="text/javascript">
window.onload = function(){
document.getElementById("button").onclick = function(){
var i, sum = 0;
for(i = 1 ; i <= 100 ; i++){
sum = sum + i;
}
alert(sum);
};
};
</script>
</HEAD>
<BODY>
<input type="button" value="Click me" id="button">
</BODY>
</HTML>
jQuery的寫法<HTML>
<HEAD>
<TITLE>測試jQuery</TITLE>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var i, sum = 0;
for(i = 1 ; i <= 100 ; i++){
sum = sum + i;
}
alert(sum);
});
});
</script>
</HEAD>
<BODY>
<button>Click me</button>
</BODY>
</HTML>
這裡要特別注意到，JavaScript與jQuery除了在寫法上差異很大，還有一點要注意，就是在JavaScript中所有onxxxx的事件，在jQuery全都要以xxxx事件來執行才行，這點要注意。
項目
|
JavaScript
|
JQuery
|
圖片下載被中斷時
|
onabort
|
abort
|
當游標離開元件時
|
onblur
|
blur
|
當使用者更改欄位內容時
|
onchange
|
change
|
滑鼠單擊物件時
|
onclick
|
click
|
滑鼠雙擊物件時
|
ondblclick
|
dblclick
|
載入文件或圖片發生錯誤時
|
onerror
|
error
|
當游標定位在元件上時
|
onfocus
|
focus
|
當鍵盤的按鍵被壓下時
|
onkeydown
|
keydown
|
當鍵盤的按鍵被壓下再放開時
|
onkeypress
|
keypress
|
當鍵盤的按鍵被放開時
|
onkeyup
|
keyup
|
當網頁或圖片載入完成時
|
onload
|
load
|
滑鼠按鍵被壓下時
|
onmousedown
|
mousedown
|
滑鼠指標移動時
|
onmousemove
|
mousemove
|
滑鼠指標離開物件時
|
onmouseout
|
mouseout
|
滑鼠指標移到物件上時
|
onmouseover
|
mouseover
|
滑鼠按鍵被放開時
|
onmouseup
|
mouseup
|
當reset按鍵被點擊時
|
onreset
|
reset
|
當視窗或框架被改變大小時
|
onresize
|
resize
|
當文字被選取時
|
onselect
|
select
|
當sumbit按鍵被點擊時
|
onsubmit
|
submit
|
當使用者離開畫面時
|
onunload
|
unload
|
沒有留言:
張貼留言