prototype.js鏄粈涔?

涓囦竴浣犳病鏈変嬌鐢ㄨ繃澶у悕榧庨紟鐨刾rototype.js錛岄偅涔堣鎴戞潵鍛婅瘔浣狅紝prototype.js鏄敱Sam Stephenson鍐欑殑涓涓猨avascript綾誨簱銆傝繖涓瀯鎬濆濡欙紝鑰屼笖鍏煎鏍囧噯鐨勭被搴擄紝鑳藉府鍔╀綘杞繪澗寤虹珛鏈夐珮搴︿簰鍔ㄧ殑web2.0鐗規х殑瀵屽鎴風欏甸潰銆?/p>

濡傛灉浣犳渶榪戝皾璇曚嬌鐢ㄥ畠錛屼綘澶ф浜嗚В鍒版枃妗ｅ茍涓嶆槸浣滆呯殑涓涓己欏廣傚拰鍦ㄦ垜浠ュ墠浣跨敤榪欎釜綾誨簱鐨勪笉灝戝紑鍙戣呬竴鏍鳳紝涓寮濮嬶紝鎴戜笉寰椾笉涓澶存墡榪涢槄璇籶rototype.js鐨勬簮浠ｇ爜鍜屽疄楠屽畠鐨勫姛鑳戒腑銆傛垜鎯籌紝鍦ㄦ垜瀛︿範瀹屽畠涔嬪悗錛屾妸鎴戝鍒扮殑涓滆タ鍒嗕韓緇欏ぇ瀹舵槸浠朵笉閿欑殑浜嬨?

鍚屾椂錛屽湪鏈枃涓紝鎴戜篃灝嗘彁渚涗竴涓叧浜庤繖涓被搴撴彁渚涚殑objects,classes,functions,extensions榪欏涓滀笢鐨?a >闈炲畼鏂瑰弬鑰?/a>

鍦ㄩ槄璇昏繖涓枃妗ｆ椂錛岀啛鎮塕uby鐨勫紑鍙戣呭皢浼氭敞鎰忓埌Ruby鐨勪竴浜涘唴寤虹被鍜屾湰綾誨簱鎵╁睍瀹炵幇涔嬮棿闈炲父鐩鎬技銆?

鐩稿叧鏂囩珷

Advanced JavaScript guide.

涓浜涘疄鐢ㄧ殑鍑芥暟

榪欎釜綾誨簱甯︽湁寰堝棰勫畾涔夌殑瀵硅薄鍜屽疄鐢ㄥ嚱鏁幫紝榪欎簺涓滀笢鐨勭洰鐨勬樉鐒舵槸鎶婁綘浠庝竴浜涢噸澶嶇殑鎵撳瓧涓В鏀懼嚭鏉?銆?

浣跨敤$()鏂規硶

$() 鏂規硶鏄湪DOM涓嬌鐢ㄨ繃浜庨綣佺殑 document.getElementById() 鏂規硶鐨勪竴涓究鍒╃殑綆鍐欙紝灝卞儚榪欎釜DOM鏂規硶涓鏍鳳紝榪欎釜鏂規硶榪斿洖鍙傛暟浼犲叆鐨刬d鐨勯偅涓厓绱犮?/p>

姣旇搗DOM涓殑鏂規硶錛岃繖涓洿鑳滀竴絳廣備綘鍙互浼犲叆澶氫釜id浣滀負鍙傛暟鐒跺悗 $() 榪斿洖涓涓甫鏈夋墍鏈夎姹傜殑鍏冪礌鐨勪竴涓?Array 瀵硅薄銆?/p> 

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3.1.js"></script>
<script>
function test1()
{
var d = $('myDiv');
alert(d.innerHTML);
}
function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<divs.length; i++)
{
alert(divs[i].innerHTML);
}
}
</script>
</HEAD>
<BODY>
<div id="myDiv">
<p>This is a paragraph</p>
</div>
<div id="myOtherDiv">
<p>This is another paragraph</p>
</div>
<input type="button" value=Test1 onclick="test1();"><br>
<input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>

鍙﹀涓涓ソ澶勬槸錛岃繖涓嚱鏁拌兘浼犲叆鐢╯tring琛ㄧず鐨勫璞D錛屼篃鍙互浼犲叆瀵硅薄鏈韓錛岃繖鏍鳳紝鍦ㄥ緩绔嬪叾瀹冭兘浼犱袱縐嶇被鍨嬬殑鍙傛暟鐨勫嚱鏁版椂闈炲父鏈夌敤銆?/p>

浣跨敤$F()鍑芥暟

$F()鍑芥暟鏄彟涓涓ぇ鏀舵榪庣殑鈥滃揩鎹烽敭鈥濓紝瀹冭兘鐢ㄤ簬榪斿洖浠諱綍琛ㄥ崟杈撳叆鎺т歡鐨勫鹼紝姣斿text box,drop-down list銆傝繖涓柟娉曚篃鑳界敤鍏冪礌id鎴栧厓绱犳湰韜仛涓哄弬鏁般?

