姝ゆ枃浠ュ疄渚嬩负鍩虹涓€姝ユ璇存槑浜唈Query镄勫伐浣沧柟寮忋€傜幇浠ヤ腑鏂囩炕璇戯纸娣诲姞鎴戠殑琛ュ厖璇存槑锛夊涓嬨€傚链夌浉鍏虫剰瑙佹垨寤鸿璇?EMAIL 锻婄煡銆傛垨钥呭湪 BLOG涓暀瑷€銆?/p>
鑻辨枃铡熺増锛?a href="http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery">http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery 锛屾劅璋㈠师鏂囦綔钥?J枚rn Zaefferer 链枃鍙戝竷宸插緛姹傚师浣滆€呭悓镒忋€?/strong>
璇存槑:鍦ㄦ湰鏁欑▼鍙戝竷涔嫔悗锛屽缑鍒颁简鍑犱釜缃戝弸镄勬寚姝ｏ紝瀵归儴鍒嗗唴瀹逛綔浜嗕慨姝ｏ紝浣嗗湪jQuery鐗堟湰涓嶆柇镟存柊镄勬儏鍐典笅锛屾暀绋嬩腑镄勬煇浜涘唴瀹瑰凡缁忚绷镞讹纸灏ゅ叾鏄?.3浠ヤ笂鐗堟湰锛夛紝鍦ㄥ繝浜庡师鏂囩殑鍩虹涓婏紝鎴戝皢杩欓儴鍒嗗唴瀹瑰姞浠ユ爣绾㈢殑琛ュ厖璇存槑锛屽笇链涙洿澶氱殑鍓岖寮€鍙戣€呰兘瀵规鏂囨彁鍑哄疂璐垫剰瑙侊紝璋㈣阿锛?--2009-3-10
鍙﹀鎴戣涓哄湪瀛︿范杩囩▼涓?链変袱涓狝PI鏂囨。浣犺镓揿紑闅忔椂镆ョ湅:
杩欎釜鎸囧崡鏄竴涓jQuery搴撶殑璇存槑锛岃姹傝钥呬简瑙TML(DOM)鍜孋SS镄勪竴浜涘父璇嗐€傚畠鍖呮嫭浜嗕竴涓亩鍗旷殑Hello World镄勪緥瀛愶紝阃夋嫨鍣ㄥ拰浜嬩欢鍩虹锛孉JAX銆丗X镄勭敤娉曪紝浠ュ强濡备綍鍒朵綔jQuery镄勬彃浠躲€? 杩欎釜鎸囧崡鍖呮嫭浜嗗緢澶氢唬镰侊紝浣犲彲浠opy瀹冧滑锛屽苟璇旷潃淇敼瀹冧滑锛岀湅鐪嬩骇鐢熺殑鏁堟灉銆?
涓€寮€濮?鎴戜滑闇€瑕佷竴涓猨Query镄勫簱,链€鏂扮殑涓嬭浇鍙互鍒?a href="http://docs.jquery.com/Downloading_jQuery">杩欓噷镓惧埌銆傝繖涓寚鍗楁彁渚涗竴涓熀链寘鍚疄渚嬬殑鍖呬緵涓嬭浇.
涓嬭浇锛?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璇诲彇鍜屽鐞嗘枃妗ｇ殑DOM,蹇呴』灏藉彲鑳藉揩鍦板湪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瑙傚疗鏁堟灉銆?
璁╂垜浠湅涓€涓嬭繖浜涗慨鏀规槸浠€涔埚惈涔夈€?("a") 鏄竴涓猨Query阃夋嫨鍣?selector),鍦ㄨ繖閲岋紝瀹冮€夋嫨镓€链夌殑a镙囩锛堣疟钥匥eel娉细鍗?lt;a></a>锛?/span>锛?鍙锋槸 jQuery 钬灭被钬?jQuery "class")镄勪竴涓埆绉帮紝锲犳$()鏋勯€犱简涓€涓柊镄刯Query 瀵硅薄(jQuery object)銆傚嚱鏁?click() 鏄繖涓猨Query瀵硅薄镄勪竴涓柟娉曪紝瀹幂粦瀹氢简涓€涓崟鍑讳簨浠跺埌镓€链夐€変腑镄勬爣绛?杩欓噷鏄墍链夌殑a镙囩),骞跺湪浜嬩欢瑙﹀彂镞舵墽琛屼简瀹冩墍鎻愪緵镄刟lert鏂规硶.
杩欓噷链変竴涓嫙琛岀浉浼煎姛鑳界殑浠ｇ爜:
<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(鏂规硶)銆傝繖涓ょ鏂瑰纺杩桦彲浠ヨ仈鍚堣捣鏉ユ贩鍚堜娇鐢ㄣ€?/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 )鑳屾櫙鑹插彉鎴愪简绾㈣壊锛岃€岀浜屼釜链夊簭鍒楄〃娌℃湁鍙桦寲.
鐜板湪锛岃鎴戜滑娣诲姞涓€浜涙柊镄勬牱寮忓埌list镄勫瓙鑺傜偣.
$(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" href="http://jquery.com/docs/Base/Expression/XPath/" title="Documentation for XPath selectors">XPath渚嫔瓙锛屾洿澶氱殑渚嫔瓙鍜屽垪琛ㄥ彲浠ュ湪杩欓噷镓惧埌銆?span class="log">锛堣疟钥匥eel娉细鍏ラ棬鐪嬫鏂囷紝淇鍦ㄤ釜浜猴紝瑕佹兂鍦ㄥ叆闂ㄤ箣鍚庢哕镟村锛屾墍浠ヨ繖娈佃瘽镄勫嚑涓摼鎺ヨ繜镞╂槸瑕佸繀鐪嬬殑锛佷笉浼氩张瑕佺炕璇戝惂...^_^!锛?/span>
姣忎竴涓猳nXXX浜嬩欢閮芥湁鏁堬紝濡俹nclick,onchange,onsubmit绛夛紝閮芥湁jQuery绛変环琛ㄧず鏂规硶锛堣疟钥匥eel娉细jQuery涓嶅枩娆nXXX锛屾墍浠ラ兘鏀规垚浜哫XX锛屽幓鎺変简on锛?/span>銆?a class="doc" href="http://docs.jquery.com/Events"
title="Documentation for advanced events">鍏朵粬镄勪竴浜涗簨浠?/a>锛屽ready鍜宧over,涔熸彁渚涗简鐩稿簲镄勬柟娉曘€?/p>
浣犲彲浠ュ湪Visual jQuery镓惧埌鍏ㄩ儴镄勪簨浠跺垪琛紝鍦‥vents镙忕洰涓? 鐢ㄨ繖浜涢€夋嫨鍣ㄥ拰浜嬩欢浣犲凡缁忓彲浠ュ仛寰埚镄勪簨鎯呬简锛屼絾杩欓噷链変竴涓洿寮虹殑濂戒笢涓滐紒 find() 璁╀綘鍦ㄥ凡缁忛€夋嫨镄别lement涓綔鏉′欢镆ユ垒,锲犳 $("#orderedlist).find("li") 灏卞儚 $("#orderedlist li")涓€镙枫€俥ach()鏂规硶杩唬浜嗘墍链夌殑li锛屽苟鍙互鍦ㄦ鍩虹涓娄綔镟村镄勫鐞嗐€?澶ч儴鍒嗙殑鏂规硶,濡俛ddClass(), 閮藉彲浠ョ敤瀹冧滑镊繁镄?each() 銆傚湪杩欎釜渚嫔瓙涓? html()鐢ㄦ潵銮峰彇姣忎釜li镄删tml鏂囨湰, 杩藉姞涓€浜涙枃瀛楋紝骞跺皢涔嬭缃负li镄删tml鏂囨湰銆?span class="log">锛堣疟钥匥eel娉细浠庤繖涓緥瀛愬彲浠ョ湅鍒?html()鏂规硶鏄幏鍙栧璞＄殑html浠ｇ爜锛岃€?html('xxx')鏄缃?xxx'涓哄璞＄殑html浠ｇ爜锛?/span> 鍙︿竴涓粡甯哥鍒扮殑浠诲姟鏄湪娌℃湁琚玧Query瑕嗙洊镄凞OM鍏幂礌涓奵all涓€浜涙柟娉曪紝鎯冲儚涓€涓湪浣犵敤AJAX鏂瑰纺鎴愬姛鎻愪氦鍚庣殑reset锛?/p>
锛堣疟钥匥eel娉细杩欓噷浣滆€呭皢form镄刬d涔熷啓鎴愪简form锛屾簮鏂囦欢链?lt;form id="form">锛岃繖鏄潪甯镐笉濂界殑鍐欐硶锛屼綘鍙互灏呜繖涓狪D鏀规垚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() 鏂规硶鏉ヨВ鍐宠繖涓棶棰朴€?filter()浠ヨ绷婊よ〃杈惧纺鏉ュ噺灏戜笉绗﹀悎镄勮阃夋嫨椤? not()鍒欑敤鏉ュ彇娑堟墍链夌鍚堣绷婊よ〃杈惧纺镄勮阃夋嫨椤? 钥冭槛涓€涓棤搴忕殑list锛屼綘鎯宠阃夋嫨镓€链夌殑娌℃湁ul瀛愬厓绱犵殑li鍏幂礌銆?/p>
杩欎釜浠ｇ爜阃夋嫨浜嗘墍链夌殑li鍏幂礌锛岀劧鍚庡幓闄や简链塽l瀛愬厓绱犵殑li鍏幂礌銆傚埛鏂版祻瑙埚櫒鍚庯紝镓€链夌殑li鍏幂礌閮芥湁浜嗕竴涓竟妗嗭紝鍙湁ul瀛愬厓绱犵殑闾ｄ釜li鍏幂礌渚嫔銆?/p>
锛堣疟钥匥eel娉细璇锋敞镒忎綋浼氭柟渚夸箣鏋佺殑css()鏂规硶锛屽苟鍐嶆鎻愰啋璇峰姟蹇呭疄闄呮祴璇曡瀵熸晥鏋滐紝姣旀柟璇存崲涓狢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()鏂规硶锛岀涓€娆ind()鏂规硶浼氱粨鏉?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鏂规硶镄勭壒镣癸紝璇峰湪API鏂囨。涓煡阒卙over锛屼笂闱篃链変緥瀛愯鏄庯级
鍦ㄦ垜浠户缁箣鍓嶆垜浠厛鏉ョ湅鐪嬭繖涓€姝ワ细 jQuery浼氲浠ｇ爜鍙桦缑镟寸煭浠庤€屾洿瀹规槗鐞呜В鍜岀淮鎶わ紝涓嬮溃鏄?(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鏂规硶琚玞ss鏂规硶鍙栦唬
});
$(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娉细灏辨槸瀵规煇浜涗笢瑗挎姇绁级锛屽氨镀忓湪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鏂规硶鍙互浠?a class="doc" href="http://jquery.com/docs/AJAXModule/" title="Documentation for AJAX methods">杩欓噷 镓惧埌锛屾垨钥呯湅鐪?a href="http://visualjquery.com/">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)镄勫弬鏁般€备綘鍙互阃氲绷涓€涓澶栫殑鍙傛暟鎸囧畾锲炶皟镄勬柟娉曪紝绠€鍗旷殑锷炴硶鏄皢杩欎釜锲炶皟鏂规硶鍖呭惈鍦ㄤ竴涓叾瀹幂殑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 href="http://interface.eyecon.ro/">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 瀵规潵閲嶆柊璁剧疆姣忎釜鍙傛暟.
浣滀负涓€涓粌涔?浣犲彲浠ヨ瘯镌€灏?绗洓绔?/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 href="http://bassistance.de/index.php/2006/09/12/jquery-getting-started-guide/">blog.
澶уぇ镒熻阿John Resig鍒涢€犱简杩欎箞濂界殑library! 镒熻阿jQuery community 涓篔ohn鎻愪緵浜嗗姝ゅ镄勫挅鍟″拰鍏朵粬镄勪竴鍒?