關于jQuery操作DOM的內容完了嗎？不，還沒有，還有更多！
1、盡可能的用#id和屬性選擇器
在選擇DOM元素時，jQuery的選擇器無疑提供了非常多的功能，除了特性選擇器外，對文檔元素的查找操作，我覺得還是#id和[attribute]最為實用，當然這不是否定其它的選擇器。我這樣說是有原因的。
在實際開發中，程序員一般是以模塊為單位進行功能開發，那么從前臺到后臺都是一個人在做。而頁面的美化工作可能會交給美工（也可能是前臺開發人員）來完成，如果需要對DOM的結構進行調整或重新布局，這時，當腳本中使用了CSS選擇器或位置選擇器，這時，你能保證不會對功能有影響嗎？難道還要和開發人員進行溝通，這里不能這樣寫，那里需要調整?？墒且粋€系統中的頁面會只有一兩個嗎？這樣改下來，得要多少時間？這時有人會說了，你設計沒做好，設計之初就應該考慮好，樣式布局就應該做好。那么就不會出現這樣的問題。是的，設計很重要，設計的好壞決定項目成敗。但是，我要告訴你，世上沒有絕對的事情，我們所做的一切都是以客戶為出發點，客戶不滿意了，要你改，你能不改嗎？
使用ID的好處顯而易見，給元素加上ID，通過ID獲得該元素對象，然后進行相應操作，不管結構如何變化，代碼不用修改。請一定注意，ID不能重復了。
可是ID只能對單一元素進行操作（這是相對的，后面有講到對ID也可以批量操作），如果有多個元素怎么辦呢？這里就要用到屬性選擇器了。幫助文檔里羅列了各種屬性選擇器，而且有說明和示例。不過例子太簡單了，會讓很多人沒有感覺，對它沒有引起足夠的重視，在這里大象用幾個實例來說明一下它們的用法。
a)
$(function(){
$("[name=ctrRadio]").each(function(){
$(this).click(
function(){
// click事件代碼
}
);
});
});
<input type="radio" name="ctrRadio" /> // 有很多個單選按鈕，組成一個單選按鈕組
頁面數據列表一般采取分頁顯示，每頁10條、15條或更多，每一行都添加了一個單選按鈕，在初始化時，我們給每個單選按鈕綁定一個click事件，所以這里我們使用[attribute=value]形式的屬性選擇器來實現我們的需求。另外name值如果定義好了，我們也不會輕易再去改動它，調整單選按鈕的位置也不會影響到代碼。比如現在位于每行的第一列是單選按鈕，后來客戶要求，要將它放到最后一列去，或是將type改成button，這都不會影響原來實現的代碼。除非你要把它改成checkbox，那么，這應該算是需求變更了吧？
b)
$(function(){
$("[name$='chk']").attr("checked","checked").click(
function(){
var chkbox = $(this); // this是當前的復選框對象，$(this)是獲得該復選框的jQuery對象
if(chkbox.attr("checked")){
alert("選擇: "+chkbox.val());
}else{
alert("取消: "+chkbox.val());
}
}
);
});
<div><input type="checkbox" name="stationchk" value="a" />1</div>
<div><input type="checkbox" name="stationchk" value="b" />2</div>
<div><input type="checkbox" name="intervalchk" value="c" />3</div>
<div><input type="checkbox" name="intervalchk" value="d" />4</div>
<div><input type="checkbox" name="commonchk" value="e" />5</div>
<div><input type="checkbox" name="commonchk" value="f" />6</div>
文檔初始化時，通過屬性選擇器查找所有name名稱以chk結尾的DOM元素，并將它設為選中狀態，同時給它綁定click事件。這里可以在[name$='chk']前面加上input，縮小搜索范圍。當然，你得確保以chk結尾的都是你想操作的checkbox，避免出現讓自己困惑的BUG。因此在做之前，充分的思考很有必要，這會大大提高你的開發效率和減少出現錯誤的機率。雖然表面看起來多花了一點時間，但是你會覺得這是很值得的。
[attribute^=value]和[attribute$=value]是相對的一組選擇器，前者是匹配指定的屬性以某些值開始的元素，后者剛好相反，匹配給定的屬性是以某些值結尾的元素，請一定記住attribute是屬性，比如上面的type、name、value等等。在項目中大量的通過id、name屬性來批量的操作DOM元素。
我說下怎么通過ID獲得多個集合，其實很簡單，在設置ID值的時候，給它定義一個字符串再加上其它的唯一標識就能夠實現這一功能。
<c:forEach var="info" items="${infos}">
<input name="modinfo" id="modInfo_${info.parent_id}_${info.f_id}" type="checkbox" value="${info.f_id},${info.parent_id}" />
</c:forEach>
在數據庫中f_id是主鍵標識，因此它具有唯一性，parent_id是父ID，它們和modInfo_組合起來就可以成為id屬性的唯一標識。forEach循環會產生多個checkbox，所以我們就使用$("[id^='modInfo_']")表達式來取得結果集。有人會問有name不就行了嗎？為什么還要設置id？而且還要將兩種ID值與字符串拼接成復選框的id屬性值。這是由于功能需要，不光要用到name，還要用到id，而且checkbox上還綁定了click，事件處理中還會用到value中的值。有時我們的業務需求確實很復雜，這時我們就可以采取這種方式來區分彼此之間存在一些聯系而又獨立的DOM集合。
在實際項目當中如何組合，還是得具體問題具體分析。另外，我們也不能忘掉那些特性選擇器，它們同樣很有用。
c)
$(function(){
$("[name^='station']:checkbox").attr("checked","checked").click(
function(){
if($(this).attr("checked")){
alert("選擇: "+$(this).val());
}else{
alert("取消: "+$(this).val());
}
}
);
});
<div><input type="checkbox" name="stationchk" value="a" />1</div>
<div><input type="checkbox" name="stationchk" value="b" />2</div>
<div><input type="checkbox" name="intervalchk" value="c" />3</div>
<div><input type="checkbox" name="intervalchk" value="d" />4</div>
<div><input type="checkbox" name="commonchk" value="e" />5</div>
<div><input type="checkbox" name="commonchk" value="f" />6</div>
<div><input type="radio" name="stationrad" value="g" />7</div>
<div><input type="radio" name="stationrad" value="h" />8</div>
這個例子在b)的基礎上作了一些修改，它表示在文檔初始化時，通過屬性選擇器查找所有name名稱以station開頭并且type為checkbox的DOM元素，同時綁定click事件。如果將:checkbox去掉會不會有變化呢？答案是肯定的，單選按鈕組也被綁定了事件。再看幾個例子：
$("[name=ctrRadio]:checked").attr("checked",""); //取消已選中的單選框
$("[id^='modInfo_']").is(":hidden"); //如果表達式中的集合只要有一個不可見，就返回true
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //選中第一條記錄
2、jQuery屬性——很好，很強大
attr、addClass、removeClass、css、html、text、val、height、width這些命令在實際應用中的使用頻率非常高，應該把它們全部掌握。這些屬性都有賦值與取值的方法，為我們操作DOM提供了很方便的支持。舉幾個例子說明一下：
$(":button").addClass("button1"); //給所有的按鈕添加樣式
$("#ctr_info").attr("src","${ctx}/BaseAction.do?method=list"); //給id為ctr_info的iframe的src屬性設置地址
$("#stationchk").attr("checked"); //獲得復選框是否選中，選中為true，否則為false
$("#sum").css("ime-mode","disabled"); //屏蔽輸入法
$("[name='stationchk']").parent().html("哈哈"); //返回包含匹配表達式的唯一父元素的元素集合
$("#ctr_info").load(function(){
var ifr_height = $(this).contents().find("#ctr_other").height(); //通過ID重新計算iframe的高度
ifr_height = ifr_height < 400 ? 350 : ifr_height;
$(this).height(ifr_height);
});
這些屬性的運用技巧需要多做才能加深理解，對于以前使用原生JavaScript來編寫腳本的程序員而言，無疑是一件很幸福的事，極大的簡化了代碼，減少了很多的工作量。
3、豐富的文檔處理功能
從幫助文檔中，我們可以看到，jQuery提供了一套很完備的文檔處理函數?；旧闲枰械亩及?。大象目前也只是使用了其中一部分，當然這跟應用環境也有關。來看個例子：
$(function(){
$("#btn_add").click(
function(){
$("<div name='_info'><input type='text' name='info'/> <input name='btndel' type='button' value='刪除' /></div>").find(":button").click(
function(){
var index = jQuery("[name='btndel']").index(this); //this是刪除按鈕這個對象，index是獲得該按鈕在這組集合中的索引值
$("[name='_info']:eq("+index+")").remove();
}
).end().appendTo("#div_info");
}
);
});
<div><input id="btn_add" type="button" value="增加" /></div>
<div id="div_info"></div>
這段很少的代碼卻幫我們做了相當多的事情，詳細分析一下：
在文檔初始化的時候，對增加按鈕綁定事件，當點擊增加時，我們創建一個文本框和一個刪除按鈕的div，然后使用查找功能(find)在剛創建的html中找到button按鈕(:button)，這時會返回<input name='btndel' type='button' value='刪除' />這個DOM元素的jQuery對象，接著給這個按鈕綁定事件，使之，當我們點擊某個刪除按鈕時，刪除對應的元素。隨后我們退回(end)到創建的div。最后把這個新增的元素追加到div_info元素之后，運行這個示例看看效果。PS：創建DOM時，如果比較復雜，可以用變量來拼接字符串，最后再放到$()里面。
這個例子充分體現了jQuery鏈的強大，一條語句就完成了這么多的功能，請大家充分利用jQuery鏈。牢記：jQuery對象與DOM對象的區別。
在刪除的時候使用的是remove()而沒有使用empty()，這兩個方法執行后都會返回jQuery集合，不同的是，remove()會將元素從頁面DOM中刪除，而empty()只是刪除匹配集合中的子節點（包括文本），但仍保留其在DOM中所占的位置。示例：
$(function(){
$("#btn_del").click(
function(){
$("p").empty();
//$("p").remove();
}
);
});
<input id="btn_del" type="button" value="刪除" />
<p>hello</p>
jquery
<p>welcome</p>
用Firefox來運行示例，啟動Firebug工具可以看到文檔加載完成時的情況：
當我們點擊刪除后，結果如下：
再看執行remove方法后的結果：
文檔處理的方法還有很多，我只能就遇到及使用過的舉些例子說明一下，其它的就需要在大家工作中去發現去總結，也請各位把自己的心得體會分享出來，讓我們一起學習，共同提高。所有代碼均在jquery-1.2.6版本下測試通過。
本文為菠蘿大象原創，如要轉載請注明出處。
posted on 2010-02-24 21:46
菠蘿大象 閱讀(6511)
評論(22) 編輯 收藏 所屬分類:
jQuery