<script>
function test3()
{
alert(  $F('userName')  );
}
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>

浣跨敤$A()鍑芥暟

$A()鍑芥暟鑳芥妸瀹冩帴鏀跺埌鐨勫崟涓殑鍙傛暟杞崲鎴愪竴涓狝rray瀵硅薄銆?/p>

榪欎釜鏂規硶錛岀粨鍚堣鏈被搴撴墿灞曚簡鐨凙rray綾伙紝鑳芥柟渚跨殑鎶婁換浣曠殑鍙灇涓懼垪琛ㄨ漿鎹㈡垚鎴栨嫹璐濆埌涓涓狝rray瀵硅薄銆備竴涓帹鑽愮殑鐢ㄦ硶灝辨槸鎶奃OM Node Lists杞崲鎴愪竴涓櫘閫氱殑Array瀵硅薄錛屼粠鑰屾洿鏈夋晥鐜囩殑榪涜閬嶅巻錛岃鐪嬩笅闈㈢殑渚嬪瓙銆?/p> 

<script>
function showOptions(){
var someNodeList = $('lstEmployees').getElementsByTagName('option');
var nodes = $A(someNodeList);
nodes.each(function(node){
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>
<select id="lstEmployees" size="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Show the options" onclick="showOptions();" >

浣跨敤聽$H() 鍑芥暟

$H()鍑芥暟鎶婁竴浜涘璞¤漿鎹㈡垚涓涓彲鏋氫婦鐨勫拰鑱斿悎鏁扮粍綾諱技鐨凥ash瀵硅薄銆?/p> 

<script>
function testHash()
{
//let's create the object
var a = {
first: 10,
second: 20,
third: 30
};
//now transform it into a hash
var h = $H(a);
alert(h.toQueryString()); //displays: first=10&second=20&third=30
}
</script>

浣跨敤$R()鍑芥暟

$R()鏄痭ew ObjectRange(lowBound,upperBound,excludeBounds)鐨勭緝鍐欍?/p>

璺沖埌ObjectRange 綾繪枃妗ｅ彲浠ョ湅鍒頒竴涓叧浜庢綾葷殑瀹屾暣鎻忚堪. 姝ゆ椂錛屾垜浠繕鏄厛鏉ョ湅涓涓緥瀛愪互灞曠ず榪欎釜緙╁啓鑳戒唬鏇垮摢浜涙柟娉曞惂銆傚叾瀹冪浉鍏崇殑涓浜涚煡璇嗗彲浠ュ湪Enumerable 瀵硅薄鏂囨。涓壘鍒般?/p> 

<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}
</script>
<input type="button" value="Sample Count" onclick="demoDollar_R();" >

浣跨敤Try.these()鍑芥暟

Try.these() 鏂規硶浣垮緱瀹炵幇褰撲綘鎯寵皟鐢ㄤ笉鍚岀殑鏂規硶鐩村埌鍏朵腑鐨勪竴涓垚鍔熸甯哥殑榪欑闇姹傚彉寰楅潪甯稿鏄擄紝 浠栨妸涓緋誨垪鐨勬柟娉曚綔涓哄弬鏁板茍涓旀寜欏哄簭鐨勪竴涓竴涓殑鎵ц榪欎簺鏂規硶鐩村埌鍏朵腑鐨勪竴涓垚鍔熸墽琛岋紝榪斿洖鎴愬姛鎵ц鐨勯偅涓柟娉曠殑榪斿洖鍊箋?/p>

鍦ㄤ笅闈㈢殑渚嬪瓙涓紝 xmlNode.text鍦ㄤ竴浜涙祻瑙堝櫒涓ソ鐢紝浣嗘槸xmlNode.textContent鍦ㄥ彟涓浜涙祻瑙堝櫒涓甯稿伐浣溿?浣跨敤Try.these()鏂規硶鎴戜滑鍙互寰楀埌姝ｅ父宸ヤ綔鐨勯偅涓柟娉曠殑榪斿洖鍊箋?/p>

<script>
function getXmlNodeValue(xmlNode){
聽聽聽 return Try.these(
聽聽聽聽聽聽聽 function() {return xmlNode.text;},
聽聽聽聽聽聽聽 function() {return xmlNode.textContent;)
聽聽聽聽聽聽聽 );
}
</script>
聽聽

Ajax瀵硅薄

涓婇潰鎻愬埌鐨勫叡閫氭柟娉曢潪甯稿ソ錛屼絾鏄潰瀵瑰畠鍚э紝瀹冧滑涓嶆槸鏈楂樼駭鐨勯偅綾諱笢瑗褲傚畠浠槸鍚楋紵浣犲緢鍙兘鑷繁緙栧啓浜嗚繖浜涚敋鑷沖湪浣犵殑鑴氭湰閲岄潰鏈夌被浼煎姛鑳界殑鏂規硶銆備絾鏄繖浜涙柟娉曞彧鏄啺灞變竴瑙掋?/p>

鎴戝緢鑲畾浣犲prototype.js鎰熷叴瓚ｇ殑鍘熷洜寰堝彲鑳芥槸鐢變簬瀹冪殑AJAX鑳藉姏銆傛墍浠ヨ鎴戜滑瑙ｉ噴褰撲綘闇瑕佸畬鎴怉JAX閫昏緫鐨勬椂鍊欙紝榪欎釜鍖呭浣曡瀹冩洿瀹規槗銆?/p>

Ajax 瀵硅薄鏄竴涓瀹氫箟瀵硅薄錛岀敱榪欎釜鍖呭垱寤猴紝涓轟簡灝佽鍜岀畝鍖栫紪鍐?a target="_top">AJAX 鍔熻兘娑夊強鐨勭嫛鐚劇殑浠ｇ爜銆?榪欎釜瀵硅薄鍖呭惈涓緋誨垪鐨勫皝瑁匒JAX閫昏緫鐨勭被銆傛垜浠潵鐪嬬湅鍏朵腑鍑犱釜綾匯?!--- -->

浣跨敤Ajax.Request綾?/h4>

濡傛灉浣犱笉浣跨敤浠諱綍鐨勫府鍔╃▼搴忓寘錛屼綘寰堝彲鑳界紪鍐欎簡鏁翠釜澶ч噺鐨勪唬鐮佹潵鍒涘緩XMLHttpRequest瀵硅薄騫朵笖寮傛鐨勮窡韙畠鐨勮繘紼嬶紝 鐒跺悗瑙ｆ瀽鍑哄搷搴?鐒跺悗澶勭悊瀹冦傚綋浣犱笉闇瑕佹敮鎸佸浜庝竴縐嶇被鍨嬬殑嫻忚鍣ㄦ椂浣犱細鎰熷埌闈炲父鐨勫垢榪愩?/p>

涓轟簡鏀寔 AJAX 鍔熻兘銆傝繖涓寘瀹氫箟浜?Ajax.Request 綾匯?/p>

鍋囧浣犳湁涓涓簲鐢ㄧ▼搴忓彲浠ラ氳繃url http://yoursever/app/get_sales?empID=1234&year=1998涓庢湇鍔″櫒閫氫俊銆傚畠榪斿洖涓嬮潰榪欐牱鐨刋ML 鍝嶅簲銆?/p> 

<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" id="productDetails">
<monthly-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>
</employee-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-02</year-month>
<sales>$11,147.51</sales>
</employee-sales>
</monthly-sales>
</response>
</ajax-response>

鐢?Ajax.Request瀵硅薄鍜屾湇鍔″櫒閫氫俊騫朵笖寰楀埌榪欐XML鏄潪甯哥畝鍗曠殑銆備笅闈㈢殑渚嬪瓙婕旂ず浜嗗畠鏄浣曞畬鎴愮殑銆?/p> 

<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;


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;
}
</script>
<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>

浣犳敞鎰忓埌浼犲叆 Ajax.Request鏋勯犳柟娉曠殑絎簩涓璞′簡鍚楋紵 鍙傛暟{method: 'get', parameters: pars, onComplete: showResponse} 琛ㄧず涓涓尶鍚嶅璞＄殑鐪熷疄鍐欐硶銆備粬琛ㄧず浣犱紶鍏ョ殑榪欎釜瀵硅薄鏈変竴涓悕涓?method 鍊間負 'get'鐨勫睘鎬э紝鍙︿竴涓睘鎬у悕涓?parameters 鍖呭惈HTTP璇鋒眰鐨勬煡璇㈠瓧絎︿覆錛屽拰涓涓?tt class="literal">onComplete 灞炴?鏂規硶鍖呭惈鍑芥暟showResponse銆?

榪樻湁涓浜涘叾瀹冪殑灞炴у彲浠ュ湪榪欎釜瀵硅薄閲岄潰瀹氫箟鍜岃緗紝濡?asynchronous錛屽彲浠ヤ負true 鎴?false 鏉ュ喅瀹欰JAX瀵規湇鍔″櫒鐨勮皟鐢ㄦ槸鍚︽槸寮傛鐨勶紙榛樿鍊兼槸 true錛夈?/p>

榪欎釜鍙傛暟瀹氫箟AJAX璋冪敤鐨勯夐」銆傚湪鎴戜滑鐨勪緥瀛愪腑錛屽湪絎竴涓弬鏁伴氳繃HTTP GET鍛戒護璇鋒眰閭ｄ釜url錛屼紶鍏ヤ簡鍙橀噺 pars鍖呭惈鐨勬煡璇㈠瓧絎︿覆錛?Ajax.Request 瀵硅薄鍦ㄥ畠瀹屾垚鎺ユ敹鍝嶅簲鐨勬椂鍊欏皢璋冪敤showResponse 鏂規硶銆?/p>

涔熻浣犵煡閬擄紝 XMLHttpRequest鍦℉TTP璇鋒眰鏈熼棿灝嗘姤鍛婅繘搴︽儏鍐點傝繖涓繘搴﹁鎻忚堪涓哄洓涓笉鍚岄樁孌碉細Loading, Loaded, Interactive, 鎴?Complete銆備綘鍙互浣?Ajax.Request 瀵硅薄鍦ㄤ換浣曢樁孌佃皟鐢ㄨ嚜瀹氫箟鏂規硶 錛?span class="emphasis">Complete 鏄渶甯哥敤鐨勪竴涓傛兂璋冪敤鑷畾涔夌殑鏂規硶鍙渶瑕佺畝鍗曠殑鍦ㄨ姹傜殑閫夐」鍙傛暟涓殑鍚嶄負 onXXXXX 灞炴?鏂規硶涓彁渚涜嚜瀹氫箟鐨勬柟娉曞璞°?灝卞儚鎴戜滑渚嬪瓙涓殑 onComplete 銆備綘浼犲叆鐨勬柟娉曞皢浼氳鐢ㄤ竴涓弬鏁拌皟鐢紝榪欎釜鍙傛暟鏄?XMLHttpRequest 瀵硅薄鑷繁銆備綘灝嗕細鐢ㄨ繖涓璞″幓寰楀埌榪斿洖鐨勬暟鎹茍涓旀垨璁告鏌ュ寘鍚湁鍦ㄨ繖嬈¤皟鐢ㄤ腑鐨凥TTP緇撴灉浠ｇ爜鐨?status 灞炴с?/p>

榪樻湁鍙﹀涓や釜鏈夌敤鐨勯夐」鐢ㄦ潵澶勭悊緇撴灉銆傛垜浠彲浠ュ湪onSuccess 閫夐」澶勪紶鍏ヤ竴涓柟娉曪紝褰揂JAX鏃犺鐨勬墽琛屽畬鍚庤皟鐢紝 鐩稿弽鐨勶紝涔熷彲浠ュ湪onFailure閫夐」澶勪紶鍏ヤ竴涓柟娉曪紝褰撴湇鍔″櫒绔嚭鐜伴敊璇椂璋冪敤銆傛濡?tt class="literal">onXXXXX 閫夐」浼犲叆鐨勬柟娉曚竴鏍鳳紝榪欎袱涓湪琚皟鐢ㄧ殑鏃跺欎篃浼犲叆涓涓甫鏈堿JAX璇鋒眰鐨?tt class="literal">XMLHttpRequest瀵硅薄銆?/tt>

鎴戜滑鐨勪緥瀛愭病鏈夌敤浠諱綍鏈夎叮鐨勬柟寮忓鐞嗚繖涓?XML鍝嶅簲錛?鎴戜滑鍙槸鎶婅繖孌礨ML鏀捐繘浜嗕竴涓枃鏈煙閲岄潰銆傚榪欎釜鍝嶅簲鐨勪竴涓吀鍨嬬殑搴旂敤寰堝彲鑳藉氨鏄壘鍒板叾涓殑鎯寵鐨勪俊鎭紝鐒跺悗鏇存柊欏甸潰涓殑鏌愪簺鍏冪礌錛?鎴栬呯敋鑷沖彲鑳藉仛鏌愪簺XSLT杞崲鑰屽湪欏甸潰涓駭鐢熶竴浜汬TML銆?/p>

聽鍦?.4.0鐗堟湰涓紝涓縐嶆柊鐨勪簨浠跺洖浼犲鐞嗚寮曞叆銆傚鏋滀綘鏈変竴孌典唬鐮佹繪槸瑕佷負涓涓壒孌婄殑浜嬩歡鎵ц錛岃屼笉綆℃槸鍝釜AJAX璋冪敤寮曞彂瀹冿紝閭ｄ箞浣犲彲浠ヤ嬌鐢ㄦ柊鐨?a >Ajax.Responders瀵硅薄銆?/p>

鍋囪浣犳兂瑕佸湪涓涓狝JAX璋冪敤姝ｅ湪榪愯鏃訛紝鏄劇ず涓浜涙彁紺烘晥鏋滐紝鍍忎竴涓笉鏂漿鍔ㄧ殑鍥炬爣涔嬬被鐨勶紝浣犲彲浠ヤ嬌鐢ㄤ袱涓叏灞浜嬩歡Handler鏉ュ仛鍒幫紝鍏朵腑涓涓湪絎竴涓皟鐢ㄥ紑濮嬫椂鏄劇ず鍥炬爣錛屽彟涓涓湪鏈鍚庝竴涓皟鐢ㄥ畬鎴愭椂闅愯棌鍥炬爣銆傜湅涓嬮潰鐨勪緥瀛愩?/p> 

<script>
var myGlobalHandlers = {
onCreate: function(){
Element.show('systemWorking');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('systemWorking');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
</script>
<div id='systemWorking'><img src='spinner.gif'>Loading...</div>

鏇村畬鍏ㄧ殑瑙ｉ噴錛岃鍙傜収 Ajax閫夐」鍙傝?/a>銆?/p>

浣跨敤Ajax.Updater綾?/h4>

濡傛灉浣犵殑鏈嶅姟鍣ㄧ殑鍙︿竴绔繑鍥炵殑淇℃伅宸茬粡鏄疕TML浜嗭紝閭ｄ箞浣跨敤榪欎釜紼嬪簭鍖呬腑 Ajax.Updater 綾誨皢浣夸綘鐨勭敓媧誨彉寰楁洿鍔犲緱瀹規槗銆傜敤瀹冧綘鍙渶鎻愪緵鍝竴涓厓绱犻渶瑕佽AJAX璇鋒眰榪斿洖鐨凥TML濉厖灝卞彲浠ヤ簡錛屼緥瀛愭瘮鎴戝啓璇存槑鐨勬洿娓呮銆偮?/p> 

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';


var myAjax = new Ajax.Updater(
'placeholder',
url,
{
method: 'get',
parameters: pars
});


}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

浣犲彲浠ョ湅鍒幫紝榪欐浠ｇ爜姣斿墠闈㈢殑渚嬪瓙鏇村姞綆媧侊紝涓嶅寘鎷?onComplete 鏂規硶錛屼絾鏄湪鏋勯犳柟娉曚腑浼犲叆浜嗕竴涓厓绱爄d銆?鎴戜滑鏉ョ◢紼嶄慨鏀逛竴涓嬩唬鐮佹潵鎻忚堪濡備綍鍦ㄥ鎴風澶勭悊鏈嶅姟鍣ㄦ閿欒鎴愪負鍙兘銆?/p>

鎴戜滑灝嗗姞鍏ユ洿澶氱殑閫夐」錛?鎸囧畾澶勭悊閿欒鐨勪竴涓柟娉曘傝繖涓槸鐢?onFailure 閫夐」鏉ュ畬鎴愮殑銆傛垜浠篃鎸囧畾浜嗕竴涓?placeholder 鍙湁鍦ㄦ垚鍔熻姹備箣鍚庢墠浼氳濉厖銆備負浜嗗畬鎴愯繖涓洰鐨勬垜浠慨鏀逛簡絎竴涓弬鏁頒粠涓涓畝鍗曠殑鍏冪礌id鍒頒竴涓甫鏈変袱涓睘鎬х殑瀵硅薄錛?success (涓鍒嘜K鐨勬椂鍊欒鐢ㄥ埌) 鍜?failure (鏈夊湴鏂瑰嚭闂鐨勬椂鍊欒鐢ㄥ埌) 鍦ㄤ笅闈㈢殑渚嬪瓙涓病鏈夌敤鍒?tt class="literal">failure灞炴э紝鑰屼粎浠呭湪 onFailure 澶勪嬌鐢ㄤ簡 reportError 鏂規硶銆?/p>

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';

										

var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{
method: 'get',
parameters: pars,
onFailure: reportError
});


}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

