jquery學習之路二

前幾天寫了jquery學習之路一，很多朋友看了說很初級，的確是這樣，因為每學一樣新的東西都是從初級入門嘛，正如一個小孩剛學說話時，你要給他說一個簡單的詞語才行，比如他看到一朵玫瑰花時，你要給他解釋說這是花花，如果你第一次給他說這是玫瑰花的話，反而讓他記不住，所以我們在學習時也是一樣，我想大多數朋友也一樣，在學習一門新的語言時，一般第一個例子都是“Hello World”吧，這也可以稱之為語言入門的一個經典，好了廢話不多說，開始學習吧！

  jquery選取器

 

在上一節學習中，主要講到了jquery的表現和邏輯分離，這一節我們將學習jquery選取器 

 

一、選擇對象

 

在Web應用程式中，大部分的用戶端操作都是基於對象的操作，要操作對象就必須先擷取對象，jQuery提供了強大的選取器讓我們擷取對象。在這邊，我人為地將jQuery選取器分為兩大部分：選擇對象和篩選條件。選擇對象表示要擷取什麼對象，篩選條件是對擷取的對象進行篩選，最終留下符合某些特徵的對象。

 

$的選取器部分:
凡是運用$,其傳回值是一個object
$選取器主要用於選擇標籤.基本用法是同css的選取器.但是,很讓人興奮的是,他支援常見的瀏覽器,而css中很多選取器是IE6所不支援的.

1.基本選取器(3種):
$("標籤名"),如$("p")是選取了所有的p標籤節點
$("#id名"),如$("#test")是選取了id為test的標籤節點
$(".class名"),如$(".test")是選取了所有class為test的標籤節點
上面的$("標籤名")和$(".class名")返回的都是所有滿足的節點,至於進一步篩選可以添加一些函數,如eq,gt,lt等等.

2.組選取器:
下面還是現做一個約定:把"標籤名或#id名或.class名"記作mix,則mix表示一個標籤名,或一個#id或一個.class.
$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")

 

3.後代選取器:
$("mix mix"),當然可以是多個嵌套,但後代選取器可以是深層子代,所以$("mix mix mix ...")這種寫法作用不大.例子:$("div .test"):在div標籤內的所有具有test的class的後代元素(就是被div嵌套的class屬性為test的標籤)
可以見DEMO。

 

 

4.子選取器:
$("mix>mix"),這個放在後代選取器後面是為了和它做對比.子選取器只能選擇第一代子代.不處理深層嵌套.例子:
$("div>.test")

 

 

對這裡的p段落標籤有效.但對

 

對這裡的p段落標籤無效,這裡要用
$("div .test)

 

 

5.臨近選取器:
$("mix+mix"),選取下一個兄弟節點.如:$("div +#test"),id為test的的節點必須是div的下一個兄弟節點.

在$("div + #test")中能取到p段落節點

則不能取到

 

 

6.屬性選取器:
把屬性選取器不放在css選取器裡面是因為jQuery中寫法是不一樣的.至於css中寫法可以參考我之前寫的一篇css的選取器一文.jQuery中是和xPath類似的寫法:
$("mix[@attr]"):選取所有該mix且具有attr屬性的節點
$("mix[@attr=a_value"]):選取所有該mix且具有attr屬性並滿足屬性值為a_value的節點
$("mix[@attr^=a_value_head"]):attr屬性的屬性值是以a_value_head開頭的
$("mix[@attr$=a_value_end"]):attr屬性的屬性值是以a_value_end結尾的
$("mix[@attr*=a_value"]):attr屬性的屬性值中包含a_value

 

 

