跳至主要內容

[javascript] prototype.js 基本用法

document.getElementById(“id_of_element”).style.color = “#ffffff”;
同下
$(“id_of_element”).setStyle({color: ‘#ffffff’});
$() 等同於document.getElementById()
$F() 可以傳回任何 form內元素的value
$A() 用來轉換 DOM NodeLists(如options)為 arrays
$H() 將array物件轉換成 Hash List
$R() new ObjectRange(lowerBound, upperBound, excludeBounds) 的簡化寫法
Try.these() 以一連串的 functions為參數,依次呼叫直到某一個function正確傳回結果
var d = $(‘myDiv1’); -> 取得一個元素
var divs = $(‘myDiv1′,’myDiv2’);-> 取得元素陣列
alert( $F(‘userName’) ); -> 取得 userName.value;
var someNodeList = $(‘lstEmployees’).getElementsByTagName(‘option’); -> 取得options的 list
var nodes = $A(someNodeList); -> 將 list轉換成array
nodes.each(function(node){ -> traversal
alert(node.nodeName + ‘: ‘ + node.innerHTML);
});
var h = $H(a); -> 將 array 轉換成 Hash
alert( h.toQueryString() ); //displays: first=10&second=20&third=30
var range = $R(10, 20, false); -> ObjectRange繼承Enumerable,可產生10到 20的list物件
range.each(function(value, index){ -> 以 each 方法 iterate 所有物件
alert(“range[“+index+”]=”+value);
// 產生 XMLHttpRequest 物件,設定URL, GET Method,參數為pars,取得結果時呼叫 showResponse
var myAjax = new Ajax.Request(url, {method: ‘get’, parameters: pars, onComplete: showResponse});
}
function showResponse(originalRequest) {
//put returned XML in the textarea
$(‘result’).value = originalRequest.responseText;
}
使用Try.these()方法
Try.these() 方法使得實現當你想調用不同的方法直到其中的一個成功正常的這種需求變得非常容易, 他把一系列的方法作為參數並且按順序的一個一個的執行這些方法直到其中的一個成功執行,返回成功執行的那個方法的返回值。
在下面的例子中, xmlNode.text在一些瀏覽器中好用,但是xmlNode.textContent在另一些瀏覽器中正常工作。 使用Try.these()方法我們可以得到正常工作的那個方法的返回值。
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
$$(‘div’);
// -> all DIVs in the document. Same as document.getElementsByTagName(‘div’).
// Nice addition, the elements you’re getting back are already extended!
$$(‘#contents’);
// -> same as $(‘contents’), only it returns an array anyway (even though IDs must
// be unique within a document).
$$(‘li.faux’);
// -> all LI elements with class ‘faux’
reference: http://jjnnykimo.pixnet.net/blog/post/21585189-prototype.js%E7%B0%A1%E6%98%93%E8%AA%AA%E6%98%8E

分類:javascript
由 Compete Themes 設計的 Author 佈景主題