濡傛灉浣犵殑鏈嶅姟鍣ㄩ昏緫鏄繛鍚孒TML 鏍囪榪斿洖JavaScript 浠ｇ爜錛?Ajax.Updater瀵硅薄鍙互鎵ц閭ｆJavaScript浠ｇ爜銆備負浜嗕嬌榪欎釜瀵硅薄瀵瑰緟鍝嶅簲涓篔avaScript錛屼綘鍙渶鍦ㄦ渶鍚庡弬鏁扮殑瀵硅薄鏋勯犳柟娉曚腑綆鍗曞姞鍏?tt class="literal">evalScripts: true灞炴с備絾鏄煎緱鎻愰啋鐨勬槸錛屽儚榪欎釜閫夐」鍚峞valScripts鏆楃ず鐨勶紝榪欎簺鑴氭湰浼氳鎵ц錛屼絾鏄畠浠笉浼氳鍔犲叆鍒癙age鐨勮剼鏈腑銆傗滄湁浠涔堝尯鍒紵鈥濓紝鍙兘浣犱細榪欐牱闂傛垜浠亣瀹氳姹傚湴鍧榪斿洖鐨勪笢涓滃儚榪欐牱錛?/p> 

<script language="javascript" type="text/javascript">
function sayHi(){
alert('Hi');
}
</script>
<input type=button value="Click Me" onclick="sayHi()">

