(
九
).Prototype
（
1.5 rc2)
使用指南之
dom.js
這部分提供了很多
(
寫的都有點煩了
)
方便的操作
dom
的方法：包含有名的
$
方法、
document.getElementsByClassName
方法，以及
Element
對象、
Insertion
對象
以下部分一個一個的詳細介紹：
$(element)
：
getElementById
的封裝，
element
可以是一個元素的
id
或元素本身，也可以是一個數組，這時返回一個數組，使用
$
方法，會自動調用
Element.extend(element)
方法，這樣的話使元素可以直接調用
Element
中的方法
,
例如
Element.hide(element)
可以寫成這樣
$(element).hide()
document.getElementsByClassName(className, parentElement):
根據
class
選擇元素
Element.extend(element):
擴展
element
，使
element
可以直接調用
Element
、
Form.Element
或
Form
中定義的方法
Element
對象的方法：
visible: function(element)
：判斷
element
是否可見
,
參數
element
可以是元素本身或元素
id(
下面的方面的參數基本上都是這樣的
)
toggle: function(element)
：反轉
element
的可見性
hide: function(element)
：隱藏元素
show: function(element)
：顯示元素
remove: function(element)
：移除元素
update: function(element, html)
：使用
html
更新
element
的內容，
html
中的
script
會執行
(
下同
)
replace: function(element, html)
：將
element
替換為
html
inspect: function(element)
：
element
的字符串表示
recursivelyCollect: function(element, property):
遞歸收集
,
例如
Element.recursivelyCollect(element, "parentNode")
返回
element
所有的祖先節點
,
注意只返回
nodeType == 1
的元素，也就是不返回文本元素
ancestors: function(element):
等同于上面的例子，返回元素的所有祖先節點
descendants: function(element):
返回所有子孫節點
immediateDescendants: function(element)
：返回元素的直接的子孫節點
(
子節點
)
的數組
previousSiblings: function(element)
：返回元素前面的兄弟節點
nextSiblings: function(element)
：返回位于元素后面的兄弟節點
siblings: function(element)
：返回元素所有的兄弟節點
match: function(element, selector)
：使用
Selector
的
match
方法匹配元素
(Selector
將在后面介紹
), selector
參數是一個
css selector
表達式或者
Prototype
中的一個
Selector
實例，如果
element
匹配
selector
則返回
true
，否則返回
false
，例如對于一個
className
為
logcss
的
div
來說，下面的表達式返回
true, $(element).match("div.logcss")
待續。。
up(element, expression, index)
：利用
Selector.findElement
方法找到
element
元素的祖先節點中符合表達式
expression
的所有元素組成的數組索引為
index
的元素，也可以忽略
expression(
默認為
*
，表示匹配所有元素
)
和
index(
默認為
0)
，直接這樣調用
up(element, index)
或
up(element)
down(element, expression, index)
：跟
up
一樣，只是返回的是子孫節點
previous(element, expression, index)
：返回前面的兄弟節點
next(element, expression, index)
：返回后面的兄弟節點
getElementsBySelector(element,args)
：
Selector.findChildElements(element, args)
的封裝，
args
表示可以傳遞多個參數，每個參數是一個
css selector
表達式，返回
element
的子孫節點中符合任何一個
css selector
表達式的元素組成的數組
getElementsByClassName(element, className)
：返回
element
中的子孫節點中符合
clsssName
的元素
readAttribute(element, name)
：
return $(element).getAttribute(name)
，之所以添加這個方法是因為在
IE
和
Safari(Mac)
中
getAttribute
不是一個真正的函數，它沒有
call
、
apply
等方法，所以在很多時候調用會出現錯誤
(Prototype
中很多地方使用了函數的這兩個方法
)
，例如下面的例子
(
官方文檔中的一個例子
)
，就只能使用
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()
：調用
Event
對象
(Prototype
中的，將在后面介紹
)
的
observe
方法為元素注冊事件
handle
stopObserving()
：移除注冊的事件
handle
cleanWhitespace: function(element)
：移除元素中空白的文本子節點
empty: function(element)
：判斷元素是否為空
childOf: function(element, ancestor)
：判斷
element
是否為
ancestor
的子孫節點
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}
這樣的關聯數組
makePositioned: function(element)
：當元素的
position css
屬性為
static
或不存在使，將次屬性更改為
relative
undoPositioned: function(element)
：跟
makePositioned
相反的操作
makeClipping: function(element)
：把元素變成
clipping(
切片
)
，也就是設置元素的
overflow
屬性為
hidden
undoClipping: function(element)
：反轉上面的方法對元素所做的修改
hasAttribute(element)
：判斷元素是否有某個屬性
Element
對象的方法是不是不少啊，哈哈，下面介紹有關
Insertion
的四個類
Insertion.Before
：將內容插入到元素的前面，內容在元素外面
Insertion.Top
：將內容插入到元素的頂部，內容在元素里面
Insertion.Bottom
：將內容插入到元素的底部，內容在元素里面
Insertion.After
：將內容插入到元素后面，內容在元素外面
使用它們的方法比較簡單：
new Insertion.where(element, content)
，其中
where
表示上面的
Before
、
Top
等，
content
是
html
字符串，注意其中
javascript
片斷會執行
終于寫完了，
Prototype
的
Element
方法還真不少
雖然以前覺得自己對
Prototype
還比較熟悉，寫的也有點累，但是發現自己收獲仍然挺大的，為了寫出這些方法的具體作用和用法，必須強迫自己一行行的把
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.
|
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 “lang” 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
對象和類，
Selector
對象具有下面兩個方法：
match(element)
：元素是否與本
selector
匹配，在
Element
中已經介紹了
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
也有幾個靜態方法，它們分別是：
matchElements(elements, expression)
：返回
elements
中符合
expression
的元素列表
findElement(elements, expression, index)
：返回
elements
中符合
expression
的元素列表中索引為
index
的元素
findChildElements(element, expressions)
：找出
element
的子孫元素中符合
expressions
的元素列表，其中
expressions
是一個
expression
數組，其中的
expression
支持
"div li.#id"
形式
$$
方法：只是簡單的調用
return Selector.findChildElements(document, $A(arguments))
雖然
Selector
有這么多方法，但是大部分都是內部調用的，我們一般都很少使用，因為我們有個一個方便的方法
$$
，對于絕大部分情況已經足夠了