在上一篇jQuery學習總結(一)中,簡單的介紹了jQuery提供對JavaScript開發的四個部分的支持,這篇文章將詳細的用代碼示例來說明如何實現。
1、DOM
jQuery提供強大的DOM查找功能,並且能夠很方便的進行取值和賦值操作。查找元素最主要的是使用選擇器,可能還會需要篩選器的配合。從項目中來看,給DOM元素設置id及name,會比較容易實現需求。我列一下使用得最多的幾種選擇器:#id、.class、element、:eq、[attribute^=value]、[attribute$=value]、[attribute=value]、[attribute]、:checked、:selected等等。另外jQuery提供的屬性也是強大利器:attr、removeAttr、addClass、removeClass、html、val等,在實際中,大量的被應用。在文檔處理及CSS中append、clone、empty、css、height、width也是使用頻率很高的。關於這部分的知識很複雜,精髓我可寫不出來,我只能把我在項目中的體會、感悟、想法記錄下來,給需要的人一點幫助就很開心了。下面來看幾個例子。
$("#ctr_id").val(id); //給合同ID賦值
$("#ctr_id").val(); //取得合同ID值
$("#ctr_sum").attr("disabled","disabled"); //將合同金額輸入框設爲不可用
$("[name=ctrRadio]:checked").attr("checked",""); //取消已選中的單選框
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //選中第一條記錄
$("[name='btndel']").index(obj); //obj是一個按鈕對象,這表示該按鈕位於相同名稱按鈕的第幾個,返回的索引值從0開始
$("ctr_advance").html("更多信息"); //給span設置HTML內容,此屬性類似innerHTML
2、事件
我再一次,強烈的建議,給DOM元素添加的行爲,一定不要和DOM元素混在一起,一定要和它們分離開來,這裏面有規範,也有教訓。添加事件時我們一般在初始化的時候進行,讓我們把<body onload="">這種寫法拋棄掉,採用jQuery的寫法。jQuery的代碼是可以跨瀏覽器運行的,這樣的好處對開發人員來說無疑是非常棒的!
$(document).ready(function(){
// 在這裏寫初始化代碼
});
也可以簡寫成:
$(function(){
// 在這裏寫初始化代碼
});
關於事件類型,幫助文檔裏面說得也比較詳細了,不清楚的話就查一下。爲元素綁定事件,正規說法是寫成bind形式,其實我們一般都是採用簡寫方式:
$(function(){
// 綁定click事件
jQuery("#btn_add").click(
function(){
alert("你點擊的是新增按鈕");
}
);
// 對一組控件進行事件綁定
$("[name=ctrRadio]").each(function(index,item){
// 這裏的index是索引,從0開始,item是當前對象,也即this,可以省略這兩個參數
$(this).click(
function(){
alert($(this).attr("id"));
}
);
});
});
jQuery事件中定義的函數全都是一個匿名函數,如果在某些情況下,匿名函數內部要執行的代碼是一樣的,這樣重複定義就顯得不規範了。因此,可以把這部分代碼提取出來,寫成一個函數,指定一個具體的名稱,再調用這個函數,看下面這個例子:
function doSame(){}
$(“btn_a”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
除了一般的響應事件,jQuery還有兩個合成事件——hover()和toggle()。這兩個事件的使用頻率也比較高。
hover()方法的語法結構爲:hover(over,out);
它用於模仿鼠標懸停事件,當鼠標移動到元素上時,會觸發指定的第一個函數(over);當鼠標移出這個元素時,會觸發指定的第二個函數(out)。
$("td").hover(
function (){
$(this).addClass("hover");
},
function (){
$(this).removeClass("hover");
}
);
toggle()方法的語法結構爲:toggle(fn1,fn2,......fnN);
它用於模仿鼠標連續點擊事件,當第一次點擊元素,則觸發指定的第一個函數(fn1),當再次點擊同一元素時,則觸發指定的第二個函數(fn2),如果有更多函數,則依次觸發,直到最後一個。隨後的每次點擊都重複對這幾個函數的輪番調用。通常情況是定義兩個函數,在顯示與隱藏中經常這樣使用。對toggle事件來說,其實已經包含了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、動畫
show()和hide()是jQuery中最基本的動畫。在HTML文檔裏,爲一個元素調用hide()方法,會將該元素的display樣式改爲"none"。
比如,使用如下代碼隱藏element元素:
$("element").hide(); //通過.hide(),隱藏元素
這段代碼的功能跟用css()方法設置display屬性效果相同:
element.css("display", "none"); //通過.css(),隱藏元素
當把元素隱藏後,可以使用show()方法將元素的display樣式設置爲先前的顯示狀態("block"或"inline"):$("element").show();
fadeIn()和fadeOut()方法只改變元素的不透明度。fadeOut()方法會在指定的一段時間內降低元素的不透明度,直到元素完全消失("display:none")。fadeIn()方法則相反。這是一組對應的漸變效果, 淡入與淡出。看下面的代碼:
$(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
運行例子看下效果,明白了吧?
滑動動畫方法是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");
}
);
另外值得注意的是:在進行頁面開發時,我們應該而且也必須使用XHTML規範,它符合W3C標準,是比HTML更規範、更嚴格的一個標記語言。
上面的例子,如果不加上下面一句,動畫會有點小問題:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
對比這個寫法:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
試試看看效果會有什麼不一樣。
4、AJAX
jQuery提供了好幾個Ajax實現,一般情況下你可以使用$.get或$.post,當然也可以採用最底層的實現$.ajax,推薦最後一種,它有一個參數,是一個key/value對象,來看個例子
// 在合同編號失去焦點時驗證數據庫中是否存在相同的編號
$("#contCode").blur(
function(){
var ctrCode = $(this);
if(ctrCode.val() != ''){
//標準的ajax方式
$.ajax({
type:"POST",
url:"${ctx}/contractInfoAction.do?method=validateContractCode",
data:"contract_code="+ctrCode.val(),
success:function(data){
if(data == '1'){ //1爲存在相同的合同編號
alert("該合同編號已被使用,請重新輸入!");
ctrCode.val('');
ctrCode.focus();
return false;
}
}
});
}
}
);
關於$.get和$.post很簡單,幫助文檔中說的很清楚,不過有一點需要注意,這兩個方法的參數順序不能搞錯了,一定要按它規定的來。而對於$.ajax來說,因爲裏面是一個key/value對象,所以順序對它沒有影響,只要key/value對應就不會有錯。
這四個部分基本上涵蓋了jQuery的大部分內容,也有許多示例幫助理解,另外多看幫助文檔也是一個非常好的學習方式。我深深的體會到,只有多動手做,纔會有提高。光學不練是一點用處都沒有的。特別是在項目中學習,那速度,真是"飛"一般的感覺啊!哈哈,我們下次繼續討論。