jquery-$()函數的用法及一些常用的選取器

標籤：

一、$()函數【jquery（）函數的簡寫形式】的常見用途

（1）封裝DOM元素，以便於操作（jquery選取器）

（2）作為幾個通用的工具 + 生產力函數的命名空間首碼，例如，刪除字串前後空格的實用函數，其調用方法如下所示：

        $.trim(str) ;

（3） 文檔就緒處理常式：封裝文檔執行個體，然後調用ready()方法，當文檔為操作準備就緒的時候就執行該函數

（4） 建立DOM元素，通過給$()函數傳遞包含HTML標記的字串，可以即時建立相應的DOM元素,例如$("<p>Hello word</p>")

二、jquery選取器

  基本選取器：                                                                                                                                                         

 1、ID選取器            例：$(#test) 選取id為test的元素

 2、class選取器        例：$(“.test”) 選取所有class為test的元素

 3、元素標籤選取器    例：$(“p”)選取所有的<p>元素。

 4、萬用字元選取器       例：$(“*”)選取所有的元素。

 5、群組選取器          例：$(“p a.test”)選取在p元素內 擁有class為test的a元素。

   層次選取器 ：                                                                                                                                                                                            

 層次選取器適合於通過DOM元素之間的層次關係來擷取特定元素，例如後代元素，子項目，相 鄰元素和兄弟元素。

 1、後代元素選取器    例:  $(“div span”)選取<div>裡的所有的<span>元素。

 2、子項目選取器       例：$(“div>span”)選取<div>元素下元素名是<span>的子項目。

 3、相鄰元素選取器    例：$(“.one+div”)選取class為one的下一個<div>兄弟元素。

 4、兄弟元素選取器    例：$(“#two~div”)選取Id為two的元素後面的所有<div>兄弟元素。

  過濾選取器：                                                                                                                                                                          

過濾選取器主要是通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS    中的偽類別選取器文法相同，即選取器都以一個冒號(:)開頭。

 一、基本過濾選取器：

1、:first     選取第1個元素        例如：$(“div:first”)選取所有<div>元素中第1個<div>元素。

2、:last      選取最後一個元素    例如：$(“div:last”)選取所有<div>元素中最後1個<div>元素。

3、:not(selector)  去除所有與給定選取器 匹配的元素      例如：$(“input:not(.myClass)”)選取class不是myClass的<input>元素。

4、:even    選取索引(從0開始)是偶數 的所有元素   例如：$(“input:even”)選取索引是偶數的<input>元素。

5、:odd    選取索引(從0開始)是奇數 的所有元素     例如：$(“input:odd”)選取索引是奇數的<input>元素。

6、:eq(index)   選取索引(從0開始)等於 index的元素    例如：$(“input:eq(1)”)選取索引等於1的<input>元素。

7、:gt(index)   選取索引(從0開始)大於 index的元素     例如：$(“input:gt(1)”)選取索引大於1的<input>元素。

8、:lt(index)     選取索引(從0開始)小於 index的元素    例如：$(“input:lt(1)”)選取索引小於1的<input>元素。(不包括1)

9、:header     選取所有的標題元素，即 <h1>到<h6>   例如：$(“:header”)選取網頁中所有的<h1>,<h2>,<h3>...

10、:animated      選取當前正在執行動畫的 所有元素     例如：$(“div: animated”)選取正在執行動畫的<div>元素。

二、內容過濾選取器

1、:contains(text)     $("div:contains(‘test‘)")選取含有常值內容為test的<div>元素

2、:empty      選取不包含子項目或文本的空元素   例：$("div:empty")選取不包含子項目或文本的空<div>元素

3、:has(selector)  選取含有給定選取器 匹配的元素的元素  例：$("div:has(.myClass)")選取含有class為 myClass的元素的<div>元素

4、:parent   選取含有子項目或文本的元素  例：$("div:parent")選取含有子項目或文本的<div>元素

三、可見度過濾選取器

1、:hidden  選取所有不可見的元素   例如：$("div:hidden")選取所有不可見的<div>元素

2、:visible   選取所有不可見的元素  例如：$("div:visible")選取所有可見的<div>元素

四、屬性過濾選取器

1、[attribute]  選取擁有此屬性的元素   例如：$("div[id]")選取擁有屬性id的元素

2、[attribute=value]   例如：$("div[title=test]")選取屬性 title 為test的<div>元素

3、[attribute!=value]  例如： 選取屬性的值不等於value的元素

4、[attribute^=value]  選取屬性的值以value開始的元素   例如：$("div[title^=test]")選取屬性 title 以 test 開始的<div>元素

5、[attribute$=value]    選取屬性的值以value結束的元素 例如： $("div[title$=test]")選取屬性 title 以 test 結束的<div>元素

6、[attribute*=value]   選取屬性的值含有value的元素   例如：$("div[title*=test]")選取屬性 title 含 有 test 的<div>元素

7、[selector1][selector2]...[selectorN]  選取匹配以上所有屬性 選取器的元素  例如：$("div[id][title*=test]")選取擁有屬性id， 且屬性 title 含有 test 的<div>元素

五、子項目過濾選取器

1、:nth-child(index/  even/odd/equation)  選取每個父元素下的第index(索引值為奇數/  索引值為偶數/索引值等於某個運算式)個子元  素，index從1開始

 例如：$("div:nth-child(1)")選取每個<div>中第一個子項目

2、:first-child   選取每個父元素下的第1個子項目   例如：$("div :first-child")選取每個<div>下第一個子項目

3、:last-child   選取每個父元素下的最後1個子項目  例如：$("div :last-child")選取每個<div>下最後一個子項目

4、:only-child   選取只有唯一子項目的元素的子項目   例如：$("div :only-child")選擇只有一個子項目的<div>元素

 

六、表單對象屬性過濾選取器

 

1、:enabled   選取所有可用元素  例如：$("body:enabled")選取頁面內所有可用元素 

2、:disabled  選取所有不可用元素  例如：$("body:disabled")選取頁面內所有不可用元素

3、:checked   選取所有被選中的元素(單選框、複選框)  例如：$("input:checked")選取所有被選中的<input>元素

4、:selected  選取所有被選中的選項元素(下拉式清單)   例如：$("select:selected")選取所有被選中的選項元素

表單選取器                                                                                                                                                                                

1、:input            $(“:input”)選取所有<input>,<textarea>,<select>和<button>元素。

2、:text             $(“:text”)選取所有的單行文字框。

3、:password     $(“: password”)選取所有的密碼框。

4、:radio            $(“: radio”)選取所有的單選框。

5、:checkbox      $(“:checkbox”)選取所有的複選框。

6、:submit         $(“: submit”)選取所有的提交按鈕。

7、:image          $(“: image”)選取所有的映像按鈕。

8、:reset           $(“: reset”)選取所有的重設按鈕。

9、:button         $(“: button”)選取所有的按鈕。

10、:file            $(“: file”)選取所有的上傳域。

11、:hidden      $(“: hidden”)選取所有隱藏元素。

 

jquery-$()函數的用法及一些常用的選取器