$(document).ready(function(){
// 在這里寫初始化代碼
});
也可以簡(jiǎn)寫成：
$(function(){
// 在這里寫初始化代碼
});
關(guān)于事件類型，幫助文檔里面說(shuō)得也比較詳細(xì)了，不清楚的話就查一下。為元素綁定事件，正規(guī)說(shuō)法是寫成bind形式，其實(shí)我們一般都是采用簡(jiǎn)寫方式：
$(function(){
// 綁定click事件
jQuery("#btn_add").click(
function(){
alert("你點(diǎn)擊的是新增按鈕");
}
);
// 對(duì)一組控件進(jìn)行事件綁定
$("[name=ctrRadio]").each(function(index,item){
// 這里的index是索引，從0開始，item是當(dāng)前對(duì)象，也即this，可以省略這兩個(gè)參數(shù)
$(this).click(
function(){
alert($(this).attr("id"));
}
);
});
});
jQuery事件中定義的函數(shù)全都是一個(gè)匿名函數(shù)，如果在某些情況下，匿名函數(shù)內(nèi)部要執(zhí)行的代碼是一樣的，這樣重復(fù)定義就顯得不規(guī)范了。因此，可以把這部分代碼提取出來(lái)，寫成一個(gè)函數(shù)，指定一個(gè)具體的名稱，再調(diào)用這個(gè)函數(shù)，看下面這個(gè)例子：
function doSame(){}
$(“btn_a”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
除了一般的響應(yīng)事件，jQuery還有兩個(gè)合成事件——hover()和toggle()。這兩個(gè)事件的使用頻率也比較高。
hover()方法的語(yǔ)法結(jié)構(gòu)為：hover(over,out);
它用于模仿鼠標(biāo)懸停事件，當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(over)；當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(out)。
$("td").hover(
function (){
$(this).addClass("hover");
},
function (){
$(this).removeClass("hover");
}
);
toggle()方法的語(yǔ)法結(jié)構(gòu)為：toggle(fn1,fn2,......fnN);
它用于模仿鼠標(biāo)連續(xù)點(diǎn)擊事件，當(dāng)?shù)谝淮吸c(diǎn)擊元素，則觸發(fā)指定的第一個(gè)函數(shù)(fn1)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)(fn2)，如果有更多函數(shù)，則依次觸發(fā)，直到最后一個(gè)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這幾個(gè)函數(shù)的輪番調(diào)用。通常情況是定義兩個(gè)函數(shù)，在顯示與隱藏中經(jīng)常這樣使用。對(duì)toggle事件來(lái)說(shuō)，其實(shí)已經(jīng)包含了click事件。
$("#ctr_advance").toggle(
function () {
$("#tbl_advance").show();
$(this).html("隱藏");
},
function () {
$("#tbl_advance").hide();
$(this).html("更多信息");
}
);
<div id="ctr_advance">更多信息</div>
<div id="ctr_info" class="hide">代碼省略</div>
3、動(dòng)畫
show()和hide()是jQuery中最基本的動(dòng)畫。在HTML文檔里，為一個(gè)元素調(diào)用hide()方法，會(huì)將該元素的display樣式改為"none"。
比如，使用如下代碼隱藏element元素：
$("element").hide(); //通過(guò).hide(),隱藏元素
這段代碼的功能跟用css()方法設(shè)置display屬性效果相同：
element.css("display", "none"); //通過(guò).css(),隱藏元素
當(dāng)把元素隱藏后，可以使用show()方法將元素的display樣式設(shè)置為先前的顯示狀態(tài)("block"或"inline")：$("element").show();
fadeIn()和fadeOut()方法只改變?cè)氐牟煌该鞫取?/span>fadeOut()方法會(huì)在指定的一段時(shí)間內(nèi)降低元素的不透明度，直到元素完全消失("display:none")。fadeIn()方法則相反。這是一組對(duì)應(yīng)的漸變效果， 淡入與淡出。看下面的代碼：
$(function(){
$("[name=radio]").each(function(){
$(this).hide().fadeIn(2000).fadeOut(2000);
});
});
<input type="radio" name="radio" id="a" />1
<input type="radio" name="radio" id="b" />2
<input type="radio" name="radio" id="c" />3
<input type="radio" name="radio" id="d" />4
<input type="radio" name="radio" id="e" />5
<input type="radio" name="radio" id="f" />6
運(yùn)行例子看下效果，明白了吧？
滑動(dòng)動(dòng)畫方法是slideUp()和slideDown()，slideDown()方法，將使元素由上至下延伸顯示，slideUp()方法正好相反。
$("#div_click").toggle(
function(){
$("#radios").slideUp("slow");
},
function(){
$("#radios").slideDown("slow");
}
);
<div id="div_click">click here</div>
<div id="radios">
<div><input type="radio" name="radio" id="a" />1</div>
<div><input type="radio" name="radio" id="b" />2</div>
<div><input type="radio" name="radio" id="c" />3</div>
<div><input type="radio" name="radio" id="d" />4</div>
<div><input type="radio" name="radio" id="e" />5</div>
<div><input type="radio" name="radio" id="f" />6</div>
</div>
slideToggle()方法是前面兩者的合成，因此上面的例子也可以改寫成這樣：
$("#div_click").click(
function(){
$("#radios").slideToggle("slow");
}
);
另外值得注意的是：在進(jìn)行頁(yè)面開發(fā)時(shí)，我們應(yīng)該而且也必須使用XHTML規(guī)范，它符合W3C標(biāo)準(zhǔn)，是比HTML更規(guī)范、更嚴(yán)格的一個(gè)標(biāo)記語(yǔ)言。
上面的例子，如果不加上下面一句，動(dòng)畫會(huì)有點(diǎn)小問(wèn)題：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
對(duì)比這個(gè)寫法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
試試看看效果會(huì)有什么不一樣。
4、AJAX
jQuery提供了好幾個(gè)Ajax實(shí)現(xiàn)，一般情況下你可以使用$.get或$.post，當(dāng)然也可以采用最底層的實(shí)現(xiàn)$.ajax，推薦最后一種，它有一個(gè)參數(shù)，是一個(gè)key/value對(duì)象，來(lái)看個(gè)例子
// 在合同編號(hào)失去焦點(diǎn)時(shí)驗(yàn)證數(shù)據(jù)庫(kù)中是否存在相同的編號(hào)
$("#contCode").blur(
function(){
var ctrCode = $(this);
if(ctrCode.val() != ''){
//標(biāo)準(zhǔn)的ajax方式
$.ajax({
type:"POST",
url:"${ctx}/contractInfoAction.do?method=validateContractCode",
data:"contract_code="+ctrCode.val(),
success:function(data){
if(data == '1'){ //1為存在相同的合同編號(hào)
alert("該合同編號(hào)已被使用，請(qǐng)重新輸入！");
ctrCode.val('');
ctrCode.focus();
return false;
}
}
});
}
}
);
關(guān)于$.get和$.post很簡(jiǎn)單，幫助文檔中說(shuō)的很清楚，不過(guò)有一點(diǎn)需要注意，這兩個(gè)方法的參數(shù)順序不能搞錯(cuò)了，一定要按它規(guī)定的來(lái)。而對(duì)于$.ajax來(lái)說(shuō)，因?yàn)槔锩媸且粋€(gè)key/value對(duì)象，所以順序?qū)λ鼪](méi)有影響，只要key/value對(duì)應(yīng)就不會(huì)有錯(cuò)。
這四個(gè)部分基本上涵蓋了jQuery的大部分內(nèi)容，也有許多示例幫助理解，另外多看幫助文檔也是一個(gè)非常好的學(xué)習(xí)方式。我深深的體會(huì)到，只有多動(dòng)手做，才會(huì)有提高。光學(xué)不練是一點(diǎn)用處都沒(méi)有的。特別是在項(xiàng)目中學(xué)習(xí)，那速度，真是"飛"一般的感覺(jué)啊！哈哈，我們下次繼續(xù)討論。
本文為菠蘿大象原創(chuàng)，如要轉(zhuǎn)載請(qǐng)注明出處。