DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 初窺JQuery(一)jquery選擇符 必備知識點
初窺JQuery(一)jquery選擇符 必備知識點
編輯:JQuery特效代碼     
本章內容根據本人在開發中常用到的選擇符作為例子來進行講解,如有更多常用的簡單的例子可回復提供,參與討論,一起學習研究,首先我們從常用的CSS選擇符開始。

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()//獲取選中的下拉框的文本

本人對於JQuery選擇符的理解到此為止,僅供參考,歡迎感興趣的朋友參與討論。未完待續........

demo打包下載
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved