jquery雜談–jquery選擇符

CSS選擇符包括通配選擇符、ID選擇符、屬性選擇符、包含選擇符、類選擇符等，他們的基本格式為：
　　　　通配選擇符：$("#ID *") 表示該元素下的所有元素。 

　　　　ID選擇符：$("#ID") 表示獲得指定ID的元素。 

　　　　屬性選擇符：$("input[type=text]") 表示type屬性為text的所有input元素。 

　　　　包含選擇符：$("ul li a") 表示ul元素下所有的li元素裡的所有a元素。 

　　　　類選擇符：$(".Class") 表示所有引用Class樣式的元素。 

當然這些選擇符是可以配合使用的比如說：$("#ID input[type=text]")，這種寫法表示指定ID元素下的type屬性為text的所有input元素。在JQuery中有些細微的改動都是非常有趣的，比如$("ul li").addClass("Class")和$("ul > li").addClass("Class")，他們顯示出來的效果是不同的，第一種是將ul下的所有li元素添加樣式，第二種是將ul下的第一個li元素添加樣式，具體更多的使用方法可以自行測試。 

　　XPath選擇符(自1.3版本後已經不支援，但也可瞭解下)所涵蓋的內容不多，他們的基本格式為： 

　　　　$("[@title]") 表示選擇所有元素內 屬性帶有title的元素。 

　　　　$("[@title^=t]") 表示所有屬性title值是以t為開頭的元素。 

　　　　$("[@title$=t]") 表示所有屬性title值是以t為結尾的元素。 
　　　 $("[@title*=t]") 表示所有屬性title值是包含t的元素。 

XPath選擇符和CSS選擇符一樣，也可以配合使用，可以多個XPath選擇符一起使用，也可以和CSS選擇符一起使用，所以想要達到你想要的要求用JQuery方法是有很多種的。 

　　自訂選擇符是選擇以一個冒號(：)開頭的一種選擇符，說到自訂選擇符，那就不說到我們經常用到:gt()、:eq()、:odd、:even，這些是我們最常用到的，比如:odd和:even這兩個我們通常用他來做有條紋樣式的表格，使用方法相當簡單，如 $("#table tr:odd").addClass("odd")和$("#table tr:even").addClass("even")只要簡單的使用兩行代碼就可以製作出我們想要的條紋樣式。 

　　當然在實際開發中我們一般會使用選擇符配合DOM遍曆方法來進行操作，如： 

　　　　 $("#table td:contains('Window視窗')").parent().find("td:gt(0)").addClass("highlight") 

　　這句代碼錶示取得'Window視窗'儲存格，再取得他的父級元素，然後找到該元素中包含的所有編號大於0的儲存格。當然有些方法是可以簡化的，在這裡我只是為了表示JQuery的連綴效果，這種格式也是不推薦的，我本人一般是這樣書寫的： 

　　　　 $("#table td:contains('Window視窗')") 
.parent()　　　　//擷取父級 
.find("td")　　　//找到td元素 
.not(":contains('Window視窗')") 　　//不是window視窗的元素 
.addClass("highlight");　　//添加樣式 

將他們分開，後面標明，以便於增強可讀性。 

下面我提供幾個在實際開發最常用的代碼（由於實在太晚，扛不住了！）： 

　　　　 $("input[type='text']").val(''); //清空所有文字框 
$("#text input:text").val('');//清空text元素下所有文字框 

　　　　//擷取選中的所有CheckBox的值 

　　　　 $("input:checkbox:checked").each(function() { 
alert($(this).val()); 
}); 

　　　　 $("select option:selected").val()//擷取選中的下拉框的值 

　　　　 $("select option:selected").text()//擷取選中的下拉框的文本

以上只是jq的基本知識，另外的知識有空補上！！！