濡傛灉浣犱互鍓嶈繖鏍峰皾璇曡繃錛屼綘鐭ラ亾榪欎簺鑴氭湰涓嶄細濡備綘鎵鏈熸湜鐨勯偅鏍峰伐浣滐紝鍘熷洜鏄繖孌佃剼鏈細琚墽琛岋紝浣嗗儚涓婇潰榪欐牱鐨勮剼鏈墽琛屽茍涓嶄細鍒涘緩涓涓悕鍙玸ayHi鐨勫嚱鏁幫紝瀹冧粈涔堜篃涓嶅仛銆傚鏋滆鍒涘緩涓涓嚱鏁幫紝鎴戜滑搴斿綋鎶婁唬鐮佹敼鎴愪笅闈㈣繖涓牱瀛愶細

<script language="javascript" type="text/javascript">

sayHi = function(){
alert('Hi');
};

</script>
<input type=button value="Click Me" onclick="sayHi()">

涓轟粈涔堟垜浠湪涓婇潰鐨勪唬鐮佷腑涓嶄嬌鐢╲ar鍏抽敭瀛楁潵澹版槑榪欎釜鍙橀噺鍛紙鎸噑ayHi聽錛夛紝鍥犱負閭ｆ牱鍋氬垱寤哄嚭鏉ョ殑鍑芥暟灝嗗彧鏄綋鍓嶈剼鏈潡鐨勪竴涓眬閮ㄥ彉閲忥紙鑷沖皯鍦↖E涓槸榪欐牱錛夈備笉鍐檝ar鍏抽敭瀛楋紝鍒涘緩鍑烘潵鐨勫璞＄殑浣滅敤鍩熷氨鏄垜浠墍鏈熸湜鐨剋indow銆?/p>

