初窺JQuery 一 選擇符

2022-01-18 05:36:35 字數 2154 閱讀 9337

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() );

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

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

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

jQuery選擇符 XPath選擇符

說明 jquery支援一組基本的xpath選擇符 可以和css選擇符一起使用 jquery無論對什麼文件都可以使用xpath和 css選擇符。1.屬性選擇符 2 特點 允許以類似正規表示式的語法來標識字串的開始 和結尾 也可以使用 表示字串的任意位置。1 a href mailto 表示取得以mai...

jQuery屬性選擇符

屬性選擇符 可用符號 這個表示以什麼開頭 這個表示以什麼結尾 這個表示含有什麼 這個表示沒有什麼 練習 為電子郵件新增類 考這個 html a class e href mailto henryiv king.co.uk 郵件 a css mailjuqery document ready func...

jQuery 選擇符總結

css選擇符,如 title1 li 為取得id為 title1 title 的子元素 中所有的列表項 li title1 li not class1 為取得id為title的後代元素中沒有 not class1類的所有列表項。jquery 庫支援xpath選擇符。如 a title 為取得所有帶t...