姝ゆ枃浠ュ疄渚嬩負鍩虹涓€姝ユ璇存槑浜唈Query鐨勫伐浣滄柟寮忋€傜幇浠ヤ腑鏂囩炕璇戯紙娣誨姞鎴戠殑琛ュ厖璇存槑錛夊涓嬨€傚鏈夌浉鍏蟲剰瑙佹垨寤鴻璇?EMAIL 鍛婄煡銆傛垨鑰呭湪 BLOG涓暀璦€銆?/p>
鑻辨枃鍘熺増錛?a >http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery 錛屾劅璋㈠師鏂囦綔鑰?J枚rn Zaefferer 鏈枃鍙戝竷宸插緛姹傚師浣滆€呭悓鎰忋€?/strong>
璇存槑:鍦ㄦ湰鏁欑▼鍙戝竷涔嬪悗錛屽緱鍒頒簡鍑犱釜緗戝弸鐨勬寚姝ｏ紝瀵歸儴鍒嗗唴瀹逛綔浜嗕慨姝ｏ紝浣嗗湪jQuery鐗堟湰涓嶆柇鏇存柊鐨勬儏鍐典笅錛屾暀紼嬩腑鐨勬煇浜涘唴瀹瑰凡緇忚繃鏃訛紙灝ゅ叾鏄?.3浠ヤ笂鐗堟湰錛夛紝鍦ㄥ繝浜庡師鏂囩殑鍩虹涓婏紝鎴戝皢榪欓儴鍒嗗唴瀹瑰姞浠ユ爣綰㈢殑琛ュ厖璇存槑錛屽笇鏈涙洿澶氱殑鍓嶇寮€鍙戣€呰兘瀵規(guī)鏂囨彁鍑哄疂璐墊剰瑙侊紝璋㈣阿錛?--2009-3-10
鍙﹀鎴戣涓哄湪瀛︿范榪囩▼涓?鏈変袱涓狝PI鏂囨。浣犺鎵撳紑闅忔椂鏌ョ湅:
榪欎釜鎸囧崡鏄竴涓jQuery搴撶殑璇存槑錛岃姹傝鑰呬簡瑙TML(DOM)鍜孋SS鐨勪竴浜涘父璇嗐€傚畠鍖呮嫭浜嗕竴涓畝鍗曠殑Hello World鐨勪緥瀛愶紝閫夋嫨鍣ㄥ拰浜嬩歡鍩虹錛孉JAX銆丗X鐨勭敤娉曪紝浠ュ強濡備綍鍒朵綔jQuery鐨勬彃浠躲€? 榪欎釜鎸囧崡鍖呮嫭浜嗗緢澶氫唬鐮侊紝浣犲彲浠opy瀹冧滑錛屽茍璇曠潃淇敼瀹冧滑錛岀湅鐪嬩駭鐢熺殑鏁堟灉銆?
涓€寮€濮?鎴戜滑闇€瑕佷竴涓猨Query鐨勫簱,鏈€鏂扮殑涓嬭澆鍙互鍒?a >榪欓噷鎵懼埌銆傝繖涓寚鍗楁彁渚涗竴涓熀鏈寘鍚疄渚嬬殑鍖呬緵涓嬭澆.
涓嬭澆錛?a class="download" href="jquery-starterkit.zip">jQuery Starterkit
(璇戣€匥eel娉?涓€瀹氳涓嬭澆榪欎釜鍖咃紝鍏夌湅鏂囩珷涓嶅疄璺佃偗瀹氭槸涓嶈鐨勩€?
涓嬭澆鍚庤В鍘嬬緝錛岀劧鍚庣敤浣犳渶鍠滄鐨勬枃鏈紪杈戝櫒鎵撳紑starterkit.html鍜宑ustom.js榪欎袱涓枃浠躲€?span class="log">(璇戣€匥eel娉?榪欎袱涓氨鏄緥瀛愭枃浠?鎵€鏈夌殑渚嬪瓙閮界敤榪欎袱涓緥瀛愪綔鍑?custom.js鍐檍Query浠ｇ爜,starterkit.html瑙傚療鏁堟灉.寤鴻鐢╡ditPlus鎵撳紑)
鐜板湪,鎴戜滑灝卞凡緇忓仛濂戒簡涓€鍒囧噯澶囨潵榪涜榪欎釜钁楀悕鐨?Hello world"渚嬪瓙.
鍦ㄥ仛鎵€鏈変簨鎯呬箣鍓?鎴戜滑瑕佽jQuery璇誨彇鍜屽鐞嗘枃?。鐨凞OM,蹇呴』灝藉彲鑳藉揩鍦板湪DOM杞藉叆鍚庡紑濮嬫墽琛屼簨浠?鎵€浠?鎴戜滑鐢ㄤ竴涓猺eady浜嬩歡浣滀負澶勭悊HTML鏂囨。鐨勫紑濮?鐪嬬湅鎴戜滑鎵撳紑鐨刢ustom.js榪欎釜鏂囦歡,閲岄潰宸茬粡鍑嗗濂戒簡:
$(document).ready(function() {
// do stuff when DOM is ready
});
鏀句竴涓畝鍗曠殑alert浜嬩歡鍦ㄩ渶瑕佺瓑DOM瀹屾垚杞藉叆,鎵€浠ユ垜浠妸浠誨姟紼嶇◢鍙樺鏉備竴鐐?鍦ㄧ偣鍑諱換浣曚竴涓摼鎺ユ椂鏄劇ず涓€涓猘lert.
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
榪欐牱鍦ㄤ綘鐐瑰向欏甸潰鐨勪竴涓摼鎺ユ椂閮戒細瑙﹀彂榪欎釜"Hello world"鐨勬彁紺恒€?/p>
(璇戣€匥eel娉?璇風収姝や唬鐮佷慨鏀筩ustom.js騫朵繚瀛?鐒跺悗鐢ㄦ祻瑙堝櫒鎵撳紑starterkit.html瑙傚療鏁堟灉銆?
璁╂垜浠湅涓€涓嬭繖浜涗慨鏀規(guī)槸浠€涔堝惈涔夈€?("a") 鏄竴涓猨Query閫夋嫨鍣?selector),鍦ㄨ繖閲岋紝瀹冮€夋嫨鎵€鏈夌殑a鏍囩錛堣瘧鑰匥eel娉細鍗?lt;a></a>錛?/span>錛?鍙鋒槸 jQuery 鈥滅被鈥?jQuery "class")鐨勪竴涓埆縐幫紝鍥犳$()鏋勯€犱簡涓€涓柊鐨刯Query 瀵硅薄(jQuery object)銆傚嚱鏁?click() 鏄繖涓猨Query瀵硅薄鐨勪竴涓柟娉曪紝瀹冪粦瀹氫簡涓€涓崟鍑諱簨浠跺埌鎵€鏈夐€変腑鐨勬爣絳?榪欓噷鏄墍鏈夌殑a鏍囩),騫跺湪浜嬩歡瑙﹀彂鏃舵墽琛屼簡瀹冩墍鎻愪緵鐨刟lert鏂規(guī)硶.
榪欓噷鏈変竴涓嫙琛岀浉浼煎姛鑳界殑浠ｇ爜:
<a href="#" onclick="alert('Hello world')">Link</a>
涓嶅悓涔嬪寰堟槑鏄?鐢╦Query涓嶉渶瑕佸湪姣忎釜a鏍囩涓婂啓onclick浜嬩歡,鎵€浠ユ垜浠嫢鏈変簡涓€涓暣媧佺殑緇撴瀯鏂囨。(HTML)鍜屼竴涓涓烘枃妗?JS),杈懼埌浜嗗皢緇撴瀯涓庤涓哄垎寮€鐨勭洰鐨?灝卞儚鎴戜滑浣跨敤CSS榪芥眰鐨勪竴鏍?
涓嬮潰鎴戜滑浼氭洿澶氬湴浜嗚В鍒伴€夋嫨鍣ㄤ笌浜嬩歡.
jQuery鎻愪緵涓ょ鏂瑰紡鏉ラ€夋嫨html鐨別lements錛岀涓€縐嶆槸鐢–SS鍜孹path閫夋嫨鍣ㄨ仈鍚堣搗鏉ュ艦鎴愪竴涓瓧絎︿覆鏉ヤ紶閫佸埌jQuery鐨勬瀯閫犲櫒錛堝錛?("div > ul a")錛夛紱絎簩縐嶆槸鐢╦Query瀵硅薄鐨勫嚑涓猰ethods(鏂規(guī)硶)銆傝繖涓ょ鏂瑰紡榪樺彲浠ヨ仈鍚堣搗鏉ユ販鍚堜嬌鐢ㄣ€?/p>
涓轟簡嫻嬭瘯涓€涓嬭繖浜涢€夋嫨鍣紝鎴戜滑鏉ヨ瘯鐫€鍦ㄦ垜浠瑂tarterkit.html涓€夋嫨騫朵慨鏀圭涓€涓猳rdered list.
涓€寮€濮嬶紝鎴戜滑闇€瑕侀€夋嫨榪欎釜list鏈韓錛岃繖涓猯ist鏈変竴涓狪D鍙€渙rderedlist鈥濓紝閫氬父鐨刯avascript鍐欐硶鏄痙ocument.getElementById("orderedlist").鍦╦Query涓紝鎴戜滑榪欐牱鍋泛細
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
榪欓噷灝唖tarterkit涓殑涓€涓狢SS鏍峰紡red闄勫姞鍒頒簡orderedlist涓?span class="log">(璇戣€匥eel娉細鍙傝€冩祴璇曞寘涓殑css鐩綍涓嬬殑core.css錛屽叾涓畾涔変簡red鏍峰紡)銆傚洜姝わ紝鍦ㄤ綘鍒鋒柊浜唖tarterkit.html鍚庯紝浣犲皢浼氱湅鍒扮涓€涓湁搴忓垪琛?ordered list )鑳屾櫙鑹插彉鎴愪簡綰㈣壊錛岃€岀浜屼釜鏈夊簭鍒楄〃娌℃湁鍙樺寲.
鐜板湪錛岃鎴戜滑娣誨姞涓€浜涙柊鐨勬牱寮忓埌l(fā)ist鐨勫瓙鑺傜偣.
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
榪欐牱錛屾墍鏈塷rderedlist涓殑li閮介檮鍔犱簡鏍峰紡"blue"銆?/p>
鐜板湪鎴戜滑鍐嶅仛涓鏉備竴鐐圭殑錛屽綋鎶婇紶鏍囨斁鍦╨i瀵硅薄涓婇潰鍜岀Щ寮€鏃惰繘琛屾牱寮忓垏鎹紝浣嗗彧鍦╨ist鐨勬渶鍚庝竴涓猠lement涓婄敓鏁堛€?/p>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
榪樻湁澶ч噺鐨勭被浼肩殑CSS鍜?a class="doc" title="Documentation for XPath selectors">XPath渚嬪瓙錛屾洿澶氱殑渚嬪瓙鍜屽垪琛ㄥ彲浠ュ湪榪欓噷鎵懼埌銆?span class="log">錛堣瘧鑰匥eel娉細鍏ラ棬鐪嬫鏂囷紝淇鍦ㄤ釜浜猴紝瑕佹兂鍦ㄥ叆闂ㄤ箣鍚庢噦鏇村錛屾墍浠ヨ繖孌佃瘽鐨勫嚑涓摼鎺ヨ繜鏃╂槸瑕佸繀鐪嬬殑錛佷笉浼氬張瑕佺炕璇戝惂...^_^!錛?/span>
姣忎竴涓猳nXXX浜嬩歡閮芥湁鏁堬紝濡俹nclick,onchange,onsubmit絳夛紝閮芥湁jQuery絳変環(huán)琛ㄧず鏂規(guī)硶錛堣瘧鑰匥eel娉細jQuery涓嶅枩嬈nXXX錛屾墍浠ラ兘鏀規(guī)垚浜哫XX錛屽幓鎺変簡on錛?/span>銆?a class="doc"
title="Documentation for advanced events">鍏朵粬鐨勪竴浜涗簨浠?/a>錛屽ready鍜宧over,涔熸彁渚涗簡鐩稿簲鐨勬柟娉曘€?/p>
浣犲彲浠ュ湪Visual jQuery鎵懼埌鍏ㄩ儴鐨勪簨浠跺垪琛紝鍦‥vents鏍忕洰涓? 鐢ㄨ繖浜涢€夋嫨鍣ㄥ拰浜嬩歡浣犲凡緇忓彲浠ュ仛寰堝鐨勪簨鎯呬簡錛屼絾榪欓噷鏈変竴涓洿寮虹殑濂戒笢涓滐紒 find() 璁╀綘鍦ㄥ凡緇忛€夋嫨鐨別lement涓綔鏉′歡鏌ユ壘,鍥犳 $("#orderedlist).find("li") 灝卞儚 $("#orderedlist li")涓€鏍楓€俥ach()鏂規(guī)硶榪唬浜嗘墍鏈夌殑li錛屽茍鍙互鍦ㄦ鍩虹涓婁綔鏇村鐨勫鐞嗐€?澶ч儴鍒嗙殑鏂規(guī)硶,濡俛ddClass(), 閮藉彲浠ョ敤瀹冧滑鑷繁鐨?each() 銆傚湪榪欎釜渚嬪瓙涓? html()鐢ㄦ潵鑾峰彇姣忎釜li鐨刪tml鏂囨湰, 榪藉姞涓€浜涙枃瀛楋紝騫跺皢涔嬭緗負li鐨刪tml鏂囨湰銆?span class="log">錛堣瘧鑰匥eel娉細浠庤繖涓緥瀛愬彲浠ョ湅鍒?html()鏂規(guī)硶鏄幏鍙栧璞＄殑html浠ｇ爜錛岃€?html('xxx')鏄緗?xxx'涓哄璞＄殑html浠ｇ爜錛?/span> 鍙︿竴涓粡甯哥鍒扮殑浠誨姟鏄湪娌℃湁琚玧Query瑕嗙洊鐨凞OM鍏冪礌涓奵all涓€浜涙柟娉曪紝鎯沖儚涓€涓湪浣犵敤AJAX鏂瑰紡鎴愬姛鎻愪氦鍚庣殑reset錛?/p>
錛堣瘧鑰匥eel娉細榪欓噷浣滆€呭皢form鐨刬d涔熷啓鎴愪簡form錛屾簮鏂囦歡鏈?lt;form id="form">錛岃繖鏄潪甯鎬笉濂界殑鍐欐硶錛屼綘鍙互灝嗚繖涓狪D鏀規(guī)垚form1鎴栬€卼estForm錛岀劧鍚庣敤$("#form1")鎴栬€?("#testForm")鏉ヨ〃紺哄畠錛屽啀榪涜嫻嬭瘯銆傦級 榪欎釜浠ｇ爜閫夋嫨浜嗘墍鏈塈D涓?form"鐨勫厓绱狅紝騫跺湪鍏剁涓€涓笂call浜嗕竴涓猺eset()銆傚鏋滀綘鏈変竴涓互涓婄殑form錛屼綘鍙互榪欐牱鍋泛細 錛堣瘧鑰匥eel娉細璇鋒敞鎰忎竴瀹氳浜茶嚜灝嗚繖浜涗唬鐮佸啓鍦╟ustom.js涓茍鍦╯tarterkit.html涓婃祴璇曟晥鏋滄墠鑳芥湁鎵€浣撲細錛佸繀瑕佹椂瑕佽瀵焥tarterkit.html鐨刪tml浠ｇ爜錛?/p>
榪欐牱浣犲湪鐐瑰向Reset閾炬帴鍚庯紝灝遍€夋嫨浜嗘枃?。涓墍鏈夌殑form鍏冪礌錛屽茍瀵瑰畠浠兘鎵ц浜嗕竴嬈eset()銆?/p>
榪樻湁涓€涓綘鍙兘瑕侀潰瀵圭殑闂鏄笉甯屾湜鏌愪簺鐗瑰畾鐨勫厓绱犺閫夋嫨銆俲Query 鎻愪緵浜唂ilter() 鍜宯ot() 鏂規(guī)硶鏉ヨВ鍐寵繖涓棶棰樸€?filter()浠ヨ繃婊よ〃杈懼紡鏉ュ噺灝戜笉絎﹀悎鐨勮閫夋嫨欏? not()鍒欑敤鏉ュ彇娑堟墍鏈夌鍚堣繃婊よ〃杈懼紡鐨勮閫夋嫨欏? 鑰冭檻涓€涓棤搴忕殑list錛屼綘鎯寵閫夋嫨鎵€鏈夌殑娌℃湁ul瀛愬厓绱犵殑li鍏冪礌銆?/p>
榪欎釜浠ｇ爜閫夋嫨浜嗘墍鏈夌殑li鍏冪礌錛岀劧鍚庡幓闄や簡鏈塽l瀛愬厓绱犵殑li鍏冪礌銆傚埛鏂版祻瑙堝櫒鍚庯紝鎵€鏈夌殑li鍏冪礌閮芥湁浜嗕竴涓竟妗嗭紝鍙湁ul瀛愬厓绱犵殑閭ｄ釜li鍏冪礌渚嬪銆?/p>
錛堣瘧鑰匥eel娉細璇鋒敞鎰忎綋浼氭柟渚夸箣鏋佺殑css()鏂規(guī)硶錛屽茍鍐嶆鎻愰啋璇峰姟蹇呭疄闄呮祴璇曡瀵熸晥鏋滐紝姣旀柟璇存崲涓狢SS鏍峰紡鍛紵鍐嶅姞涓€涓狢SS鏍峰紡鍛紵鍍忚繖鏍鳳細$("li").not("[ul]").css("border", "1px solid black").css("color","red");錛?/p>
涓婇潰浠ｇ爜涓殑[expression] 璇硶鏄粠XPath鑰屾潵錛屽彲浠ュ湪瀛愬厓绱犲拰灞炴€?elements and attributes)涓婄敤浣滆繃婊ゅ櫒錛屾瘮濡備綘鍙兘鎯抽€夋嫨鎵€鏈夌殑甯︽湁name灞炴€х殑閾炬帴: 榪欎釜浠ｇ爜緇欐墍鏈夊甫鏈塶ame灞炴€х殑閾炬帴鍔犱簡涓€涓儗鏅壊銆?span class="log">錛堣瘧鑰匥eel娉細榪欎釜棰滆壊澶笉鏄庢樉浜嗭紝寤鴻鍐欐垚$("a[name]").css("background-color","#eee");錛?/span> [娉細鍦╦Query1.2鍙婁互涓婄増鏈腑,@絎﹀佛搴旇鍘婚櫎,涓嬫枃涓笉鍐嶈鏄嶿 鏇村父瑙佺殑鎯呭喌鏄互name鏉ラ€夋嫨閾炬帴錛屼綘鍙兘闇€瑕侀€夋嫨涓€涓湁鐗圭偣href灞炴€х殑閾炬帴錛岃繖鍦ㄤ笉鍚岀殑嫻忚鍣ㄤ笅瀵筯ref鐨勭悊瑙ｅ彲鑳戒細涓嶄竴鑷達紝鎵€浠ユ垜浠殑閮ㄥ垎鍖歸厤("*=")鐨勬柟寮忔潵浠ｆ浛瀹屽叏鍖歸厤("=")錛?/p>
鍒扮幇鍦ㄤ負姝紝閫夋嫨鍣ㄩ兘鐢ㄦ潵閫夋嫨瀛愬厓绱犳垨鑰呮槸榪囨護鍏冪礌銆傚彟澶栬繕鏈変竴縐嶆儏鍐墊槸閫夋嫨涓婁竴涓垨鑰呬笅涓€涓厓绱狅紝姣斿涓€涓狥AQ鐨勯〉闈紝絳旀棣栧厛浼氶殣钘忥紝褰撻棶棰樼偣鍑繪椂錛岀瓟妗堟樉紺哄嚭鏉ワ紝jQuery浠ｇ爜濡備笅錛?/p>
榪欓噷鎴戜滑鐢ㄤ簡涓€浜涢摼寮忚〃杈炬硶鏉ュ噺灝戜唬鐮侀噺錛岃€屼笖鐪嬩笂鍘繪洿鐩磋鏇村鏄撶悊瑙ｃ€傚儚'#faq' 鍙€夋嫨浜嗕竴嬈★紝鍒╃敤end()鏂規(guī)硶錛岀涓€嬈ind()鏂規(guī)硶浼氱粨鏉?undone)錛屾墍浠ユ垜浠彲浠ユ帴鐫€鍦ㄥ悗闈㈢戶緇璮ind('dt')錛岃€屼笉闇€瑕佸啀鍐?('#faq').find('dt')銆?/p>
鍦ㄧ偣鍑諱簨浠朵腑鐨勶紝鎴戜滑鐢?$(this).next() 鏉ユ壘鍒癲t涓嬮潰绱ф帴鐨勪竴涓猟d鍏冪礌錛岃繖璁╂垜浠彲浠ュ揩閫熷湴閫夋嫨鍦ㄨ鐐瑰向闂涓嬮潰鐨勭瓟妗堛€?/p>
錛堣瘧鑰匥eel娉細榪欎釜渚嬪瓙鐪熸槸澶叿浜嗭紝FAQ涓殑絳旀鍙互鏀剁緝錛佷粠鍒╃敤next()鐨勬€濊礬鍒板疄鐜拌繖浜涙晥鏋滈兘鏈夊緢澶氬湴鏂歸渶瑕佹垜浠秷鍖栵紝娉ㄦ剰 if (answer.is(':visible'))鐢ㄦ硶錛屾敞鎰廰nswer.slideUp();涓嶆噦鐨勫湴鏂硅刀绱ф煡鎴戝湪鏈€寮€濮嬫彁鍒扮殑涓や釜蹇呯湅API鏂囨。錛?/p>
闄や簡閫夋嫨鍚岀駭鍒殑鍏冪礌澶栵紝浣犱篃鍙互閫夋嫨鐖剁駭鐨勫厓绱犮€傚彲鑳戒綘鎯沖湪鐢ㄦ埛榧犳爣縐誨埌鏂囩珷鏌愭鐨勬煇涓摼鎺ユ椂錛屽畠鐨勭埗綰у厓绱?-涔熷氨鏄枃绔犵殑榪欎竴孌電獊鍑烘樉紺猴紝璇曡瘯榪欎釜錛?/p>
嫻嬭瘯鏁堟灉鍙互鐪嬪埌錛岀Щ鍒版枃绔犳煇孌電殑閾炬帴鏃訛紝瀹冩墍鍦ㄧ殑孌靛叏鐢ㄤ笂highlight鏍峰紡錛岀Щ璧頒箣鍚庡張鎭㈠鍘熸牱銆?/p>
錛堣瘧鑰匥eel娉細highlight鏄痗ore.css涓畾涔夌殑鏍峰紡錛屼綘涔熷彲浠ユ敼鍙樺畠錛屾敞鎰忚繖閲屾湁絎簩涓猣unction()榪欐槸hover鏂規(guī)硶鐨勭壒鐐癸紝璇峰湪API鏂囨。涓煡闃卙over錛屼笂闈篃鏈変緥瀛愯鏄庯級
鍦ㄦ垜浠戶緇箣鍓嶆垜浠厛鏉ョ湅鐪嬭繖涓€姝ワ細 jQuery浼氳浠ｇ爜鍙樺緱鏇寸煭浠庤€屾洿瀹規(guī)槗鐞嗚В鍜岀淮鎶わ紝涓嬮潰鏄?(document).ready(callback)鐨勭緝鍐欐硶錛?/p>
搴旗敤鍒版垜浠殑Hello world渚嬪瓙涓紝鍙互榪欐牱: 鐜板湪錛屾垜浠墜涓婃湁浜嗚繖浜涘熀紜€鐨勭煡璇嗭紝鎴戜滑鍙互鏇磋繘涓€姝ョ殑鎺㈢儲鍏跺畠鏂歸潰鐨勪笢瑗匡紝灝變粠AJAX寮€濮嬶紒
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");//鍘熸枃涓?("li").not("[ul]").css("border", "1px solid black");
});
$(document).ready(function() {
$("a[name]").css("background-color","#eee"); //鍘熸枃涓衡€?("a[@name]").background("#eee");鈥濆湪jQuery1.2鍙婁互涓婄増鏈腑,@絎﹀佛搴旇鍘婚櫎,background鏂規(guī)硶琚玞ss鏂規(guī)硶鍙栦唬
});
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
$(function() {
// code to execute when the DOM is ready
});
$(function() {
$("a").click(function() {
alert("Hello world!");
});
});
鏈珷鐨勭浉鍏抽摼鎺?
鍦ㄨ繖涓€閮ㄥ垎鎴戜滑鍐欎簡涓€涓皬灝忕殑AJAX搴旗敤錛屽畠鑳藉rate涓€浜涗笢瑗?span class="log">錛堣瘧Keel娉細灝辨槸瀵規(guī)煇浜涗笢瑗挎姇紲級錛屽氨鍍忓湪youtube.com涓婇潰鐪嬪埌鐨勪竴鏍楓€?/p>
棣栧厛鎴戜滑闇€瑕佷竴浜涙湇鍔″櫒绔唬鐮侊紝榪欎釜渚嬪瓙涓敤鍒頒簡涓€涓狿HP鏂囦歡錛岃鍙杛ating鍙傛暟鐒跺悗榪斿洖rating鎬繪暟鍜屽鉤鍧囨暟銆傜湅涓€涓?a href="rate.phps">rate.php浠ｇ爜.
铏界劧榪欎簺渚嬪瓙涔熷彲浠ヤ笉浣跨敤AJAX鏉ュ疄鐜幫紝浣嗘樉紺烘垜浠笉浼氶偅涔堝仛錛屾垜浠敤jQuery鐢熸垚涓€涓狣IV瀹瑰櫒錛孖D鏄?rating".
$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
});
榪欐浠ｇ爜鐢熸垚浜?涓摼鎺ワ紝騫跺皢瀹冧滑榪藉姞鍒癷d涓?rating"瀹瑰櫒涓紝褰撳叾涓竴涓摼鎺ヨ鐐瑰向鏃訛紝璇ラ摼鎺ユ爣鏄庣殑鍒嗘暟灝變細浠ating鍙傛暟褰㈠紡鍙戦€佸埌rate.php錛岀劧鍚庯紝緇撴灉灝嗕互XML褰㈠紡浼氫粠鏈嶅姟鍣ㄧ浼犲洖鏉ワ紝娣誨姞鍒板鍣ㄤ腑錛屾浛浠ｈ繖浜涢摼鎺ャ€?/p>
濡傛灉浣犳病鏈変竴涓畨瑁呰繃PHP鐨克ebserver錛屼綘鍙互鐪嬬湅榪欎釜鍦ㄧ嚎鐨勪緥瀛?/a>.
涓嶄嬌鐢╦avascript瀹炵幇鐨勪緥瀛愬彲浠ヨ闂?softonic.de 鐐瑰向 "Kurz bewerten!"
鏇村鐨凙JAX鏂規(guī)硶鍙互浠?a class="doc" title="Documentation for AJAX methods">榪欓噷 鎵懼埌錛屾垨鑰呯湅鐪?a >API鏂囨。 涓嬮潰鐨凙JAX filed under AJAX.
錛堣瘧鑰匥eel娉細榪欎釜鍦ㄧ嚎瀹炰緥浠庡浗鍐呰闂繕鏄瘮杈冩參鐨勶紝鐐瑰向鍚庤絳変竴浼氬効鎵嶈兘鐪嬪埌緇撴灉錛屽彲浠ヨ€冭檻瀵瑰畠榪涜淇敼錛屾瘮濡傚姞涓妉oading錛屾姇紲ㄥ悗鍔犱笂鍐嶆姇紲ㄧ殑榪斿洖閾炬帴絳夈€傛澶栵紝榪欎釜渚嬪瓙涓繕鏄湁寰堝闇€瑕佽繘涓€姝ユ秷鍖栫殑鍦版柟錛岀湅涓嶆噦鐨勫湴鏂硅鍙傝€傾PI鏂囨。銆傦級
涓€涓湪浣跨敤AJAX杞藉叆鍐呭鏃剁粡甯稿彂鐢熺殑闂鏄細褰撹澆鍏ヤ竴涓簨浠跺彞鏌勫埌涓€涓狧TML鏂囨。鏃訛紝榪橀渶瑕佸湪杞藉叆鍐呭涓婂簲鐢ㄨ繖浜涗簨浠訛紝浣犱笉寰椾笉鍦ㄥ唴瀹瑰姞杞藉畬鎴愬悗搴旗敤榪欎簺浜嬩歡鍙ユ焺錛屼負浜嗛槻姝唬鐮侀噸澶嶆墽琛岋紝浣犲彲鑳界敤鍒板涓嬩竴涓猣unction:
// lets use the shortcut
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});
鐜板湪錛宎ddClickHandlers鍙湪DOM杞藉叆瀹屾垚鍚庢墽琛屼竴嬈★紝榪欐槸鍦ㄧ敤鎴鋒瘡嬈＄偣鍑誨叿鏈塩lickMeToLoadContent 榪欎釜鏍峰紡鐨勯摼鎺ュ茍涓斿唴瀹瑰姞杞藉畬鎴愬悗.
璇鋒敞鎰廰ddClickHandlers鍑芥暟鏄綔涓轟竴涓眬閮ㄥ彉閲忓畾涔夌殑錛岃€屼笉鏄叏灞€鍙橀噺(濡傦細function addClickHandlers() {...})錛岃繖鏍峰仛鏄負浜嗛槻姝笌鍏朵粬鐨勫叏灞€鍙橀噺鎴栬€呭嚱鏁扮浉鍐茬獊.
鍙︿竴涓父瑙佺殑闂鏄叧浜庡洖璋?callback)鐨勫弬鏁般€備綘鍙互閫氳繃涓€涓澶栫殑鍙傛暟鎸囧畾鍥炶皟鐨勬柟娉曪紝綆€鍗曠殑鍔炴硶鏄皢榪欎釜鍥炶皟鏂規(guī)硶鍖呭惈鍦ㄤ竴涓叾瀹冪殑function涓?
// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );
// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );
鐢ㄥ埌綆€鍗曠殑AJAX鍚庯紝鎴戜滑鍙互璁や負宸茬粡闈炲父涔嬧€渨eb2.0鈥濅簡錛屼絾鏄埌鐜板湪涓烘錛屾垜浠繕緙哄皯涓€浜涢叿鐐殑鏁堟灉銆備笅涓€鑺傚皢浼氳皥鍒拌繖浜涙晥鏋?
涓€浜涘姩鎬佺殑鏁堟灉鍙互浣跨敤 show() 鍜?hide()鏉ヨ〃鐜?
$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});
浣犲彲浠ヤ笌 animate()鑱斿悎璧鋒潵鍒涘緩涓€浜涙晥鏋?濡備竴涓甫娓愭樉鐨勬粦鍔ㄦ晥鏋?
$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});
寰堝涓嶉敊鐨勬晥鏋滃彲浠ヨ闂?a >interface plugin collection. 榪欎釜绔欑偣鎻愪緵浜嗗緢澶歞emos鍜屾枃妗?/p>
榪欎簺鏁堟灉鎻掍歡鏄綅浜巎Query鎻掍歡鍒楄〃鐨勫墠闈㈢殑錛屽綋鐒朵篃鏈夊緢澶氬叾浠栫殑鎻掍歡錛屾瘮濡傛垜浠笅涓€绔犺鍒扮殑琛ㄦ牸鎺掑簭鎻掍歡銆?/p>
榪欎釜琛ㄦ牸鎺掑簭鎻掍歡鑳借鎴戜滑鍦ㄥ鎴風鎸夋煇涓€鍒楄繘琛屾帓搴忥紝寮曞叆jQuery鍜岃繖涓彃浠剁殑js鏂囦歡錛岀劧鍚庡憡璇夋彃浠朵綘鎯寵鍝釜琛ㄦ牸鎷ユ湁鎺掑簭鍔熻兘銆?/p>
瑕佹祴璇曡繖涓緥瀛愶紝鍏堝湪starterkit.html涓姞涓婂儚涓嬮潰榪欎竴琛岀殑浠ｇ爜錛?/p>
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
鐒跺悗鍙互榪欐牱璋冪敤涓嶇潃:
$(document).ready(function() {
$("#large").tableSorter();
});
鐜板湪鐐瑰向琛ㄦ牸鐨勭涓€琛宧ead鍖哄煙錛屼綘鍙互鐪嬪埌鎺掑簭鐨勬晥鏋滐紝鍐嶆鐐瑰向浼氭寜鏈掕繃鏉ョ殑欏哄簭榪涜鎺掑垪銆?/p>
榪欎釜琛ㄦ牸榪樺彲浠ュ姞涓€浜涚獊鍑烘樉紺虹殑鏁堟灉錛屾垜浠彲浠ュ仛榪欐牱涓€涓殧琛岃儗鏅壊錛堟枒椹嚎錛夋晥鏋?
$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});
鍏充簬榪欎釜鎻掍歡鐨勬洿澶氫緥瀛愬拰鏂囨。鍙互鍦?tablesorter棣栭〉鎵懼埌.
鍑犱箮鎵€鏈夌殑鐗逛歡閮芥槸榪欐牱鐢ㄧ殑:鍏坕nclude鎻掍歡鐨刯s鏂囦歡,鐒跺悗鍦ㄦ煇浜涘厓绱犱笂浣跨敤鎻掍歡瀹氫箟鐨勬柟娉?褰撶劧涔熸湁涓€浜涘弬鏁伴€夐」鏄彲浠ラ厤緗殑
緇忓父鏇存柊鐨勬彃浠跺垪琛ㄥ彲浠ヤ粠jQuery瀹樻柟绔?on the jQuery site鎵懼埌.
褰撲綘鏇寸粡甯稿湴浣跨敤jQuery鏃?浣犱細鍙戠幇灝嗕綘鑷繁鐨勪唬鐮佹墦鍖呮垚鎻掍歡鏄緢鏈夌敤澶勭殑,瀹冭兘鏂逛究鍦拌浣犵殑鍏徃鎴栬€呭叾浠栦漢榪涜閲嶇敤.涓嬩竴绔犳垜浠皢璋堝埌濡備綍鏋勫緩涓€涓嚜宸辯殑鎻掍歡.
鍐欎竴涓嚜宸辯殑jQuery鎻掍歡鏄潪甯稿鏄撶殑,濡傛灉浣犳寜鐓т笅闈㈢殑鍘熷垯鏉ュ仛,鍙互璁╁叾浠栦漢涔熷鏄撳湴緇撳悎浣跨敤浣犵殑鎻掍歡.
jQuery.fn.foobar = function() {
// do something
};
jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};
浣犵幇鍦ㄥ彲浠ュ湪浣犵殑鎻掍歡涓嬌鐢ㄨ繖浜涘府鍔╁嚱鏁頒簡:
jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};
jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};
鐜板湪鍙互鏃犻渶鍋氫換浣曢厤緗湴浣跨敤鎻掍歡浜?榛樿鐨勫弬鏁板湪姝ゆ椂鐢熸晥:
$("...").foobar();
鎴栬€呭姞鍏ヨ繖浜涘弬鏁板畾涔?
$("...").foobar({
value: 123,
bar: 9
});
濡傛灉浣爎elease浣犵殑鎻掍歡, 浣犺繕搴旇鎻愪緵涓€浜涗緥瀛愬拰鏂囨。,澶ч儴鍒嗙殑鎻掍歡閮藉叿澶囪繖浜涜壇濂界殑鍙傝€冩枃妗?
鐜板湪浣犲簲璇ユ湁浜嗗啓涓€涓彃浠剁殑鍩虹,璁╂垜浠瘯鐫€鐢ㄨ繖浜涚煡璇嗗啓涓€涓嚜宸辯殑鎻掍歡.
寰堝浜鴻瘯鐫€鎺у埗鎵€鏈夌殑radio鎴栬€卌heckbox鏄惁琚€変腑,姣斿:
$("input[type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});
鏃犺浣曟椂鏈欙紝褰撲綘鐨勪唬鐮佸嚭鐜癳ach鏃訛紝浣犲簲璇ラ噸鍐欎笂闈㈢殑浠ｇ爜鏉ユ瀯閫犱竴涓彃浠?寰堢洿鎺ュ湴:
$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
榪欎釜鎻掍歡鐜板湪鍙互榪欐牱鐢?
$('input:checkbox').check();
鐜板湪浣犲簲璇ヨ繕鍙互鍐欏嚭uncheck()鍜宼oggleCheck()浜?浣嗘槸鍏堝仠涓€涓?璁╂垜浠殑鎻掍歡鎺ユ敹涓€浜涘弬鏁?
$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
榪欓噷鎴戜滑璁劇疆浜嗛粯璁ょ殑鍙傛暟,鎵€浠ュ皢"on"鍙傛暟鐪佺暐涔熸槸鍙互鐨?褰撶劧涔熷彲浠ュ姞涓?on","off", 鎴?"toggle",濡?
$("input[type='checkbox']").check();
$("input[type='checkbox']").check('on');
$("input[type='checkbox']").check('off');
$("input[type='checkbox']").check('toggle');
濡傛灉鏈夊浜庝竴涓殑鍙傛暟璁劇疆浼氱◢紼嶆湁鐐瑰鏉?鍦ㄤ嬌鐢ㄦ椂濡傛灉鍙兂璁劇疆絎簩涓弬鏁?鍒欒鍦ㄧ涓€涓弬鏁頒綅緗啓鍏ull.
浠庝笂涓€绔犵殑tablesorter鎻掍歡鐢ㄦ硶鎴戜滑鍙互鐪嬪埌,鏃㈠彲浠ョ渷鐣ユ墍鏈夊弬鏁版潵浣跨敤鎴栬€呴€氳繃涓€涓?key/value 瀵規(guī)潵閲嶆柊璁劇疆姣忎釜鍙傛暟.
浣滀負涓€涓粌涔?浣犲彲浠ヨ瘯鐫€灝?絎洓绔?/a> 鐨勫姛鑳介噸鍐欎負涓€涓彃浠?榪欎釜鎻掍歡鐨勯鏋跺簲璇ユ槸鍍忚繖鏍風殑:
$.fn.rateMe = function(options) {
var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context
var settings = {
url: "rate.php"
// put more defaults here
// remember to put a comma (",") after each pair, but not after the last one!
};
if(options) { // check if options are present before extending the settings
$.extend(settings, options);
}
// ...
// rest of the code
// ...
return this; // if possible, return "this" to not break the chain
});
濡傛灉浣犳兂鍋氭洿濂界殑javascript寮€鍙?寤鴻浣犱嬌鐢ㄤ竴涓彨 FireBug鐨刦irefox鎻掍歡. 瀹冩彁渚涗簡鏂偣璋冭瘯(姣攁lert寮哄浜?銆佽瀵烡OM鍙樺寲絳夊緢澶氭紓浜殑鍔熻兘
濡傛灉浣犺繕鏈夋湭瑙ｅ喅鐨勯棶棰橈紝鎴栬€呮柊鐨勬兂娉曚笌寤鴻錛屼綘鍙互浣跨敤jQuery鐨勯偖浠跺垪琛?jQuery mailing list.
鍏充簬榪欎釜鎸囧崡鐨勪換浣曚簨鎯咃紝浣犲彲浠ュ啓mail緇欎綔鑰呮垨鑰呭彂琛ㄨ瘎璁哄湪浠栫殑鏃ュ織錛?a >blog.
澶уぇ鎰熻阿John Resig鍒涢€犱簡榪欎箞濂界殑library! 鎰熻阿jQuery community 涓篔ohn鎻愪緵浜嗗姝ゅ鐨勫挅鍟″拰鍏朵粬鐨勪竴鍒?