鏇村鐩稿叧鐭ヨ瘑錛岃鍙傜湅聽 Ajax.Updater reference 鍜?a >options reference.

鏋氫婦... 鍣?鍣?

浣犵煡閬擄紝鎴戜滑閮芥槸榪欐牱鏉ュ仛寰幆鐨勶紝寤轟竴涓狝rray錛岀敤elements緇勭粐瀹冧滑錛屽啀寤轟竴涓驚鐜粨鏋勶紙渚嬪for,foreach,while)閫氳繃index鏁板瓧鏉ヨ闂瘡涓涓猠lement錛屽啀鐢ㄨ繖涓猠lement鍋氫竴浜涘姩浣溿?

褰撲綘鎯沖埌榪欐椂錛屼綘浼氬彂鐜板嚑涔庢瘡嬈″啓寰幆浠ｇ爜浣犻兘浼氳繜鏃╃敤鍒頒竴涓狝rray銆傞偅涔堬紝濡傛灉Array瀵硅薄鑳藉鎻愪緵鏇村鐨勫姛鑳界粰瀹冧滑鐨勮凱浠ｅ櫒浣跨敤涓嶆槸寰堢埥鍚楋紵紜疄鏄繖鏍鳳紝浜嬪疄涓婂緢澶氱殑緙栫▼璇█閮藉湪瀹冧滑鐨凙rray鎴栧叾瀹冪被浼肩殑緇撴瀯涓紙濡侰ollections,Lists錛夋彁渚涗竴浜涜繖鏍風殑鍔熻兘銆?

