|
這個(gè)是網(wǎng)頁(yè)版,直接用ctrl+F搜索,如果大家不是經(jīng)常上網(wǎng),可以用chm版的更方便些。
jQuery 1.3 API 參考手冊(cè) CHM
鋒利的jquery 電子書
近期腳本之家將會(huì)將一些jquery學(xué)習(xí)教程逐步發(fā)一些。參考了鋒利的jquery一書。
$的選擇器部分:
凡是運(yùn)用$,其返回值是一個(gè)object
$選擇器主要用于選擇標(biāo)簽.基本用法是同css的選擇器.但是,很讓人興奮的是,他支持常見(jiàn)的瀏覽器,而css中很多選擇器是IE6所不支持的.
1.基本選擇器(3種):
$("標(biāo)簽名"),如$("p")是選取了所有的p標(biāo)簽節(jié)點(diǎn)
$("#id名"),如$("#test")是選取了id為test的標(biāo)簽節(jié)點(diǎn)
$(".class名"),如$(".test")是選取了所有class為test的標(biāo)簽節(jié)點(diǎn)
上面的$("標(biāo)簽名")和$(".class名")返回的都是所有滿足的節(jié)點(diǎn),至于進(jìn)一步篩選可以添加一些函數(shù),如eq,gt,lt等等.
2.組選擇器:
下面還是現(xiàn)做一個(gè)約定:把"標(biāo)簽名或#id名或.class名"記作mix,則mix表示一個(gè)標(biāo)簽名,或一個(gè)#id或一個(gè).class.
$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")
3.后代選擇器:
$("mix mix"),當(dāng)然可以是多個(gè)嵌套,但后代選擇器可以是深層子代,所以$("mix mix mix ...")這種寫法作用不大.例子:$("div .test"):在div標(biāo)簽內(nèi)的所有具有test的class的后代元素(就是被div嵌套的class屬性為test的標(biāo)簽)
可以見(jiàn)DEMO。
4.子選擇器:
$("mix>mix"),這個(gè)放在后代選擇器后面是為了和它做對(duì)比.子選擇器只能選擇第一代子代.不處理深層嵌套.例子:
$("div>.test")
<div><p class="test"></p></div>對(duì)這里的p段落標(biāo)簽有效.但對(duì)
<div><p><p class="test"></p></p></div>對(duì)這里的p段落標(biāo)簽無(wú)效,這里要用
$("div .test)
5.臨近選擇器:
$("mix+mix"),選取下一個(gè)兄弟節(jié)點(diǎn).如:$("div +#test"),id為test的的節(jié)點(diǎn)必須是div的下一個(gè)兄弟節(jié)點(diǎn).
<div></div><p id="test"></p>在$("div + #test")中能取到p段落節(jié)點(diǎn)
<div></div><p></p><p id="test"></p>則不能取到
6.屬性選擇器:
把屬性選擇器不放在css選擇器里面是因?yàn)閖Query中寫法是不一樣的.至于css中寫法可以參考我之前寫的一篇css的選擇器一文.jQuery中是和xPath類似的寫法:
$("mix[@attr]"):選取所有該mix且具有attr屬性的節(jié)點(diǎn)
$("mix[@attr=a_value"]):選取所有該mix且具有attr屬性并滿足屬性值為a_value的節(jié)點(diǎn)
$("mix[@attr^=a_value_head"]):attr屬性的屬性值是以a_value_head開(kāi)頭的
$("mix[@attr$=a_value_end"]):attr屬性的屬性值是以a_value_end結(jié)尾的
$("mix[@attr*=a_value"]):attr屬性的屬性值中包含a_value
7.進(jìn)一步選擇器:
這個(gè)名稱是我自己起的,其實(shí)選擇器組合都有進(jìn)一步的意思,你明白后面所介紹的知識(shí)即可.
具有限定子節(jié)點(diǎn)選擇器:$("mix1[mix2]"):返回包含mix2的mix1節(jié)點(diǎn).如:$("div[a]"):包含a標(biāo)簽的div.
這個(gè)和$("div a")不相同.后者表示div中的a標(biāo)簽,返回的是a標(biāo)簽對(duì)象,前者返回的是div標(biāo)簽對(duì)象
冒號(hào)限定結(jié)點(diǎn)選擇器:$("mix:condition"):mix標(biāo)簽,并且滿足限定條件.
E:root:類型為E,并且是文檔的根元素
E:nth-child(n):是其父元素的第n個(gè)類型為E的子元素 ,基數(shù)從1開(kāi)始
E:first-child:是其父元素的第1個(gè)類型為E的子元素
E:last-child:是其父元素的最后一個(gè)類型為E的子元素
E:only-child:且是其父元素的唯一一個(gè)類型為E的子元素
E:empty:沒(méi)有子元素(包括text節(jié)點(diǎn))的類型為E的元素
E:enabled
E:disabled:類型為E,允許或被禁止的用戶界面元素
E:checked:類型為E,處于選中狀態(tài)的用戶界面元素(例如單選按鈕或復(fù)選框)
E:visible:選擇所有可見(jiàn)元素(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:相當(dāng)于E:eq(0)
E:last:最后一個(gè)匹配的元素
E:even:從匹配的元素集中取序數(shù)為偶數(shù)的元素
E:odd:從匹配的元素集中取序數(shù)為奇數(shù)的元素
E:parent:選擇包含子元素(包含text節(jié)點(diǎn))的所有元素
E:contains('test'):選擇所有含有指定文本的元素
表單選擇器:
E:input:選擇表單元素(input,select,textarea,button)
E:text:選擇所有文本域(type="text")
E:password:選擇所有密碼域(type="password")
E:radio:選擇所有單選按鈕(type="radio")
E:checkbox:選擇所有復(fù)選框(type="checkbox")
E:submit:選擇所有提交按鈕(type="submit")
E:image:選擇所有圖像域 (type="image")
E:reset:選擇所有清除域(type="reset")
E:button:選擇所有按鈕(type="button")
當(dāng)然包括E:hidden
8.xPath路徑查詢:
先介紹下xPath的語(yǔ)法:
/:選取根節(jié)點(diǎn)
//:選取文檔中所有符合條件的節(jié)點(diǎn),不管該節(jié)點(diǎn)位于何處
.:選取當(dāng)前節(jié)點(diǎn)
..:選取單前節(jié)點(diǎn)的父節(jié)點(diǎn)
@:選取屬性,這個(gè)在之前說(shuō)過(guò)了(屬性選擇器)
nodename:選取節(jié)點(diǎn)下的所有節(jié)點(diǎn)
jQuery中的應(yīng)用:
根節(jié)點(diǎn)是很少用到的,常用的如下面的例子:
$("div/p")相當(dāng)于$("div>p")
$("div//p")相當(dāng)于$("div p")
$("http://div/../p"):所有div節(jié)點(diǎn)的父節(jié)點(diǎn)下的p標(biāo)簽
還有相對(duì)路徑的寫法以及支持的Axis選擇器,還不是會(huì)應(yīng)用,不介紹了...已經(jīng)一大堆了
$的其他用法:
$(html節(jié)點(diǎn)):根據(jù)提供的原始HTML標(biāo)記字符串,動(dòng)態(tài)創(chuàng)建由jQuery對(duì)象包裝的DOM元素.如:
$("<div><p>Hello</p></div>").appendTo("#body");//把<div><p>Hello</p></div>添加到body元素中
$(document):網(wǎng)頁(yè)文檔對(duì)象
$(document.body):網(wǎng)頁(yè)body對(duì)象,和$("body")是一樣的
$(函數(shù)):DOM載入后就執(zhí)行該函數(shù).所以$(document).ready()可以寫做$()
$(選擇器部分,選擇器來(lái)源):這個(gè)舉例說(shuō)明
$("input:radio",document.forms[0]):在文檔的第一個(gè)表單中,搜索所有單選按鈕
$("div",xml.responseXML):查詢指定XML文檔中的所有div元素
選擇器來(lái)源可以是:作為上下文的DOM元素,文檔或jQuery對(duì)象
還有兩個(gè):$.extend(prop)和$.noConflict()是和插件以及和其他庫(kù)兼容的使用,以后再寫
jQuery的core部分還有:
eq(數(shù)字):將匹配的元素集合縮減為一個(gè)元素。這個(gè)元素在匹配元素集合中的位置變?yōu)?,而集合長(zhǎng)度變成1
gt(數(shù)字):將匹配的元素集合縮減為給定位置之后的所有元素
lt(數(shù)字):將匹配的元素集合縮減為給定位置之前的所有元素
上面三個(gè)的例子:
$("div:eq(1)")//第2個(gè)div
$("div:gt(2)")//第3個(gè)div以及之后的div
$("div:lt(2)")//第2個(gè)div以及之前的div,即第1個(gè)div和第2個(gè)div
length或size():當(dāng)前匹配的元素?cái)?shù)量
each():以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù)。這意味著,每次執(zhí)行傳遞進(jìn)來(lái)的函數(shù)時(shí),函數(shù)中的this關(guān)鍵字都指向一個(gè)不同的元素(每次都是一個(gè)不同的匹配元素).而且,在每次執(zhí)行函數(shù)時(shí),都會(huì)給函數(shù)傳遞一個(gè)表示作為執(zhí)行環(huán)境的元素在匹配的元素集合中所處位置的數(shù)字值作為參數(shù).
$("img").each(function(i){ this.src = "test" + i + ".jpg"; });//迭代圖像,并設(shè)置它們的src屬性
get():如果沒(méi)有參數(shù),返回所有,是一個(gè)對(duì)象數(shù)組;如果帶參數(shù),必須是數(shù)字,基數(shù)從0開(kāi)始.例子:
$("div").get():返回一個(gè)div對(duì)象數(shù)組
$("div").get(1):返回第二個(gè)div對(duì)象
index(需求的元素節(jié)點(diǎn)對(duì)象):返回?cái)?shù)字.用個(gè)例子說(shuō)明:
$("div").index($(".test"))[1] //表示從所有div節(jié)點(diǎn)中查找class屬性為test的節(jié)點(diǎn).并且找的是第二個(gè)節(jié)點(diǎn)(基數(shù)從0開(kāi)始).返回值是該節(jié)點(diǎn)在div節(jié)點(diǎn)中的位置(基數(shù)也是從0開(kāi)始).
JavaScript技術(shù):jquery 選擇器部分整理,轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。