7.進一步選取器:
這個名稱是我自己起的,其實選取器組合都有進一步的意思,你明白後面所介紹的知識即可.
具有限定子節點選取器:$("mix1[mix2]"):返回包含mix2的mix1節點.如:$("div[a]"):包含a標籤的div.
這個和$("div a")不相同.後者表示div中的a標籤,返回的是a標籤對象,前者返回的是div標籤對象
冒號限定結點選取器:$("mix:condition"):mix標籤,並且滿足限定條件.
E:root:類型為E,並且是文檔的根項目
E:nth-child(n):是其父元素的第n個類型為E的子項目 ,基數從1開始
E:first-child:是其父元素的第1個類型為E的子項目
E:last-child:是其父元素的最後一個類型為E的子項目
E:only-child:且是其父元素的唯一一個類型為E的子項目
E:empty:沒有子項目（包括text節點）的類型為E的元素
E:enabled
E:disabled:類型為E,允許或被禁止的使用者介面元素
E:checked:類型為E,處於選中狀態的使用者介面元素（例如選項按鈕或複選框）
E:visible:選擇所有可見元素(display值為block或visible,visibility值為visible元素,不包括hide域)
E:hidden:選擇所有隱藏元素(非Hide域,且display值為block或visible,visibility值為visible的元素)
E:not(s):類型為E,不匹配選取器s
E:eq(n),E:gt(n),E:lt(n):元素限定
E:first:相當於E:eq(0)
E:last:最後一個匹配的元素
E:even:從匹配的元素集中取序數為偶數的元素
E:odd:從匹配的元素集中取序數為奇數的元素
E:parent:選擇包含子項目（包含text節點）的所有元素
E:contains('test'):選擇所有含有指定文本的元素
表單選取器:
E:input:選擇表單元素(input,select,textarea,button)
E:text:選擇所有文本域(type="text")
E:password:選擇所有密碼域(type="password")
E:radio:選擇所有選項按鈕(type="radio")
E:checkbox:選擇所有複選框(type="checkbox")
E:submit:選擇所有提交按鈕(type="submit")
E:image:選擇所有映像域 (type="image")
E:reset:選擇所有清除域(type="reset")
E:button:選擇所有按鈕(type="button")
當然包括E:hidden

 

 

8.xPath路徑查詢:

 

 

先介紹下xPath的文法:
/:選取根節點
//:選取文檔中所有合格節點,不管該節點位於何處
.:選取當前節點
..:選取單前節點的父節點
@:選取屬性,這個在之前說過了(屬性選取器)
nodename:選取節點下的所有節點
jQuery中的應用:
根節點是很少用到的,常用的如下面的例子:
$("div/p")相當於$("div>p")
$("div//p")相當於$("div p")
$("//div/../p"):所有div節點的父節點下的p標籤
還有相對路徑的寫法以及支援的Axis選取器,還不是會應用,不介紹了...已經一大堆了

 

 

$的其他用法:

 

 

$(html節點):根據提供的原始HTML標記字串,動態建立由jQuery對象封裝的DOM元素.如:
$("

 

 

Hello

 

 

 

").appendTo("#body"); //把

Hello

 

 

 

添加到body元素中
$(document):網頁文檔對象
$(document.body):網頁body對象,和$("body")是一樣的
$(函數):DOM載入後就執行該函數.所以$(document).ready()可以寫做$()
$(選取器部分,選取器來源):這個舉例說明
$("input:radio",document.forms[0]):在文檔的第一個表單中,搜尋所有選項按鈕
$("div",xml.responseXML):查詢指定XML文檔中的所有div元素
選取器來源可以是:作為內容相關的DOM元素,文檔或jQuery對象
還有兩個:$.extend(prop)和$.noConflict()是和外掛程式以及和其他庫相容的使用,以後再寫

 

 

jQuery的core部分還有:

 

 

eq(數字):將匹配的元素集合縮減為一個元素。這個元素在匹配元素集合中的位置變為0,而集合長度變成1
gt(數字):將匹配的元素集合縮減為給定位置之後的所有元素
lt(數字):將匹配的元素集合縮減為給定位置之前的所有元素
上面三個的例子:
$("div:eq(1)")//第2個div
$("div:gt(2)")//第3個div以及之後的div
$("div:lt(2)")//第2個div以及之前的div,即第1個div和第2個div

 

 

length或size():當前匹配的元素數量

 

 

each():以每一個匹配的元素作為上下文來執行一個函數。這意味著,每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不同的元素(每次都是一個不同的匹配元素).而且,在每次執行函數時,都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數.
$("img").each(function(i){ this.src = "test" + i + ".jpg"; });//迭代映像,並設定它們的src屬性

 

 

get():如果沒有參數,返回所有,是一個對象數組;如果帶參數,必須是數字,基數從0開始.例子:
$("div").get():返回一個div對象數組
$("div").get(1):返回第二個div對象
index(需求的元素節點對象):返回數字.用個例子說明:
$("div").index($(".test"))[1] //表示從所有div節點中尋找class屬性為test的節點.並且找的是第二個節點(基數從0開始).傳回值是該節點在div節點中的位置(基數也是從0開始).