鐜板湪濂戒簡錛宲rototype.js浜嗙粰鎴戜滑涓涓?Enumerable瀵硅薄錛屽畠瀹炵幇浜嗗緢澶氬拰鍙凱浠ｆ暟鎹繘琛屼氦浜掔殑紿嶉棬銆傚拰鍘熸湁鐨凧S瀵硅薄鐩告瘮prototype.js鏇翠笂涓灞傛ゼ錛屽畠瀵?a >Array 綾籹鎵╁睍浜嗘墍鏈夋灇涓捐鐢ㄧ殑鍑芥暟銆?

寰幆, Ruby鏍峰紡鐨?/h4>

鍦ㄦ爣鍑嗙殑javascript涓紝濡傛灉浣犳兂鎶婁竴涓猘rray涓殑鎵鏈塭lements鏄劇ず鍑烘潵錛屼綘鍙互鍍忎笅闈唬鐮佽繖鏍峰啓寰楀緢濂斤細 

<script>
function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

            for(i=0;i<simpsons.length;i++){
alert(simpsons[i]);
}

}
</script>
<input type="button" value="Show List" onclick="showList();" >

浣跨敤鎴戜滑鏂扮殑鏈濂界殑鏈嬪弸錛宲rototype.js錛屾垜浠彲浠ユ妸瀹冪敓鍐欐垚榪欐牱 

      function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

            simpsons.each( function(familyMember){
alert(familyMember);
});

}

