( 九 ).Prototype ( 1.5 rc2) 使用指南之 dom.js
這部分提供了很多 ( 寫的都有點煩了 ) 方便的操作 dom 的方法:包含有名的 $ 方法、 document.getElementsByClassName 方法,以及 Element 對象、 Insertion 對象
以下部分一個一個的詳細介紹:
$(element) : getElementById 的封裝, element 可以是一個元素的 id 或元素本身,也可以是一個數(shù)組,這時返回一個數(shù)組,使用 $ 方法,會自動調(diào)用 Element.extend(element) 方法,這樣的話使元素可以直接調(diào)用 Element 中的方法 , 例如 Element.hide(element) 可以寫成這樣 $(element).hide()
document.getElementsByClassName(className, parentElement): 根據(jù) class 選擇元素
Element.extend(element): 擴展 element ,使 element 可以直接調(diào)用 Element 、 Form.Element 或 Form 中定義的方法
Element 對象的方法:
visible: function(element) :判斷 element 是否可見 , 參數(shù) element 可以是元素本身或元素 id( 下面的方面的參數(shù)基本上都是這樣的 )
toggle: function(element) :反轉(zhuǎn) element 的可見性
hide: function(element) :隱藏元素
show: function(element) :顯示元素
remove: function(element) :移除元素
update: function(element, html) :使用 html 更新 element 的內(nèi)容, html 中的 script 會執(zhí)行 ( 下同 )
replace: function(element, html) :將 element 替換為 html
inspect: function(element) : element 的字符串表示
recursivelyCollect: function(element, property): 遞歸收集 , 例如 Element.recursivelyCollect(element, "parentNode") 返回 element 所有的祖先節(jié)點 , 注意只返回 nodeType == 1 的元素,也就是不返回文本元素
ancestors: function(element): 等同于上面的例子,返回元素的所有祖先節(jié)點
descendants: function(element): 返回所有子孫節(jié)點
immediateDescendants: function(element) :返回元素的直接的子孫節(jié)點 ( 子節(jié)點 ) 的數(shù)組
previousSiblings: function(element) :返回元素前面的兄弟節(jié)點
nextSiblings: function(element) :返回位于元素后面的兄弟節(jié)點
siblings: function(element) :返回元素所有的兄弟節(jié)點
match: function(element, selector) :使用 Selector 的 match 方法匹配元素 (Selector 將在后面介紹 ), selector 參數(shù)是一個 css selector 表達式或者 Prototype 中的一個 Selector 實例,如果 element 匹配 selector 則返回 true ,否則返回 false ,例如對于一個 className 為 logcss 的 div 來說,下面的表達式返回 true, $(element).match("div.logcss") 待續(xù)。。
up(element, expression, index) :利用 Selector.findElement 方法找到 element 元素的祖先節(jié)點中符合表達式 expression 的所有元素組成的數(shù)組索引為 index 的元素,也可以忽略 expression( 默認為 * ,表示匹配所有元素 ) 和 index( 默認為 0) ,直接這樣調(diào)用 up(element, index) 或 up(element)
down(element, expression, index) :跟 up 一樣,只是返回的是子孫節(jié)點
previous(element, expression, index) :返回前面的兄弟節(jié)點
next(element, expression, index) :返回后面的兄弟節(jié)點
getElementsBySelector(element,args) : Selector.findChildElements(element, args) 的封裝, args 表示可以傳遞多個參數(shù),每個參數(shù)是一個 css selector 表達式,返回 element 的子孫節(jié)點中符合任何一個 css selector 表達式的元素組成的數(shù)組
getElementsByClassName(element, className) :返回 element 中的子孫節(jié)點中符合 clsssName 的元素
readAttribute(element, name) : return $(element).getAttribute(name) ,之所以添加這個方法是因為在 IE 和 Safari(Mac) 中 getAttribute 不是一個真正的函數(shù),它沒有 call 、 apply 等方法,所以在很多時候調(diào)用會出現(xiàn)錯誤 (Prototype 中很多地方使用了函數(shù)的這兩個方法 ) ,例如下面的例子 ( 官方文檔中的一個例子 ) ,就只能使用 readAttribute :
<div id="widgets">
?<div class="widget" widget_id="7">…</div>
?<div class="widget" widget_id="8">…</div>
?<div class="widget" widget_id="9">…</div>
</div>
$$(’div.widget’).invoke(’readAttribute’, 'widget_id’)
// ["7", "8", "9"]
getHeight: function(element) :返回元素高度, return element.offsetHeight
classNames: function(element) :返回一個 Element.ClassNames 對象,改對象提供對元素 class 的操作,包括 add 、 remove 、 set 等,一般很少使用,使用 Element.addClassName 等方法就可以了 ( 就在下面 )
hasClassName: function(element, className) :判斷 element 是否含有 className
addClassName: function(element, className) :給 element 添加一個 class
removeClassName: function(element, className) :移除元素中的一個 class
observe() :調(diào)用 Event 對象 (Prototype 中的,將在后面介紹 ) 的 observe 方法為元素注冊事件 handle
stopObserving() :移除注冊的事件 handle
cleanWhitespace: function(element) :移除元素中空白的文本子節(jié)點
empty: function(element) :判斷元素是否為空
childOf: function(element, ancestor) :判斷 element 是否為 ancestor 的子孫節(jié)點
scrollTo: function(element) :滾動條移動到元素所在的地方
getStyle: function(element, style) :得到元素某個 css 樣式的值,例如 $(element).getStyle("float")
setStyle: function(element, style) :設置元素的 css 樣式, style 十一個對象,例如 element.setStyle({left: "40px", "background-color":"#666"})
getDimensions: function(element) :得到元素的尺寸,即使元素是隱藏的也可以正確的返回,返回 return {width: originalWidth, height: originalHeight} 這樣的關聯(lián)數(shù)組
makePositioned: function(element) :當元素的 position css 屬性為 static 或不存在使,將次屬性更改為 relative
undoPositioned: function(element) :跟 makePositioned 相反的操作
makeClipping: function(element) :把元素變成 clipping( 切片 ) ,也就是設置元素的 overflow 屬性為 hidden
undoClipping: function(element) :反轉(zhuǎn)上面的方法對元素所做的修改
hasAttribute(element) :判斷元素是否有某個屬性
Element 對象的方法是不是不少啊,哈哈,下面介紹有關 Insertion 的四個類
Insertion.Before :將內(nèi)容插入到元素的前面,內(nèi)容在元素外面
Insertion.Top :將內(nèi)容插入到元素的頂部,內(nèi)容在元素里面
Insertion.Bottom :將內(nèi)容插入到元素的底部,內(nèi)容在元素里面
Insertion.After :將內(nèi)容插入到元素后面,內(nèi)容在元素外面
使用它們的方法比較簡單: new Insertion.where(element, content) ,其中 where 表示上面的 Before 、 Top 等, content 是 html 字符串,注意其中 javascript 片斷會執(zhí)行
終于寫完了, Prototype 的 Element 方法還真不少
雖然以前覺得自己對 Prototype 還比較熟悉,寫的也有點累,但是發(fā)現(xiàn)自己收獲仍然挺大的,為了寫出這些方法的具體作用和用法,必須強迫自己一行行的把 Prototype 的代碼弄清楚,使自己對 Prototype 中很多精巧的寫法有了更深刻的認識和理解
寫這個教程的主要目的是為了給大家一個快速的參考,大家還是對照著源代碼看才會真正有所提高
這時我第一次寫比較完整的一個教程,錯誤幼稚的地方在所難免,希望大家批評指正,互相學習提高,
( 十 ).Prototype 使用指南之 Selector
Selector 是利用 css selector 來匹配選擇頁面元素的,所以要理解 Selector 首先應該對 css selector 有所理解,下面是 css2 selector 的語法,當然很多瀏覽器只是支持其中的一部分, Prototype 中的 Selector 主要支持 tag 選擇器、 class 選擇器和 id 選擇器,還有屬性 (attribute) 選擇器,基本上包含我們平時所用的所有類型
The following table summarizes CSS2 selector syntax, 詳細的可以看 http://www.w3.org/TR/REC-CSS2/selector.html :
Pattern |
Meaning |
Described in section |
* |
Matches any element. |
|
E |
Matches any E element (i.e., an element of type E). |
|
E F |
Matches any F element that is a descendant of an E element. |
|
E > F |
Matches any F element that is a child of an element E. |
|
E:first-child |
Matches element E when E is the first child of its parent. |
|
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). |
|
E:active E:hover E:focus |
Matches E during certain user actions. |
|
E:lang(c) |
Matches element of type E if it is in (human) language c (the document language specifies how language is determined). |
|
E + F |
Matches any F element immediately preceded by an element E. |
|
E[foo] |
Matches any E element with the “foo” attribute set (whatever the value). |
|
E[foo=”warning”] |
Matches any E element whose “foo” attribute value is exactly equal to “warning”. |
|
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”. |
|
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”. |
|
DIV.warning |
HTML only. The same as DIV[class~=”warning”]. |
|
E#myid |
Matches any E element ID equal to “myid”. |
Selector 中包含 Selector 對象和類,
Selector 對象具有下面兩個方法:
match(element)
:元素是否與本
selector
匹配,在
Element
中已經(jīng)介紹了
findElements(parentNode)
:
parentNode
中所有匹配本
selector
的子孫元素列表
使用方法也很簡單 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 也有幾個靜態(tài)方法,它們分別是:
matchElements(elements, expression)
:返回
elements
中符合
expression
的元素列表
findElement(elements, expression, index)
:返回
elements
中符合
expression
的元素列表中索引為
index
的元素
findChildElements(element, expressions)
:找出
element
的子孫元素中符合
expressions
的元素列表,其中
expressions
是一個
expression
數(shù)組,其中的
expression
支持
"div li.#id"
形式
$$ 方法:只是簡單的調(diào)用 return Selector.findChildElements(document, $A(arguments))
雖然 Selector 有這么多方法,但是大部分都是內(nèi)部調(diào)用的,我們一般都很少使用,因為我們有個一個方便的方法 $$ ,對于絕大部分情況已經(jīng)足夠了