Prototype使用指南之selector.js
Selector是利用css selector來(lái)匹配選擇頁(yè)面元素的,所以要理解Selector首先應(yīng)該對(duì)css selector有所理解,下面是css2 selector的語(yǔ)法,當(dāng)然很多瀏覽器只是支持其中的一部分,Prototype 中的Selector主要支持tag選擇器、class選擇器和id選擇器,還有屬性(attribute)選擇器,基本上包含我們平時(shí)所用的所有類型
The following table summarizes CSS2 selector syntax, 詳細(xì)的可以看http://www.w3.org/TR/REC-CSS2/selector.html:
Pattern | Meaning | Described in section |
---|---|---|
* | Matches any element. | Universal selector |
E | Matches any E element (i.e., an element of type E). | Type selectors |
E F | Matches any F element that is a descendant of an E element. | Descendant selectors |
E > F | Matches any F element that is a child of an element E. | Child selectors |
E:first-child | Matches element E when E is the first child of its parent. | The :first-child pseudo-class |
E:link E:visited | Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). | The link pseudo-classes |
E:active E:hover E:focus | Matches E during certain user actions. | The dynamic pseudo-classes |
E:lang(c) | Matches element of type E if it is in (human) language c (the document language specifies how language is determined). | The :lang() pseudo-class |
E + F | Matches any F element immediately preceded by an element E. | Adjacent selectors |
E[foo] | Matches any E element with the “foo” attribute set (whatever the value). | Attribute selectors |
E[foo=”warning”] | Matches any E element whose “foo” attribute value is exactly equal to “warning”. | Attribute selectors |
E[foo~=”warning”] | Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”. | Attribute selectors |
E[lang|=”en”] | Matches any E element whose “l(fā)ang” attribute has a hyphen-separated list of values beginning (from the left) with “en”. | Attribute selectors |
DIV.warning | HTML only. The same as DIV[class~=”warning”]. | Class selectors |
E#myid | Matches any E element ID equal to “myid”. | ID selectors |
Selector中包含Selector對(duì)象和類,
Selector對(duì)象具有下面兩個(gè)方法:
match(element):元素是否與本selector匹配,在Element中已經(jīng)介紹了
findElements(parentNode):parentNode中所有匹配本selector的子孫元素列表
使用方法也很簡(jiǎn)單 var s=new Selector(expression); s.match(element); s.findElements($(element)),其中expression可以是如下方式 "div"、"#id"、".class"、"div#id"、"div[attribute]"、"div[attribute=fff]"、"div[attribute!=sdf]"
其中Selector也有幾個(gè)靜態(tài)方法,它們分別是:
matchElements(elements, expression):返回elements中符合expression的元素列表
findElement(elements, expression, index):返回elements中符合expression的元素列表中索引為index的元素
findChildElements(element, expressions):找出element的子孫元素中符合expressions的元素列表,其中expressions是一個(gè)expression數(shù)組,其中的expression支持"div li.#id"形式
$$方法:只是簡(jiǎn)單的調(diào)用return Selector.findChildElements(document, $A(arguments))
雖然Selector有這么多方法,但是大部分都是內(nèi)部調(diào)用的,我們一般都很少使用,因?yàn)槲覀冇袀€(gè)一個(gè)方便的方法$$,對(duì)于絕大部分情況已經(jīng)足夠了- Prototype使用指南之dom.js
- Prototype使用指南之form.js
- 使用prototype.js進(jìn)行異步操作
- 使用prototype.js 的時(shí)候應(yīng)該特別注意的幾個(gè)問(wèn)題.
- Prototype1.6 JS 官方下載地址
- JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區(qū)別和應(yīng)用場(chǎng)景簡(jiǎn)述
- JS 面向?qū)ο笾衿娴膒rototype
- javascript 進(jìn)階篇3 Ajax 、JSON、 Prototype介紹
- 深入分析js中的constructor和prototype
- 為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問(wèn)題探討及解決
- 解析jQuery與其它js(Prototype)庫(kù)兼容共存
- 判斷js中各種數(shù)據(jù)的類型方法之typeof與0bject.prototype.toString講解
- js中prototype用法詳細(xì)介紹
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- js使用Array.prototype.sort()對(duì)數(shù)組對(duì)象排序的方法
- 談?wù)刯s中的prototype及prototype屬性解釋和常用方法
相關(guān)文章
Prototype源碼淺析 Enumerable部分之each方法
在javascript中,根本找不到Enumerable的影子,因?yàn)檫@一塊是Prototype作者從Ruby中借鑒過(guò)來(lái)的。2012-01-01Prototype PeriodicalExecuter對(duì)象 學(xué)習(xí)
這個(gè)對(duì)象就是可以周期性的執(zhí)行某個(gè)方法,但是在它內(nèi)部維持了一個(gè)狀態(tài),可以防止由于某些原因一次調(diào)用沒(méi)執(zhí)行,然后下一次調(diào)用又來(lái)了,這樣會(huì)造成連續(xù)執(zhí)行兩次方法。上面的第二斷英文就是這個(gè)意思。2009-07-07不錯(cuò)的一篇關(guān)于javascript-prototype繼承
不錯(cuò)的一篇關(guān)于javascript-prototype繼承...2007-08-08使用prototype.js 的時(shí)候應(yīng)該特別注意的幾個(gè)問(wèn)題.
使用prototype.js 的時(shí)候應(yīng)該特別注意的幾個(gè)問(wèn)題....2007-04-04動(dòng)態(tài)表格Table類的實(shí)現(xiàn)
文件名:Table.js本文件依賴于 prototype.js,prototype_ext.js,Lib.js,DataBinder.js這些文件請(qǐng)參看我的其它文章2009-08-08Prototype Array對(duì)象 學(xué)習(xí)
這個(gè)對(duì)象擴(kuò)展了JS原生的Array對(duì)象,提供了一些基本的工具函數(shù),有些方法非常簡(jiǎn)單,源碼里就不在注釋了。2009-07-07Prototype Function對(duì)象 學(xué)習(xí)
這個(gè)對(duì)象就是對(duì)function的一些擴(kuò)充,最重要的當(dāng)屬bind方法,其中wrap方法也很重要,在類繼承機(jī)制里面就是利用wrap方法來(lái)調(diào)用父類的同名方法。2009-07-07