浣犲彲鑳戒細鎯斥滈潪甯稿鎬殑鏂瑰紡...鐩稿鏃х殑錛岃繖縐嶈娉曞お鎬紓浜嗏濄傚摝錛屽湪涓婇潰鐨勪緥瀛愶紝紜疄浠涔堜篃娌℃湁錛屽湪榪欎釜綆鍗曞緱瑕佹渚嬪瓙涓紝涔熸病鏈夋敼鍙樺お澶氬晩錛屽敖綆″姝わ紝璇風戶緇涓嬪幓銆?

鍦ㄧ戶緇笅闈㈠唴瀹逛箣鍓嶏紝浣犳敞鎰忓埌閭ｄ釜琚仛涓轟竴涓弬鏁頒紶閫掔粰each鍑芥暟鐨勫嚱鏁幫紵鎴戜滑鎶婂畠鐞嗚В鎴愯凱浠ｅ櫒鍑芥暟銆?

Your arrays on steroids

灝卞鎴戜滑涓婇潰鎻愬埌鐨勶紝鎶婁綘鐨凙rray涓殑elements褰撴垚鐩稿悓鐨勭被鍨嬩嬌鐢ㄧ浉鍚岀殑灞炴у拰鍑芥暟鏄緢閫氱敤(Common,涓嶇煡璇ョ炕璇戞垚閫氱敤榪樻槸搴鎬織)鐨勩傝鎴戜滑鐪嬬湅鎬庝箞鏍峰埄鐢ㄦ垜浠柊鐨勯┈鍔涘己鍔茬殑Arrays鐨勮凱浠ｅ姛鑳藉惂銆?

渚濈収鏍囧噯鎵懼埌涓涓猠lement銆?

<script>
function findEmployeeById(emp_id){
var listBox = $('lstEmployees')
var options = listBox.getElementsByTagName('option');
options = $A(options);
var opt = options.find( function(employee){
return (employee.value == emp_id);
});
alert(opt.innerHTML); //displays the employee name
}
</script>
<select id="lstEmployees" size="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Find Laura" onclick="findEmployeeById(8);" >

鐜板湪鎴戜滑鍐嶄笅涓鍩庯紝鐪嬬湅濡備綍榪囨護涓涓狝rray涓殑鍏冪礌錛屼粠姣忎釜鍏冪礌涓緱鍒版垜浠兂瑕佺殑鎴愬憳銆?

<script>
function showLocalLinks(paragraph){
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName('a'));
//find links that do not start with 'http'
var localLinks = links.findAll( function(link){
var start = link.href.substring(0,4);
return start !='http';
});
//now the link texts
var texts = localLinks.pluck('innerHTML');
//get them in a single string
var result = texts.inspect();
alert(result);
}
</script>
<p id="someText">
This <a >text</a> has
a <a href="#localAnchor">lot</a> of
<a href="#otherAnchor">links</a>. Some are
<a >external</a>
and some are <a href="#someAnchor">local</a>
</p>
<input type=button value="Find Local Links" onclick="showLocalLinks('someText')">

涓婇潰鐨勪唬鐮佷粎浠呮槸涓鐐瑰皬灝忕殑瀹炶返璁╀漢鐖變笂榪欑璇硶銆傝鍙傜湅 Enumerable鍜?a class="code" >Array鐨勬墍鏈夊嚱鏁?

聽

prototype.js鍙傝?/h3>

JavaScript綾繪墿灞?/h4>

prototype.js 綾誨簱瀹炵幇寮哄ぇ鍔熻兘鐨勪竴縐嶉斿緞鏄墿灞曞凡鏈夌殑JavaScript 綾匯?

瀵?Object鐨勬墿灞?/span>

Method Kind Arguments Description
extend(destination, source) static destination: any object, source: any object 鎻愪緵涓縐嶉氳繃鎷瘋礉鎵鏈夋簮浠ヨ薄灞炴у拰鍑芥暟鍒扮洰鏍囧嚱鏁板疄鐜扮戶鎵跨殑鏂規硶
inspect(targetObj) static targetObj: any object 榪斿洖鍙鎬уソ鍏充簬鐩爣瀵硅薄鐨勬枃瀛楁弿榪幫紝濡傛灉瀵硅薄瀹炰緥娌℃湁瀹氫箟涓涓猧nspect鍑芥暟錛岄粯璁よ繑鍥瀟oString鍑芥暟鐨勫箋?/td>

瀵筃umber鐨勬墿灞?/span>

Method Kind Arguments Description
toColorPart() instance (none) 榪斿洖鏁板瓧鐨勫崄鍏繘鍒惰〃紺哄艦寮忋傚湪鎶婁竴涓猂GB鏁板瓧杞崲鎴怘TML琛ㄧ幇褰㈠紡鏃跺緢鏈夌敤銆?/td>
succ() instance (none) 聽榪斿洖涓嬩竴涓暟瀛楋紝榪欎釜鏂規硶鍙敤浜庤凱浠ｈ皟鐢ㄥ満鏅腑銆?
times(iterator) instance iterator: a function object conforming to Function(index) Calls the iterator function repeatedly passing the current index in the index argument. 鍙嶅璋冪敤iterator鍑芥暟騫朵紶閫掑綋鍓峣ndex鍒癷terator鐨刬ndex鍙傛暟銆?

