Chapter?2.?prototype.js參考
2.1.?JavaScript 類的擴(kuò)展
prototype.js 包中加入功能的一種途徑就是擴(kuò)展已有的JavaScript 類。
2.2.?對(duì) Object 類的擴(kuò)展
Table?2.1.?Object 類的擴(kuò)展
方法 |
類別 |
參數(shù) |
描述 |
extend(destination, source)
|
static
|
destination: 任何對(duì)象, source: 任何對(duì)象 |
用從 source 到 destination復(fù)制所有屬性和方法的方式 來提供一種繼承機(jī)制。 |
extend(object)
|
instance
|
任何對(duì)象
|
用從傳入的 object 中復(fù)制所有屬性和方法的方式 來提供一種繼承機(jī)制。 |
2.3.?對(duì) Number 類的擴(kuò)展
Table?2.2.?Number 類的擴(kuò)展
方法 |
類別 |
參數(shù) |
描述 |
toColorPart()
|
instance
|
(none)
|
返回?cái)?shù)字的十六進(jìn)制描述, 當(dāng)在HTML中轉(zhuǎn)換為RGB顏色組件到HTML中使用的顏色。 |
2.4.?對(duì) Function 類的擴(kuò)展
Table?2.3.?對(duì) Function 類的擴(kuò)展
方法 |
類別 |
參數(shù) |
描述 |
bind(object)
|
instance
|
object: 擁有這個(gè)方法的對(duì)象 |
返回預(yù)先綁定在擁有該函數(shù)(=方法)的對(duì)象上的函數(shù)實(shí)例, 返回的方法將和原來的方法具有相同的參數(shù)。 |
bindAsEventListener(object)
|
instance
|
object: 擁有這個(gè)方法的對(duì)象 |
返回預(yù)先綁定在擁有該函數(shù)(=方法)的對(duì)象上的函數(shù)實(shí)例, 返回的方法將把當(dāng)前的事件對(duì)象作為它的參數(shù)。 |
讓我們看看這些擴(kuò)展的具體例子。
<input type=checkbox id=myChk value=1> Test?
<script>
//declaring the class
var CheckboxWatcher = Class.create();
//defining the rest of the class implmentation
CheckboxWatcher.prototype = {
initialize: function(chkBox, message) {
this.chkBox = $(chkBox);
this.message = message;
//assigning our method to the event
this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
},
showMessage: function(evt) {
alert(this.message + ' (' + evt.type + ')');
}
};
var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>
2.5.?對(duì) String 類的擴(kuò)展
Table?2.4.?String 類的擴(kuò)展
方法 |
類別 |
參數(shù) |
描述 |
stripTags()
|
instance
|
(none)
|
返回一個(gè)把所有的HTML或XML標(biāo)記都移除的字符串。 |
escapeHTML()
|
instance
|
(none)
|
返回一個(gè)把所有的HTML標(biāo)記回避掉的字符串。 |
unescapeHTML()
|
instance
|
(none)
|
和 escapeHTML()相反。 |
2.6.?對(duì) document DOM 對(duì)象的擴(kuò)展
Table?2.5.?document DOM 對(duì)象的擴(kuò)展
方法 |
類別 |
參數(shù) |
描述 |
getElementsByClassName(className)
|
instance
|
className: 關(guān)聯(lián)在元素上的CSS類名 |
返回給定的具有相同的CSS類名的所有元素。 |
2.7.?對(duì) Event 對(duì)象的擴(kuò)展
Table?2.6.?Event 對(duì)象的擴(kuò)展
屬性 |
類型 |
描述 |
KEY_BACKSPACE
|
Number
|
8: 常量,退格(Backspace)鍵的代碼。 |
KEY_TAB
|
Number
|
9: 常量,Tab鍵的代碼。 |
KEY_RETURN
|
Number
|
13: 常量,回車鍵的代碼。 |
KEY_ESC
|
Number
|
27: 常量, Esc鍵的代碼。 |
KEY_LEFT
|
Number
|
37: 常量,左箭頭鍵的代碼。 |
KEY_UP
|
Number
|
38: 常量,上箭頭鍵的代碼。 |
KEY_RIGHT
|
Number
|
39: 常量,右箭頭鍵的代碼。 |
KEY_DOWN
|
Number
|
40: 常量,下箭頭鍵的代碼。 |
KEY_DELETE
|
Number
|
46: 常量,刪除(Delete)鍵的代碼。 |
observers:
|
Array
|
緩存的觀察者的列表,這個(gè)對(duì)象內(nèi)部具體實(shí)現(xiàn)的一部分。
|
Table?2.7.?Event 對(duì)象的擴(kuò)展
方法 |
類別 |
參數(shù) |
描述 |
element(event)
|
static
|
event: 事件對(duì)象 |
返回引發(fā)這個(gè)事件的元素。 |
isLeftClick(event)
|
static
|
event: 事件對(duì)象 |
如果鼠標(biāo)左鍵單擊返回true。 |
pointerX(event)
|
static
|
event: 事件對(duì)象 |
返回在頁面上x坐標(biāo)。 |
pointerY(event)
|
static
|
event: 事件對(duì)象 |
返回在頁面上y坐標(biāo)。 |
stop(event)
|
static
|
event: 事件對(duì)象 |
用這個(gè)方法來中止事件的默認(rèn)行為來使事件的傳播停止。 |
findElement(event, tagName)
|
static
|
event: 事件對(duì)象, tagName: 指定標(biāo)記的名字 |
向 DOM 樹的上位查找,找到第一個(gè)給定標(biāo)記名稱的元素, 從這個(gè)元素開始觸發(fā)事件。 |
observe(element, name, observer, useCapture)
|
static
|
element: 對(duì)象或者對(duì)象id, name: 事件名 (如 'click', 'load', etc), observer: 處理這個(gè)事件的方法, useCapture: 如果true, 在捕捉到事件的階段處理事件 那么如果 false在bubbling 階段處理。 |
加入一個(gè)處理事件的方法。 |
stopObserving(element, name, observer, useCapture)
|
static
|
element: 對(duì)象或者對(duì)象id, name: 事件名 (如 'click', 'load', etc), observer: 處理這個(gè)事件的方法, useCapture: 如果true, 在捕捉到事件的階段處理事件 那么如果 false在bubbling 階段處理。 |
刪除一個(gè)處理實(shí)踐的方法。 |
_observeAndCache( element, name, observer, useCapture)
|
static
|
? |
私有方法,不用管它。 |
unloadCache()
|
static
|
(none)
|
私有方法,不用管它。清除內(nèi)存中的多有觀察著緩存。 |
讓我們看看怎樣用這個(gè)對(duì)象加入處理 window 對(duì)象的load事件的處理方法。
<script>
Event.observe(window, 'load', showMessage, false);
function showMessage() {
alert('Page loaded.');
}
</script>
2.8.?在 prototype.js中定義的新對(duì)象和類
另一個(gè)這個(gè)程序包幫助你的地方就是提供許多既支持面向?qū)ο笤O(shè)計(jì)理念又有共通功能的許多對(duì)象。
2.9.?PeriodicalExecuter 對(duì)象
這個(gè)對(duì)象提供一定間隔時(shí)間上重復(fù)調(diào)用一個(gè)方法的邏輯。
Table?2.8.?PeriodicalExecuter 對(duì)象
方法 |
類別 |
參數(shù) |
描述 |
[ctor](callback, interval)
|
constructor
|
callback: 沒有參數(shù)的方法, interval: 秒數(shù) |
創(chuàng)建這個(gè)對(duì)象的實(shí)例將會(huì)重復(fù)調(diào)用給定的方法。 |
Table?2.9.?PeriodicalExecuter 對(duì)象
屬性 |
類型 |
描述 |
callback
|
Function()
|
被調(diào)用的方法,該方法不會(huì)被傳入?yún)?shù)。 |
frequency
|
Number
|
以秒為單位的間隔。 |
currentlyExecuting
|
Boolean
|
表示這個(gè)方法是否正在執(zhí)行。 |
Prototype 沒有太重要的作用,只是聲明了該程序包的版本 。
Table?2.10.?The Prototype object
屬性 |
類型 |
描述 |
Version
|
String
|
包的版本。 |
emptyFunction
|
Function()
|
空方法對(duì)象。 |
在這個(gè)程序包中 Class 對(duì)象在聲明其他的類時(shí)候被用到 。用這個(gè)對(duì)象聲明類使得新類支持 initialize() 方法,他起構(gòu)造方法的作用。
看下面的例子
//declaring the class
var MySampleClass = Class.create();
//defining the rest of the class implmentation
MySampleClass.prototype = {
initialize: function(message) {
this.message = message;
},
showMessage: function(ajaxResponse) {
alert(this.message);
}
};
//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //displays alert
Table?2.11.?Class 對(duì)象
方法 |
類別 |
參數(shù) |
描述 |
create(*)
|
instance
|
(any)
|
定義新類的構(gòu)造方法。 |
這個(gè)對(duì)象被用作其他提供AJAX功能的類的根對(duì)象。
Table?2.12.?Ajax 對(duì)象
方法 |
類別 |
參數(shù) |
描述 |
getTransport()
|
instance
|
(none)
|
返回新的XMLHttpRequest 對(duì)象。 |
這個(gè)類是其他在Ajax對(duì)象中定義的類的基類。
Table?2.13.?Ajax.Base 類
方法 |
類別 |
參數(shù) |
描述 |
setOptions(options)
|
instance
|
options: AJAX 選項(xiàng) |
設(shè)定AJAX操作想要的選項(xiàng)。 |
responseIsSuccess()
|
instance
|
(none)
|
返回 true 如果AJAX操作成功,否則為 false 。 |
responseIsFailure()
|
instance
|
(none)
|
與 responseIsSuccess() 相反。 |
繼承自 Ajax.Base
封裝 AJAX 操作
Table?2.14.?Ajax.Request 類
屬性 |
類型 |
類別 |
描述 |
Events
|
Array
|
static
|
在AJAX操作中所有可能報(bào)告的事件/狀態(tài)的列表。這個(gè)列表包括: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 和 'Complete'。 |
transport
|
XMLHttpRequest
|
instance
|
攜帶AJAX操作的 XMLHttpRequest 對(duì)象。 |
Table?2.15.?Ajax.Request 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](url, options)
|
constructor
|
url: 請(qǐng)求的url, options: AJAX 選項(xiàng) |
創(chuàng)建這個(gè)對(duì)象的一個(gè)實(shí)例,它將在給定的選項(xiàng)下請(qǐng)求url。 重要:如果選擇的url受到瀏覽器的安全設(shè)置,他會(huì)一點(diǎn)作用也不起。 很多情況下,瀏覽器不會(huì)請(qǐng)求與當(dāng)前頁面不同主機(jī)(域名)的url。 你最好只使用本地url來避免限制用戶配置他們的瀏覽器(謝謝Clay) |
request(url)
|
instance
|
url: AJAX 請(qǐng)求的url |
這個(gè)方法通常不會(huì)被外部調(diào)用。已經(jīng)在構(gòu)造方法中調(diào)用了。 |
setRequestHeaders()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 被這個(gè)對(duì)象自己調(diào)用來配置在HTTP請(qǐng)求要發(fā)送的HTTP報(bào)頭。 |
onStateChange()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 當(dāng)AJAX請(qǐng)求狀態(tài)改變的時(shí)候被這個(gè)對(duì)象自己調(diào)用。 |
respondToReadyState(readyState)
|
instance
|
readyState: 狀態(tài)數(shù)字 (1 到 4) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 當(dāng)AJAX請(qǐng)求狀態(tài)改變的時(shí)候被這個(gè)對(duì)象自己調(diào)用。 |
2.15.?options 參數(shù)對(duì)象
AJAX操作中一個(gè)重要的部分就是 options 參數(shù)。 本質(zhì)上沒有options類。任何對(duì)象都可以被傳入,只要帶有需要的屬性。通常會(huì)只為了AJAX調(diào)用創(chuàng)建匿名類。
Table?2.16.?options 參數(shù)對(duì)象
屬性 |
類型 |
Default |
描述 |
method
|
Array
|
'post'
|
HTTP 請(qǐng)求方式。 |
parameters
|
String
|
''
|
在HTTP請(qǐng)求中傳入的url格式的值列表。 |
asynchronous
|
Boolean
|
true
|
指定是否做異步 AJAX 請(qǐng)求。 |
postBody
|
String
|
undefined
|
在HTTP POST的情況下,傳入請(qǐng)求體中的內(nèi)容。 |
requestHeaders
|
Array
|
undefined
|
和請(qǐng)求一起被傳入的HTTP頭部列表, 這個(gè)列表必須含有偶數(shù)個(gè)項(xiàng)目, 任何奇數(shù)項(xiàng)目是自定義的頭部的名稱, 接下來的偶數(shù)項(xiàng)目使這個(gè)頭部項(xiàng)目的字符串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value'] |
onXXXXXXXX
|
Function(XMLHttpRequest)
|
undefined
|
在AJAX請(qǐng)求中,當(dāng)相應(yīng)的事件/狀態(tài)形成的時(shí)候調(diào)用的自定義方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 這個(gè)方法將被傳入一個(gè)參數(shù), 這個(gè)參數(shù)是攜帶AJAX操作的 XMLHttpRequest對(duì)象。 |
onSuccess
|
Function(XMLHttpRequest)
|
undefined
|
當(dāng)AJAX請(qǐng)求成功完成的時(shí)候調(diào)用的自定義方法。 這個(gè)方法將被傳入一個(gè)參數(shù), 這個(gè)參數(shù)是攜帶AJAX操作的 XMLHttpRequest對(duì)象。 |
onFailure
|
Function(XMLHttpRequest)
|
undefined
|
當(dāng)AJAX請(qǐng)求完成但出現(xiàn)錯(cuò)誤的時(shí)候調(diào)用的自定義方法。 這個(gè)方法將被傳入一個(gè)參數(shù), 這個(gè)參數(shù)是攜帶AJAX操作的 XMLHttpRequest對(duì)象。 |
insertion
|
Function(Object, String)
|
null
|
為了把返回的文本注入到一個(gè)元素中而執(zhí)行的方法。 這個(gè)方法將被傳入兩個(gè)參數(shù),要被更新的對(duì)象并且只應(yīng)用于 Ajax.Updater的響應(yīng)文本 。 |
evalScripts
|
Boolean
|
undefined, false
|
決定當(dāng)響應(yīng)到達(dá)的時(shí)候是否執(zhí)行其中的腳本塊,只在 Ajax.Updater對(duì)象中應(yīng)用。 |
decay
|
Number
|
undefined, 1
|
決定當(dāng)最后一次響應(yīng)和前一次響應(yīng)相同時(shí)在 Ajax.PeriodicalUpdater對(duì)象中的減漫訪問的次數(shù), 例如,如果設(shè)為2,后來的刷新和之前的結(jié)果一樣, 這個(gè)對(duì)象將等待2個(gè)設(shè)定的時(shí)間間隔進(jìn)行下一次刷新, 如果又一次一樣, 那么將等待4次,等等。 不設(shè)定這個(gè)只,或者設(shè)置為1,將避免訪問頻率變慢。 |
繼承自 Ajax.Request
當(dāng)請(qǐng)求的url返回一段HTML而你想把它直接放置到頁面中一個(gè)特定的元素的時(shí)候被用到。 如果url的返回<script> 的塊并且想在接收到時(shí)就執(zhí)行它的時(shí)候也可以使用該對(duì)象。含有腳本的時(shí)候使用 evalScripts 選項(xiàng)。
Table?2.17.?Ajax.Updater 類
屬性 |
類型 |
類別 |
描述 |
ScriptFragment
|
String
|
static
|
可以判斷是否為腳本的正則表達(dá)式。 |
containers
|
Object
|
instance
|
這個(gè)對(duì)象包含兩個(gè)屬性:AJAX請(qǐng)求成功執(zhí)行的時(shí)候用到 containers.success , 否則的話用到 containers.failure 。 |
Table?2.18.?Ajax.Updater 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](container, url, options)
|
constructor
|
container:可以是元素的id, 也可以是元素自己, 或者可以是帶有2個(gè)屬性的對(duì)象 - object.success AJAX請(qǐng)求成功的時(shí)候用到的元素(或者id) 否則用到object.failure 中設(shè)定的元素(或id) ,url: 請(qǐng)求的url, options: AJAX 選項(xiàng) |
創(chuàng)建一個(gè)用給定的選項(xiàng)請(qǐng)求給定的url的一個(gè)實(shí)例。 |
updateContent()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 當(dāng)響應(yīng)到達(dá)的時(shí)候,被這個(gè)對(duì)象自己調(diào)用。 它會(huì)用HTML更新適當(dāng)?shù)脑鼗蛘哒{(diào)用在 insertion 選項(xiàng)中傳入的方法-這個(gè)方法將被傳入兩個(gè)參數(shù), 被更新的元素和響應(yīng)文本。 |
2.17.?Ajax.PeriodicalUpdater 類
繼承自 Ajax.Base
這個(gè)類重復(fù)生成并使用 Ajax.Updater 對(duì)象來刷新頁面中的一個(gè)元素。或者執(zhí)行 Ajax.Updater 可以執(zhí)行的其它任務(wù)。更多信息參照 Ajax.Updater 參考 。
Table?2.19.?Ajax.PeriodicalUpdater 類
屬性 |
類型 |
類別 |
描述 |
container
|
Object
|
instance
|
這個(gè)值將直接傳入Ajax.Updater的構(gòu)造方法。 |
url
|
String
|
instance
|
這個(gè)值將直接傳入Ajax.Updater的構(gòu)造方法。 |
frequency
|
Number
|
instance
|
兩次刷新之間的間隔 (不是頻率) ,以秒為單位。 默認(rèn)2秒。 This 當(dāng)調(diào)用 Ajax.Updater 對(duì)象的時(shí)候,這個(gè)數(shù)將和當(dāng)前的 decay 相乘。 |
decay
|
Number
|
instance
|
重負(fù)執(zhí)行任務(wù)的時(shí)候保持的衰敗水平。 |
updater
|
Ajax.Updater
|
instance
|
最后一次使用的 Ajax.Updater 對(duì)象 |
timer
|
Object
|
instance
|
通知對(duì)象該下一次更新時(shí)用到的JavaScript 計(jì)時(shí)器。 |
Table?2.20.?Ajax.PeriodicalUpdater 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](container, url, options)
|
constructor
|
container:可以是元素的id, 也可以是元素自己, 或者可以是帶有2個(gè)屬性的對(duì)象 - object.success AJAX請(qǐng)求成功的時(shí)候用到的元素(或者id) 否則用到object.failure 中設(shè)定的元素(或id) ,url: 請(qǐng)求的url, options: AJAX 選項(xiàng) |
創(chuàng)建一個(gè)用給定的選項(xiàng)請(qǐng)求給定的url的一個(gè)實(shí)例。 |
start()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 對(duì)象為了開始周期性執(zhí)行任務(wù)的時(shí)候調(diào)用的方法。 |
stop()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 對(duì)象為了停止周期性執(zhí)行任務(wù)的時(shí)候調(diào)用的方法。 |
updateComplete()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 被當(dāng)前的 Ajax.Updater 使用,當(dāng)一次請(qǐng)求結(jié)束的時(shí)候,它被用作計(jì)劃下一次請(qǐng)求。 |
onTimerEvent()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。當(dāng)?shù)较乱淮胃聲r(shí)被內(nèi)部調(diào)用。 |
這個(gè)對(duì)象提供在操作DOM中元素時(shí)使用的功能性方法。
Table?2.21.?Element 對(duì)象
方法 |
類別 |
參數(shù) |
描述 |
toggle(elem1 [, elem2 [, elem3 [...]]])
|
constructor
|
elemN: 元素對(duì)象或id |
切換每一個(gè)傳入元素的可視性。 |
hide(elem1 [, elem2 [, elem3 [...]]])
|
instance
|
elemN: 元素對(duì)象或id |
用設(shè)定它的 style.display 為 'none'來隱藏每個(gè)傳入的元素。 |
show(elem1 [, elem2 [, Slem3 [...]]])
|
instance
|
elemN: 元素對(duì)象或id |
用設(shè)定它的 style.display 為 ''來顯示每個(gè)傳入的元素。 |
remove(element)
|
instance
|
element: 元素對(duì)象或id |
從document對(duì)象中刪除指定的元素。 |
getHeight(element)
|
instance
|
element: 元素對(duì)象或id |
返回元素的 offsetHeight 。 |
addClassName( element, className)
|
instance
|
element: 元素對(duì)象或id, className: CSS類名 |
向元素的類名中加入給定的類名。 |
hasClassName( element, className)
|
instance
|
element: 元素對(duì)象或id, className: CSS類名 |
返回 true 如果元素的類名中含有給定的類名 |
removeClassName( element, className)
|
instance
|
element: 元素對(duì)象或id, className: CSS類名 |
從元素的類名中刪除給定的類名。 |
cleanWhitespace( element )
|
instance
|
element: 元素對(duì)象或id |
刪除該元素的所有只含有空格的子節(jié)點(diǎn)。 |
這個(gè)對(duì)象是這個(gè)程序包中其他類的根。它沒有任何屬性和方法。在這個(gè)對(duì)象中定義的類可以被視為傳統(tǒng)的抽象類。
2.20.?Abstract.Insertion 類
這個(gè)類被用作其他提供動(dòng)態(tài)內(nèi)容插入功能的類的基類,它像一個(gè)抽象類一樣被使用。
Table?2.22.?Abstract.Insertion 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, content)
|
constructor
|
element: 元素對(duì)象或id, content: 被插入的HTML |
創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
Table?2.23.?Abstract.Insertion 類
屬性 |
類型 |
類別 |
描述 |
adjacency
|
String
|
static, parameter
|
這個(gè)參數(shù)指定相對(duì)于給定元素,內(nèi)容將被放置的位置。 可能的值是: 'beforeBegin', 'afterBegin', 'beforeEnd', 和 'afterEnd'. |
element
|
Object
|
instance
|
與插入物做參照元素對(duì)象。 |
content
|
String
|
instance
|
被插入的 HTML 。 |
這個(gè)對(duì)象是其他類似功能的根。它沒有任何屬性和方法。在這個(gè)對(duì)象中定義的類仍然可以被視為傳統(tǒng)的抽象類。
繼承自 Abstract.Insertion
在給定元素開始標(biāo)記的前面插入HTML。
Table?2.24.?Insertion.Before 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, content)
|
constructor
|
element: 元素對(duì)象或id, content: 被插入的HTML |
繼承自 Abstract.Insertion. 創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
下面的代碼
<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.Before('person', 'Chief '); </script>
將把 HTML 變?yōu)?/p>
<br>Hello, Chief <span id="person" style="color:red;">Wiggum. How's it going?</span>
繼承自 Abstract.Insertion
在給定元素第一個(gè)子節(jié)點(diǎn)位置插入 HTML。內(nèi)容將位于元素的開始標(biāo)記的緊后面。
Table?2.25.?Insertion.Top 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, content)
|
constructor
|
element: 元素對(duì)象或id, content: 被插入的HTML |
繼承自 Abstract.Insertion. 創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
下面的代碼
<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.Top('person', 'Mr. '); </script>
將把 HTML 變?yōu)?/p>
<br>Hello, <span id="person" style="color:red;">Mr. Wiggum. How's it going?</span>
繼承自 Abstract.Insertion
在給定元素最后一個(gè)子節(jié)點(diǎn)位置插入 HTML。內(nèi)容將位于元素的結(jié)束標(biāo)記的緊前面。
Table?2.26.?Insertion.Bottom 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, content)
|
constructor
|
element: 元素對(duì)象或id, content: 被插入的HTML |
繼承自 Abstract.Insertion. 創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
下面的代碼
<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.Bottom('person', " What's up?"); </script>
將把 HTML 變?yōu)?/p>
<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>
繼承自 Abstract.Insertion
在給定元素結(jié)束標(biāo)記的后面插入HTML。
Table?2.27.?Insertion.After 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, content)
|
constructor
|
element: 元素對(duì)象或id, content: 被插入的HTML |
繼承自 Abstract.Insertion. 創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
下面的代碼
<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.After('person', ' Are you there?'); </script>
將把 HTML 變?yōu)?/p>
<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> Are you there?
這個(gè)對(duì)象提供操作表單中的輸入項(xiàng)目的功能性方法。
Table?2.28.?Field 對(duì)象
方法 |
類別 |
參數(shù) |
描述 |
clear(field1 [, field2 [, field3 [...]]])
|
instance
|
fieldN: 元素對(duì)象或id |
清除傳入表單中項(xiàng)目元素的值。 |
present(field1 [, field2 [, field3 [...]]])
|
instance
|
fieldN: 元素對(duì)象或id |
只有在所有的表單項(xiàng)目都不為空時(shí)返回 true 。 |
focus(field)
|
instance
|
fieldN: 元素對(duì)象或id |
移動(dòng)焦點(diǎn)到給定的表單項(xiàng)目。 |
select(field)
|
instance
|
fieldN: 元素對(duì)象或id |
選擇支持項(xiàng)目值選擇的表單項(xiàng)目的值。 |
activate(field)
|
instance
|
fieldN: 元素對(duì)象或id |
移動(dòng)焦點(diǎn)并且選擇支持項(xiàng)目值選擇的表單項(xiàng)目的值。 |
這個(gè)對(duì)象提供操作表單和他們的輸入項(xiàng)目的功能性方法。
Table?2.29.?Form 對(duì)象
方法 |
類別 |
參數(shù) |
描述 |
serialize(form)
|
instance
|
form: 表單元素或id |
返回url參數(shù)格式的項(xiàng)目名和值的列表, 如'field1=value1&field2=value2&field3=value3'。 |
getElements(form)
|
instance
|
form: 表單元素或id |
返回包含所有在表單中輸入項(xiàng)目的 Array 對(duì)象。 |
getInputs(form [, typeName [, name]])
|
instance
|
form: 表單元素或id, typeName: 輸入項(xiàng)目的類型, name: 輸入項(xiàng)目的名稱 |
返回一個(gè) Array 包含所有在表單中的 <input> 元素。 另外, 這個(gè)列表可以對(duì)元素的類型或名字屬性進(jìn)行過濾。 |
disable(form)
|
instance
|
form: 表單元素或id |
使表單中的所有輸入項(xiàng)目無效。 |
enable(form)
|
instance
|
form: 表單元素或id |
使表單中的所有輸入項(xiàng)目有效。 |
focusFirstElement(form)
|
instance
|
form: 表單元素或id |
激活第一個(gè)表單中可視的,有效的輸入項(xiàng)目。 |
reset(form)
|
instance
|
form: 表單元素或id |
重置表單。和調(diào)用表單對(duì)象的 reset() 方法一樣。 |
2.28.?Form.Element 對(duì)象
這個(gè)對(duì)象提供表單對(duì)象中的可視和非可視元素的功能性方法。
Table?2.30.?Form.Element 對(duì)象
方法 |
類別 |
參數(shù) |
描述 |
serialize(element)
|
instance
|
element: 表單元素或id |
返回元素的 名稱=值 對(duì), 如 'elementName=elementValue'。 |
getValue(element)
|
instance
|
element: 表單元素或id |
返回元素的值。 |
2.29.?Form.Element.Serializers 對(duì)象
這個(gè)對(duì)象提供了內(nèi)部使用的用來協(xié)助解析出表單元素的當(dāng)前值功能性方法。
Table?2.31.?Form.Element.Serializers 對(duì)象
方法 |
類別 |
參數(shù) |
描述 |
inputSelector(element)
|
instance
|
element: 一個(gè)帶有checked屬性的表單元素或id, 如 radio 或 checkbox。 |
返回帶有元素名稱和值的 Array , 如 ['elementName', 'elementValue'] |
textarea(element)
|
instance
|
element: 一個(gè)帶有value屬性的表單元素或id, 如 textbox, button 或 password 項(xiàng)目。 |
返回帶有元素名稱和值的 Array , 如 ['elementName', 'elementValue'] |
select(element)
|
instance
|
element: 一個(gè)<select> 元素對(duì)象或id。 |
返回帶有元素名稱和所有被選擇的選項(xiàng)的值或文本的 Array , 如 ['elementName', 'selOpt1 selOpt4 selOpt9'] |
2.30.?Abstract.TimedObserver 類
這個(gè)類是用于其它監(jiān)聽一個(gè)元素的值(或者任何類中涉及的屬性)變化的類的基類,這個(gè)類像一個(gè)抽象類一樣被使用。
子類可以被創(chuàng)建來監(jiān)聽如輸入項(xiàng)目值,或style屬性,或表格的行數(shù),或者其他任何對(duì)跟蹤變化相關(guān)的東西。
子類必須實(shí)現(xiàn)這個(gè)方法來決定什么才是被監(jiān)聽的元素的當(dāng)前值。
Table?2.32.?Abstract.TimedObserver 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, frequency, callback)
|
constructor
|
element: 元素對(duì)象或id, frequency: 以秒為單位的間隔, callback: 當(dāng)元素改變的時(shí)候調(diào)用的方法。 |
創(chuàng)建一個(gè)監(jiān)聽元素的對(duì)象。 |
registerCallback()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 被這個(gè)對(duì)象自己調(diào)用來開始監(jiān)聽那個(gè)元素。 |
onTimerEvent()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 被這個(gè)對(duì)象自己調(diào)用來周期性的檢查那個(gè)元素。 |
Table?2.33.?Abstract.TimedObserver 類
屬性 |
類型 |
描述 |
element
|
Object
|
被監(jiān)聽的元素對(duì)象。 |
frequency
|
Number
|
每次檢查中的以秒為單位的時(shí)間間隔。 |
callback
|
Function(Object, String)
|
只要元素改變這個(gè)方法就會(huì)被調(diào)用。 會(huì)接收到元素對(duì)象和新值作為參數(shù)。 |
lastValue
|
String
|
元素被核實(shí)的最后一個(gè)值。 |
2.31.?Form.Element.Observer 類
繼承自 Abstract.TimedObserver
Abstract.TimedObserver 的一個(gè)實(shí)現(xiàn)類用來監(jiān)聽表單輸入項(xiàng)目的值的變化。當(dāng)你想監(jiān)聽一個(gè)沒有帶報(bào)告值變化事件的元素的時(shí)候使用這個(gè)類。否則的話使用 Form.Element.EventObserver類代替。
Table?2.34.?Form.Element.Observer 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, frequency, callback)
|
constructor
|
element: 元素對(duì)象或id, frequency: 以秒為單位的間隔, callback: 當(dāng)元素改變的時(shí)候調(diào)用的方法。 |
繼承自 Abstract.TimedObserver. 創(chuàng)建一個(gè)監(jiān)聽元素值屬性的對(duì)象。 |
getValue()
|
instance
|
(none)
|
返回元素的值。 |
繼承自 Abstract.TimedObserver
Abstract.TimedObserver 的一個(gè)實(shí)現(xiàn)類用來監(jiān)聽表單中任何數(shù)據(jù)項(xiàng)的值的變化。當(dāng)你想監(jiān)聽一個(gè)沒有帶報(bào)告值變化事件的元素的時(shí)候使用這個(gè)類。 否則的話使用類Form.EventObserver代替。
Table?2.35.?Form.Observer 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](form, frequency, callback)
|
constructor
|
form: 表單對(duì)象或id, |
繼承自 Abstract.TimedObserver. 創(chuàng)建一個(gè)監(jiān)聽表單變化的對(duì)象。 |
getValue()
|
instance
|
(none)
|
返回所有表單數(shù)據(jù)的一系列值。 |
2.33.?Abstract.EventObserver 類
這個(gè)類被用作其他一些類的基類,這些類具有在一個(gè)元素的值改變事件發(fā)生的時(shí)候執(zhí)行一個(gè)回調(diào)方法這樣的功能。
類 Abstract.EventObserver 的多個(gè)對(duì)象可以綁定到一個(gè)元素上,不是一個(gè)幫其他的擦出了,而是按照他們付給元素的順序執(zhí)行這些回調(diào)方法。
單選按鈕和復(fù)選框的觸發(fā)事件是 onclick ,而文本框和下拉列表框/下拉列表框的是 onchange 。
子類必須實(shí)現(xiàn)這個(gè)方法來決定什么才是被監(jiān)聽的元素的當(dāng)前值。
Table?2.36.?Abstract.EventObserver 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, callback)
|
constructor
|
element: 元素對(duì)象或id, callback: 當(dāng)事件發(fā)生的時(shí)候調(diào)用的方法。 |
創(chuàng)建監(jiān)聽元素的對(duì)象。 |
registerCallback()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 被對(duì)象調(diào)用來把自己綁定到元素的事件上。 |
registerFormCallbacks()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 被對(duì)象調(diào)用來把自己綁定到表單中的每一個(gè)數(shù)據(jù)項(xiàng)元素的事件上。 |
onElementEvent()
|
instance
|
(none)
|
這個(gè)方法通常不會(huì)被外部調(diào)用。 將被綁定到元素的事件上。 |
Table?2.37.?Abstract.EventObserver 類
屬性 |
類型 |
描述 |
element
|
Object
|
被監(jiān)聽的元素對(duì)象。 |
callback
|
Function(Object, String)
|
只要元素改變就調(diào)用的方法。會(huì)接收到元素對(duì)象和新值作為參數(shù)。 |
lastValue
|
String
|
元素被核實(shí)的最后一個(gè)值。 |
2.34.?Form.Element.EventObserver 類
繼承自 Abstract.EventObserver
Abstract.EventObserver 的一個(gè)實(shí)現(xiàn)類,它在監(jiān)測到表單中數(shù)據(jù)項(xiàng)元素的值改變的相應(yīng)事件時(shí)候執(zhí)行一個(gè)回調(diào)方法。 如果元素沒有任何報(bào)告變化的事件,那么你可以使用 Form.Element.Observer類代替。
Table?2.38.?Form.Element.EventObserver 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](element, callback)
|
constructor
|
element: 元素對(duì)象或id, callback: 當(dāng)事件發(fā)生的時(shí)候調(diào)用的方法。 |
繼承自 Abstract.EventObserver。 創(chuàng)建一個(gè)監(jiān)聽元素值屬性的對(duì)象。 |
getValue()
|
instance
|
(none)
|
返回元素的值。 |
2.35.?Form.EventObserver 類
繼承自 Abstract.EventObserver
Abstract.EventObserver 的一個(gè)實(shí)現(xiàn)類,監(jiān)聽表單對(duì)象中包含的任何對(duì)象的任何變化,用元素的事件檢測值的變化。如果元素沒有任何報(bào)告變化的事件, 那么你可以使用Form.Observer類代替。
Table?2.39.?Form.Element.EventObserver 類
方法 |
類別 |
參數(shù) |
描述 |
[ctor](form, callback)
|
constructor
|
form: 元素對(duì)象或id, callback: 當(dāng)表單中任何數(shù)據(jù)項(xiàng)改變的時(shí)候調(diào)用的方法 |
繼承自 Abstract.EventObserver。 創(chuàng)建一個(gè)監(jiān)聽元素值屬性的對(duì)象。 |
getValue()
|
instance
|
(none)
|
返回所有表單數(shù)據(jù)的一系列值。 |
2.36.?Position 對(duì)象 (預(yù)備文檔)
這個(gè)對(duì)象提供許多和元素位置相關(guān)的方法。
Table?2.40.?Position 對(duì)象 (預(yù)備文檔)
方法 |
類別 |
參數(shù) |
描述 |
prepare()
|
instance
|
(none)
|
調(diào)整 deltaX 和 deltaY 屬性來協(xié)調(diào)在滾動(dòng)位置中的變化。 記得在頁面滾動(dòng)之后的任何調(diào)用的withinIncludingScrolloffset 之前調(diào)用這個(gè)方法。 |
realOffset(element)
|
instance
|
element: 對(duì)象或id |
返回這個(gè)元素的正確滾動(dòng)偏差的 Array 對(duì)象, 包括所有影響元素的滾動(dòng)偏差。結(jié)果數(shù)組類似 [total_scroll_left, total_scroll_top] |
cumulativeOffset(element)
|
instance
|
element: 對(duì)象或id |
回這個(gè)元素的正確滾動(dòng)偏差的 Array 對(duì)象, 包含任何被放置的父元素強(qiáng)加偏差。結(jié)果數(shù)組類似 [total_offset_left, total_offset_top] |
within(element, x, y)
|
instance
|
element: 對(duì)象, x 和 y: 一個(gè)點(diǎn)的坐標(biāo) |
測試給定的點(diǎn)的坐標(biāo)是否在給定的元素的外部矩形范圍之內(nèi)。 |
withinIncludingScrolloffsets(element, x, y)
|
instance
|
element: object, x and y: coordinates of a point |
? |
overlap(mode, element)
|
instance
|
mode: 'vertical' 或 'horizontal', element: 對(duì)象 |
在調(diào)用這個(gè)方法之前需要調(diào)用within() 。這個(gè)方法返回0.0到1.0之間的數(shù)字,來表示坐標(biāo)在元素重疊的分?jǐn)?shù)。 舉個(gè)例子,如果元素是一個(gè)邊長是100px的正方形的DIV,并且位于(300, 300), 然后 within(divSquare, 330, 330);overlap('vertical', divSquare); 會(huì)返回 0.10,意思是那個(gè)點(diǎn)位于DIV頂部邊框以下 10% (30px) 的位置上。 |
clone(source, target)
|
instance
|
source: 元素對(duì)象或 id, target: 元素對(duì)象或id |
改變目標(biāo)元素的大小尺寸和位置與源元素的相同。 |