涓嬮潰鐨勪緥瀛愮敤鎻愮ず妗嗘樉紺?-9銆?

<script>
function demoTimes(){
var n = 10;
n.times(function(index){
alert(index);
});
/***************************
* you could have also used:
*           (10).times( .... );
***************************/
}
</script>
<input type=button value="Test Number.times()" onclick="demoTimes()">

瀵?Function鎵╁睍

Method Kind Arguments Description
bind(object) instance object: the object that owns the method 榪斿洖function鐨勫疄渚嬶紝榪欎釜瀹炰緥鍜屾簮function鐨勭粨鏋勪竴鏍鳳紝浣嗘槸瀹冨凡琚粦瀹氱粰浜嗗弬鏁頒腑鎻愪緵鐨刼bject錛屽氨鏄錛宖unction涓殑this鎸囬拡鎸囧悜鍙傛暟object銆?/td>
bindAsEventListener(object) instance object: the object that owns the method 鐢ㄦ硶鍜屼笂闈㈢殑bind涓鏍鳳紝鍖哄埆鍦ㄤ簬鐢ㄦ潵緇戝畾浜嬩歡銆?/td>

璁╂垜浠湅鐪嬪浣曡繍鐢ㄨ繖浜涙墿灞曘?

<input type=checkbox id=myChk value=1> Test?
<script>
//declaring the class
var CheckboxWatcher = Class.create();
//defining the rest of the class implementation
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>

瀵筍tring鐨勬墿灞?/span>

Method Kind Arguments Description
stripTags() instance (none) 榪斿洖涓涓妸鎵鏈夌殑HTML鎴朮ML鏍囪閮界Щ闄ょ殑瀛楃涓層?/td>
stripScripts() instance (none) 榪斿洖涓涓妸鎵鏈夌殑script閮界Щ闄ょ殑瀛楃涓層?/td>
escapeHTML() instance (none) 榪斿洖涓涓妸鎵鏈夌殑HTML鏍囪鍚堥傜殑杞箟鎺夌殑瀛楃涓層?/td>
unescapeHTML() instance (none) escapeHTML()鐨勫弽杞?/span>
extractScripts() instance (none) 榪斿洖涓涓寘鍚湪string涓壘鍒扮殑鎵鏈?lt;script>鐨勬暟緇勩?/td>
evalScripts() instance (none) 鎵ц鍦╯tring涓壘鍒扮殑鎵鏈?lt;script>銆?/td>
toQueryParams() instance (none) 鎶妐uerystring鍒嗗壊鎵嶄竴涓敤parameter name鍋歩ndex鐨勮仈鍚圓rray錛屾洿鍍忎竴涓猦ash銆?/td>
parseQuery() instance (none) 鍜宼oQueryParams()涓鏍?/span>.
toArray() instance (none) 鎶婂瓧絎︿覆杞崲鎴愬瓧絎︽暟緇?
camelize() instance (none) 杞崲涓涓互榪炲瓧絎﹁繛鎺ョ殑瀛楃涓叉垚涓涓獑椹兼硶鏍峰紡鐨勫瓧絎︿覆銆傛瘮濡傦紝榪欎釜鍑芥暟鍦ㄥ啓浠ｇ爜鏃訛紝鎶婂畠鍋氫負涓涓牱寮忓伐鍏蜂嬌鐢ㄦ槸寰堟湁鐢ㄧ殑銆?/td>

瀵孤?Array鐨勬墿灞?/h4>

鍥犱負array鎵╁睍浜巈numerable錛屾墍浠ユ墍鏈塭numberable瀵硅薄鐨勫嚱鏁幫紝array閮芥槸鍙互浣跨敤鐨勶紝闄ゆ涔嬪錛屼笅闈㈢殑榪欎簺涔熸槸宸茬粡瀹炵幇浜嗙殑銆?

Method Kind Arguments Description
clear() instance (none) 娓呯┖銆?/td>
compact() instance (none) 榪斿洖涓涓笉鍖呮嫭婧恆rray涓璶ull鎴杣ndefined鍏冪礌鐨刟rray,姝ゆ柟娉曚笉鏀瑰彉婧恆rray銆?/td>
first() instance (none) 榪斿洖array鐨勭涓涓璞°?/td>
flatten() instance (none) 閫氳繃閫掑綊緇勫悎array姣忎釜鍏冪礌鐨勫瓙鍏冪礌錛堝鏋滆鍏冪礌涔熸槸array)鏉ヨ繑鍥炰竴涓滄墎騫崇殑鈥濅竴緇寸殑array銆?/td>
indexOf(value) instance value: what you are looking for.