杩欎釜鍑芥暟鎺ユ敹涓涓鍖呭惈CSS鎴栧熀鏈鐨刋Path閫夋嫨绗︾殑瀛楃︿覆锛岀劧鍚庣敤杩欎釜瀛楃︿覆鍘诲尮閰嶄竴缁勫厓绱犮
jQuery鐨勬牳蹇冨姛鑳介兘鏄閫氳繃杩欎釜鍑芥暟瀹炵幇鐨勩
jQuery涓鐨勪竴鍒囬兘鏋勫缓浜庤繖涓鍑芥暟涔嬩笂锛屾垨鑰呰撮兘鏄鍦ㄤ互鏌愮嶆柟寮忎娇鐢ㄨ繖涓鍑芥暟銆
杩欎釜鍑芥暟鏈鍩烘湰鐨勭敤娉曞氨鏄鍚戝畠浼犻掍竴涓琛ㄨ揪寮忥紙閫氬父鐢盋SS鎴朮Path閫夋嫨绗︾粍鎴愶級锛岀劧鍚庢牴鎹杩欎釜琛ㄨ揪寮忔潵鏌ヨ㈡墍鏈夊尮閰嶇殑鍏冪礌銆
鍦ㄩ粯璁ゆ儏鍐典笅锛$()鏌ヨ㈢殑鏄褰撳墠HTML鏂囨。涓鐨凞OM鍏冪礌銆
This function accepts a string containing a CSS or
basic XPath selector which is then used to match a set of elements.
The core functionality of jQuery centers around this function.
Everything in jQuery is based upon this, or uses this in some way.
The most basic use of this function is to pass in an expression
(usually consisting of CSS or XPath), which then finds all matching
elements.
By default, $() looks for DOM elements within the context of the
current HTML document.
$(Element)
$(Element<Array>)
鐢ㄦ潵鏌ヨ㈢敤鐨勫瓧绗︿覆
锛堝彲閫夛級浣滀负涓婁笅鏂囩殑DOM鍏冪礌銆佹枃妗f垨jQuery瀵硅薄銆
鎵惧埌鎵鏈夋槸div鍏冪礌瀛愬厓绱犵殑p鍏冪礌銆
<p>one</p> <div><p>two</p></div> <p>three</p>
$("div > p")
[ <p>two</p> ]
鍦ㄦ枃妗g殑绗涓涓琛ㄥ崟涓锛屾悳绱㈡墍鏈夊崟閫夋寜閽锛堟垨锛歵ype鍊间负radio鐨刬nput鍏冪礌锛夈
$("input:radio", document.forms[0])
鏌ヨ㈡寚瀹歑ML鏂囨。涓鐨勬墍鏈塪iv鍏冪礌銆
$("div", xml.responseXML)
杩欎釜鍑芥暟鎺ユ敹涓涓鐢盚TML鏍囪颁唬鐮佺粍鎴愮殑瀛楃︿覆銆
杩欎釜HTML瀛楃︿覆涓嶅悓浜庣敤鏉ヨ〃绀洪偅浜汬TML瀛楃︿覆銆佸苟鎹浠ユ煡璇㈢浉搴擠OM鍏冪礌鐨勯夋嫨绗︼紝涓鑸鑰岃█锛岄殢鍚庨兘浼氭妸杩欎釜HTML浠g爜涓叉彃鍏ュ埌鏂囨。涓鍘汇
This function accepts a string of raw HTML.
The HTML string is different from the traditional selectors in that
it creates the DOM elements representing that HTML string, on the fly,
to be (assumedly) inserted into the document later.
瑕佸姩鎬佸垱寤虹殑HTML鏍囪颁唬鐮佸瓧绗︿覆
鍔ㄦ佸垱寤轰竴涓猟iv鍏冪礌锛堜互鍙婂叾涓鐨勬墍鏈夊唴瀹癸級锛
骞跺皢瀹冭拷鍔犲埌ID鍊间负body鐨勫厓绱犱腑銆
鍦ㄨ繖涓鍑芥暟鐨勫唴閮锛屾槸閫氳繃涓存椂鍒涘缓涓涓鍏冪礌锛屽苟灏嗚繖涓鍏冪礌鐨刬nnerHTML灞炴ц剧疆涓虹粰瀹氱殑鏍囪板瓧绗︿覆锛屾潵瀹炵幇鏍囪板埌DOM鍏冪礌杞鎹㈢殑銆
鎵浠ワ紝杩欎釜鍑芥暟鏃㈡湁鐏垫椿鎬э紝涔熸湁灞闄愭с
$("<div><p>Hello</p></div>").appendTo("#body")
涓轰竴涓鎴栧氫釜DOM鍏冪礌鎹嗙粦jQuery鍔熻兘銆
杩欎釜鍑芥暟涔熷彲浠ユ帴鏀禭ML鏂囨。鍜學indow瀵硅薄锛堣櫧鐒跺畠浠涓嶆槸DOM鍏冪礌锛変綔涓烘湁鏁堢殑鍙傛暟銆
Wrap jQuery functionality around a single or multiple DOM Element(s).
This function also accepts XML Documents and Window objects
as valid arguments (even though they are not DOM Elements).
鐢眏Query瀵硅薄灏佽呯殑DOM鍏冪礌
涓 $("div > p") 鐩稿悓銆
<p>one</p> <div><p>two</p></div> <p>three</p>
$(document).find("div > p")
[ <p>two</p> ]
鎶婇〉闈㈢殑鑳屾櫙棰滆壊璁剧疆涓洪粦鑹层
$(document.body).background( "black" );
闅愯棌琛ㄥ崟涓鐨勬墍鏈塱nput鍏冪礌銆
$( myForm.elements ).hide()
$(document).ready()鐨勭畝鍐欐柟寮忥紝鍏佽镐綘缁戝畾涓涓鍦―OM鏂囨。杞藉叆瀹屾垚鍚庢墽琛岀殑鍑芥暟銆
杩欎釜鍑芥暟鐨勪綔鐢ㄥ傚悓$(document).ready()涓鏍凤紝鍙涓嶈繃鐢ㄨ繖涓鍑芥暟鏃讹紝闇瑕佹妸椤甸潰涓鎵鏈夊叾浠栫殑$()鎿嶄綔绗﹂兘鍖呰呭埌鍏朵腑鏉ャ
浠庢妧鏈涓婃潵璇达紝杩欎釜鍑芥暟鏄鍙閾炬帴鐨勶紞锛嶄絾鐪熸d互杩欑嶆柟寮忛摼鎺ョ殑鎯呭喌骞朵笉澶氥
浣犲彲浠ュ湪涓涓椤甸潰涓浣跨敤浠绘剰澶氫釜$(document).ready浜嬩欢銆
瑕佽︾粏浜嗚Вready浜嬩欢锛岃乺eady(Function)銆
A shorthand for $(document).ready(), allowing you to bind a function
to be executed when the DOM document has finished loading. This function
behaves just like $(document).ready(), in that it should be used to wrap
all of the other $() operations on your page. While this function is,
technically, chainable - there really isn't much use for chaining against it.
You can have as many $(document).ready events on your page as you like.
See ready(Function) for details about the ready event.
褰揇OM杞藉叆瀹屾垚鍚庤佹墽琛岀殑鍑芥暟
褰揇OM灏辩华鍙鐢ㄦ椂锛屾墽琛屽叾涓鐨勫嚱鏁般
$(function(){
// DOM鏂囨。宸茬粡杞藉叆灏辩华
});
鍒涘缓涓涓猨Query瀵硅薄鍏嬮殕鐨勫壇鏈鐨勬柟娉曘
杩欎釜鍑芥暟浼氫粠涓涓猨Query瀵硅薄涓鎷疯礉鍑轰竴缁勫尮閰嶇殑鍏冪礌锛岀户鑰屽垱寤哄彟澶栦竴涓鏂扮殑銆佸寘鍚鐩稿悓鍏冪礌鐨刯Query瀵硅薄銆
A means of creating a cloned copy of a jQuery object. This function
copies the set of matched elements from one jQuery object and creates
another, new, jQuery object containing the same elements.
瑕佸厠闅嗙殑 jQuery 瀵硅薄
鐢ㄦ墍鏈塪iv鍏冪礌鏉ユ煡鎵炬墍鏈塸鍏冪礌锛屼絾涓嶄細鐮村潖鍖呭惈鍦ㄢ渄iv鈥濅腑鍘熷嬬殑jQuery瀵硅薄锛堝氨鍍忕畝鍗曞湴浣跨敤div.find("p")閫氬父閮戒細浜х敓鐨勭粨鏋滀竴鏍凤級銆
var div = $("div");
$( div ).find("p");
jQuery搴撶殑褰撳墠鐗堟湰鍙枫
The current version of jQuery.
褰撳墠鍖归厤鐨勫厓绱犳暟閲忋
The number of elements currently matched.
$("img").length;
2
<img src="test1.jpg"/> <img src="test2.jpg"/>
褰撳墠鍖归厤鐨勫厓绱犳暟閲忋
The number of elements currently matched.
$("img").size();
2
<img src="test1.jpg"/> <img src="test2.jpg"/>
鍙栧緱鎵鏈夊尮閰嶇殑鍏冪礌銆
杩欐槸鍙栧緱鎵鏈夊尮閰嶅厓绱犵殑涓绉嶄互鍚戝悗鍏煎圭殑鏂瑰紡锛堜笉鍚屼簬jQuery瀵硅薄锛岃屽疄闄呬笂鍝涓涓閮芥槸鍏冪礌鏁扮粍锛夈
Access all matched elements. This serves as a backwards-compatible
way of accessing all matched elements (other than the jQuery object
itself, which is, in fact, an array of elements).
閫夋嫨鏂囨。涓鐨勬墍鏈夊浘鍍忥紝骞惰繑鍥炵浉搴旂殑DOM鍏冪礌鏁扮粍銆
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get();
[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]
鍙栧緱鍏朵腑涓涓鍖归厤鐨勫厓绱犮
num琛ㄧず鍙栧緱绗鍑犱釜鍖归厤鐨勫厓绱犮
Access a single matched element. num is used to access the
Nth element matched.
鍙栧緱绗琻um涓浣嶇疆涓婄殑鍏冪礌
閫夋嫨鏂囨。涓鎵鏈夌殑鍥惧儚锛屽苟杩斿洖绗涓涓銆
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);
[ <img src="test1.jpg"/> ]
鎶妀Query瀵硅薄璁剧疆涓轰竴涓鍏冪礌鏁扮粍锛屽苟缁存寔鍫嗘爤鐨勭姸鎬併
Set the jQuery object to an array of elements, while maintaining
the stack.
鍏冪礌鏁扮粍
$("img").set([ document.body ]);
$("img").set() == [ document.body ]
鎶妀Query瀵硅薄璁剧疆涓轰竴涓鍏冪礌鏁扮粍銆
杩欎釜鎿嶄綔瀹屽叏鏄鐮村潖鎬х殑锛嶏紞濡傛灉浣犲笇鏈涚淮鎸乯Query瀵硅薄鐨勫爢鏍堢姸鎬侊紝涓瀹氳佷娇鐢.set()鍑芥暟銆
Set the jQuery object to an array of elements. This operation is
completely destructive - be sure to use .set() if you wish to maintain
the jQuery stack.
鏁扮粍鍏冪礌
$("img").setArray([ document.body ]);
$("img").setArray() == [ document.body ]
浠ユ瘡涓涓鍖归厤鐨勫厓绱犱綔涓轰笂涓嬫枃鏉ユ墽琛屼竴涓鍑芥暟銆
杩欐剰鍛崇潃锛屾瘡娆℃墽琛屼紶閫掕繘鏉ョ殑鍑芥暟鏃讹紝鍑芥暟涓鐨則his鍏抽敭瀛楅兘鎸囧悜涓涓涓嶅悓鐨勫厓绱狅紙姣忔¢兘鏄涓涓涓嶅悓鐨勫尮閰嶅厓绱狅級銆
鑰屼笖锛屽湪姣忔℃墽琛屽嚱鏁版椂锛岄兘浼氱粰鍑芥暟浼犻掍竴涓琛ㄧず浣滀负鎵ц岀幆澧冪殑鍏冪礌鍦ㄥ尮閰嶇殑鍏冪礌闆嗗悎涓鎵澶勪綅缃鐨勬暟瀛楀间綔涓哄弬鏁般
Execute a function within the context of every matched element.
This means that every time the passed-in function is executed
(which is once for every element matched) the 'this' keyword
points to the specific element.
Additionally, the function, when executed, is passed a single
argument representing the position of the element in the matched
set.
瑕佹墽琛岀殑鍑芥暟
杩浠d袱涓鍥惧儚锛屽苟璁剧疆瀹冧滑鐨剆rc灞炴с
<img/><img/>
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
<img src="test0.jpg"/><img src="test1.jpg"/>
鎼滅储涓庡弬鏁拌〃绀虹殑瀵硅薄鍖归厤鐨勫厓绱狅紝骞惰繑鍥炵浉搴斿厓绱犵殑绱㈠紩鍊笺
濡傛灉鎵惧埌浜嗗尮閰嶇殑鍏冪礌锛屼粠0寮濮嬭繑鍥烇紱濡傛灉娌℃湁鎵惧埌鍖归厤鐨勫厓绱狅紝杩斿洖-1銆
Searches every matched element for the object and returns
the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.
瑕佹悳绱㈢殑瀵硅薄
杩斿洖ID鍊间负foobar鐨勫厓绱犵殑绱㈠紩鍊笺
<div id="foobar"></div><b></b><span id="foo"></span>
$("*").index( $('#foobar')[0] )
0
杩斿洖ID鍊间负fo鐨勫厓绱犵殑绱㈠紩鍊笺
<div id="foobar"></div><b></b><span id="foo"></span>
$("*").index( $('#foo'))
2
鍥犱负娌℃湁ID鍊间负bar鐨勫厓绱狅紝鎵浠ヨ繑鍥 -1銆
<div id="foobar"></div><b></b><span id="foo"></span>
$("*").index( $('#bar'))
-1
濡傛灉娌℃湁灏卞湪table鍏冪礌涓鎻掑叆tbody
濡傛灉dir灏忎簬0锛屽垯浠ョ浉鍙嶇殑绋嬪簭澶勭悊鍙傛暟
鎵ц孌OM澶勭悊鐨勫嚱鏁
鎵╁睍jQuery瀵硅薄銆
鍙浠ョ敤浜庢妸鍑芥暟娣诲姞鍒癹Query鍚嶇О绌洪棿涓锛屼互鍙婃坊鍔犳彃浠舵柟娉曪紙鎻掍欢锛夈
Extends the jQuery object itself. Can be used to add functions into
the jQuery namespace and to add plugin methods (plugins).
瑕佸悎骞跺埌jQuery瀵硅薄涓鐨勫硅薄
娣诲姞涓や釜鎻掍欢鏂规硶銆
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();
鍚慾Query鍚嶇О绌洪棿涓娣诲姞涓や釜鍑芥暟銆
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
杩愯岃繖涓鍑芥暟灏嗗彉閲$鐨勬帶鍒舵潈璁╂浮缁欑涓涓瀹炵幇瀹冪殑閭d釜搴撱
杩欐牱鍙浠ョ‘淇漥Query涓嶄細涓庡叾浠栧簱鐨$瀵硅薄鍙戠敓鍐茬獊銆
鍦ㄨ繍琛岃繖涓鍑芥暟鍚庯紝灏卞彧鑳戒娇鐢╥Query鍙橀噺璁块棶iQuery瀵硅薄銆
渚嬪傦紝鍦ㄨ佺敤鍒$("div p")鐨勫湴鏂癸紝灏卞繀椤绘崲鎴恑Query("div p")銆
Run this function to give control of the $ variable back
to whichever library first implemented it. This helps to make
sure that jQuery doesn't conflict with the $ object
of other libraries.
By using this function, you will only be able to access jQuery
using the 'jQuery' variable. For example, where you used to do
$("div p"), you now must do jQuery("div p").
灏$寮曠敤鐨勫硅薄鏄犲皠鍥炲師濮嬬殑瀵硅薄锛岃╂浮鍙橀噺$
jQuery.noConflict();
// 寮濮嬩娇鐢╦Query
jQuery("div p").hide();
// 浣跨敤鍏朵粬搴撶殑 $()
$("content").style.display = 'none';
鎭㈠嶄娇鐢ㄥ埆鍚$锛岀劧鍚庡垱寤哄苟鎵ц屼竴涓鍑芥暟锛屽湪杩欎釜鍑芥暟鐨勪綔鐢ㄥ煙涓浠嶇劧灏$浣滀负jQuery鐨勫埆鍚嶆潵浣跨敤銆
鍦ㄨ繖涓鍑芥暟涓锛屽師鏉ョ殑$瀵硅薄鏄鏃犳晥鐨勩傝繖涓鍑芥暟瀵逛簬澶у氭暟涓嶄緷璧栦簬鍏朵粬搴撶殑鎻掍欢閮藉崄鍒嗘湁鏁堛
jQuery.noConflict();
(function($) {
$(function() {
// 浣跨敤 $ 浣滀负 jQuery 鍒鍚嶇殑浠g爜
});
})(jQuery);
// 浣跨敤 $ 浣滀负鍒鍚嶇殑鍏朵粬搴撶殑浠g爜
灏嗗尮閰嶇殑鍏冪礌闆嗗悎缂╁噺涓轰竴涓鍏冪礌銆
杩欎釜鍏冪礌鍦ㄥ尮閰嶅厓绱犻泦鍚堜腑鐨勪綅缃鍙樹负0锛岃岄暱搴﹀彉鎴1銆
Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements
starts at 0 and goes to length - 1.
瑕佷繚鐣欑殑鍏冪礌鐨勭储寮
$("p").eq(1)
[ <p>So is this</p> ]
<p>This is just a test.</p><p>So is this</p>
灏嗗尮閰嶇殑鍏冪礌闆嗗悎缂╁噺涓虹粰瀹氫綅缃涔嬪墠鐨勬墍鏈夊厓绱犮
杩欎釜鍏冪礌鍦ㄥ尮閰嶅厓绱犻泦鍚堜腑鐨勪綅缃鍙樹负0锛岃岄暱搴﹀彉鎴1銆
Reduce the set of matched elements to all elements before a given position.
The position of the element in the set of matched elements
starts at 0 and goes to length - 1.
鎶婇泦鍚堢缉鍑忎负杩欎釜浣嶇疆涔嬩笅鐨勬墍鏈夊厓绱
$("p").lt(1)
[ <p>This is just a test.</p> ]
<p>This is just a test.</p><p>So is this</p>
灏嗗尮閰嶇殑鍏冪礌闆嗗悎缂╁噺涓虹粰瀹氫綅缃涔嬪悗鐨勬墍鏈夊厓绱犮
杩欎釜鍏冪礌鍦ㄥ尮閰嶅厓绱犻泦鍚堜腑鐨勪綅缃鍙樹负0锛岃岄暱搴﹀彉鎴1銆
Reduce the set of matched elements to all elements after a given position.
The position of the element in the set of matched elements
starts at 0 and goes to length - 1.
鎶婇泦鍚堢缉鍑忎负杩欎釜浣嶇疆涔嬪悗鐨勬墍鏈夊厓绱
$("p").gt(0)
[ <p>So is this</p> ]
<p>This is just a test.</p><p>So is this</p>
鍙栧緱绗涓涓鍖归厤鍏冪礌鐨勫睘鎬у笺
閫氳繃杩欎釜鏂规硶鍙浠ユ柟渚垮湴浠庣涓涓鍖归厤鍏冪礌涓鑾峰彇涓涓灞炴х殑鍊笺
Access a property on the first matched element.
This method makes it easy to retrieve a property value
from the first matched element.
灞炴у悕绉
杩斿洖鏂囨。涓绗涓涓鍥惧儚鐨剆rc灞炴у笺
<img src="test.jpg"/>
$("img").attr("src");
test.jpg
灏嗕竴涓鈥滃悕/鍊尖濆舰寮忕殑瀵硅薄璁剧疆涓烘墍鏈夊尮閰嶅厓绱犵殑灞炴с
杩欐槸涓绉嶅湪鎵鏈夊尮閰嶅厓绱犱腑鎵归噺璁剧疆寰堝氬睘鎬х殑鏈浣虫柟寮忋
Set a key/value object as properties to all matched elements.
This serves as the best way to set a large number of properties
on all matched elements.
浣滀负灞炴х殑鈥滃悕/鍊煎光濆硅薄
涓烘墍鏈夊浘鍍忚剧疆src鍜宎lt灞炴с
<img/>
$("img").attr({ src: "test.jpg", alt: "Test Image" });
<img src="test.jpg" alt="Test Image"/>
涓烘墍鏈夊尮閰嶇殑鍏冪礌璁剧疆涓涓灞炴у笺
鍙浠ユ槸鐢${瑙勫垯}琛ㄨ揪寮忔彁渚涚殑璁$畻鍊硷紝瑙佺ず渚2銆
娉ㄦ剰锛屼笉鑳藉湪IE涓璁剧疆input鍏冪礌鐨刵ame灞炴с
鍙浠ヤ娇鐢$(html)鎴.append(html)鎴.html(html)鍔ㄦ佸湴鍒涘缓鍖呭惈name灞炴х殑input鍏冪礌銆
Set a single property to a value, on all matched elements.
Can compute values provided as ${formula}, see second example.
Note that you can't set the name property of input elements in IE.
Use $(html) or .append(html) or .html(html) to create elements
on the fly including the name property.
瑕佽剧疆鐨勫睘鎬у悕
瑕佽剧疆鐨勫
涓烘墍鏈夊浘鍍忚剧疆src灞炴с
<img/>
$("img").attr("src","test.jpg");
<img src="test.jpg"/>
浠src灞炴х殑鍊间綔涓簍itle灞炴х殑鍊笺備娇鐢ㄤ簡attr(String,Function)鐨勭畝鍐欐柟寮忋
<img src="test.jpg" />
$("img").attr("title", "${this.src}");
<img src="test.jpg" title="test.jpg" />
涓烘墍鏈夊尮閰嶇殑鍏冪礌璁剧疆涓涓璁$畻鐨勫睘鎬у笺
涓嶆彁渚涘硷紝鑰屾槸鎻愪緵涓涓鍑芥暟锛岀敱杩欎釜鍑芥暟璁$畻鐨勫间綔涓哄睘鎬у笺
Set a single property to a computed value, on all matched elements.
Instead of a value, a function is provided, that computes the value.
瑕佽剧疆鐨勫睘鎬у悕绉
杩斿洖鍊肩殑鍑芥暟
鎶妔rc灞炴х殑鍊艰剧疆涓簍itle灞炴х殑鍊笺
<img src="test.jpg" />
$("img").attr("title", function() { return this.src });
<img src="test.jpg" title="test.jpg" />
鍙栧緱鎵鏈夊尮閰嶅厓绱犵殑鍐呭广
缁撴灉鏄鐢辨墍鏈夊尮閰嶅厓绱犲寘鍚鐨勬枃鏈鍐呭圭粍鍚堣捣鏉ョ殑鏂囨湰銆
杩欎釜鏂规硶瀵笻TML鍜孹ML鏂囨。閮芥湁鏁堛
Get the text contents of all matched elements. The result is
a string that contains the combined text contents of all matched
elements. This method works on both HTML and XML documents.
鍙栧緱鎵鏈夋佃惤涓鏂囨湰鍐呭圭殑缁勫悎銆
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
$("p").text();
Test Paragraph.Paraparagraph
璁剧疆鎵鏈夊尮閰嶅厓绱犵殑鏂囨湰鍐呭广
杩欎釜鍑芥暟涓巋tml()鍑芥暟鍏锋湁鍚屾牱鐨勬晥鏋溿
Set the text contents of all matched elements. This has the same
effect as html().
鏂囨湰鍐呭
璁剧疆鎵鏈夋佃惤鐨勬枃鏈鍐呭广
<p>Test Paragraph.</p>
$("p").text("Some new text.");
<p>Some new text.</p>
鑾峰緱绗涓涓鍖归厤鍏冪礌鐨勫綋鍓嶅笺
Get the current value of the first matched element.
$("input").val();
"some text"
<input type="text" value="some text"/>
璁剧疆姣忎竴涓鍖归厤鍏冪礌鐨勫笺
Set the value of every matched element.
瑕佽剧疆鐨勫笺
$("input").val("test");
<input type="text" value="test"/>
<input type="text" value="some text"/>
鍙栧緱绗涓涓鍖归厤鍏冪礌鐨刪tml鍐呭广
杩欎釜鍑芥暟涓嶈兘鐢ㄤ簬XML鏂囨。銆
Get the html contents of the first matched element.
This property is not available on XML documents.
$("div").html();
<input/>
<div><input/></div>
璁剧疆姣忎竴涓鍖归厤鍏冪礌鐨刪tml鍐呭广
杩欎釜鍑芥暟涓嶈兘鐢ㄤ簬XML鏂囨。銆
Set the html contents of every matched element.
This property is not available on XML documents.
Set the html contents to the specified value.
$("div").html("<b>new stuff</b>");
<div><b>new stuff</b></div>
<div><input/></div>
浠庢瘡涓涓鍖归厤鐨勫厓绱犱腑鍒犻櫎涓涓灞炴с
Remove an attribute from each of the matched elements.
瑕佸垹闄ょ殑灞炴у悕
$("input").removeAttr("disabled")
<input/>
<input disabled="disabled"/>
涓烘瘡涓鍖归厤鐨勫厓绱犳坊鍔犳寚瀹氱殑绫诲悕銆
Adds the specified class to each of the set of matched elements.
瑕佹坊鍔犲埌鍏冪礌涓鐨凜SS绫诲悕
$("p").addClass("selected")
[ <p class="selected">Hello</p> ]
<p>Hello</p>
浠庢墍鏈夊尮閰嶇殑鍏冪礌涓鍒犻櫎鍏ㄩ儴鎴栬呮寚瀹氱殑绫汇
Removes all or the specified class from the set of matched elements.
(鍙閫) 瑕佸垹闄ょ殑绫诲悕
$("p").removeClass()
[ <p>Hello</p> ]
<p class="selected">Hello</p>
$("p").removeClass("selected")
[ <p class="first">Hello</p> ]
<p class="selected first">Hello</p>
濡傛灉瀛樺湪锛堜笉瀛樺湪锛夊氨鍒犻櫎锛堟坊鍔狅級涓涓绫汇
Adds the specified class if it is not present, removes it if it is
present.
CSS绫诲悕
$("p").toggleClass("selected")
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
<p>Hello</p><p class="selected">Hello Again</p>
鎶婃墍鏈夊尮閰嶇殑鍏冪礌鐢ㄥ叾浠栧厓绱犵殑缁撴瀯鍖栨爣璁板寘瑁呰捣鏉ャ
杩欑嶅寘瑁呭逛簬鍦ㄦ枃妗d腑鎻掑叆棰濆栫殑缁撴瀯鍖栨爣璁版渶鏈夌敤锛岃屼笖瀹冧笉浼氱牬鍧忓師濮嬫枃妗g殑璇涔夊搧璐ㄣ
杩欎釜鍑芥暟鐨勫師鐞嗘槸妫鏌ユ彁渚涚殑绗涓涓鍏冪礌锛堝畠鏄鐢辨墍鎻愪緵鐨凥TML鏍囪颁唬鐮佸姩鎬佺敓鎴愮殑锛夛紝
骞跺湪瀹冪殑浠g爜缁撴瀯涓鎵惧埌鏈涓婂眰鐨勭栧厛鍏冪礌锛嶏紞杩欎釜绁栧厛鍏冪礌灏辨槸鍖呰呭厓绱犮
褰揌TML鏍囪颁唬鐮佷腑鐨勫厓绱犲寘鍚鏂囨湰鏃舵棤娉曚娇鐢ㄨ繖涓鍑芥暟銆傚洜姝わ紝濡傛灉瑕佹坊鍔犳枃鏈搴旇ュ湪鍖呰呭畬鎴愪箣鍚庡啀琛屾坊鍔犮
Wrap all matched elements with a structure of other elements.
This wrapping process is most useful for injecting additional
stucture into a document, without ruining the original semantic
qualities of a document.
This works by going through the first element
provided (which is generated, on the fly, from the provided HTML)
and finds the deepest ancestor element within its
structure - it is that element that will en-wrap everything else.
This does not work with elements that contain text. Any necessary text
must be added after the wrapping is done.
HTML鏍囪颁唬鐮佸瓧绗︿覆锛岀敤浜庡姩鎬佺敓鎴愬厓绱犲苟鍖呰呯洰鏍囧厓绱
$("p").wrap("<div class='wrap'></div>");
<div class='wrap'><p>Test Paragraph.</p></div>
<p>Test Paragraph.</p>
鎶婃墍鏈夊尮閰嶇殑鍏冪礌鐢ㄥ叾浠栧厓绱犵殑缁撴瀯鍖栨爣璁板寘瑁呰捣鏉ャ
杩欑嶅寘瑁呭逛簬鍦ㄦ枃妗d腑鎻掑叆棰濆栫殑缁撴瀯鍖栨爣璁版渶鏈夌敤锛岃屼笖瀹冧笉浼氱牬鍧忓師濮嬫枃妗g殑璇涔夊搧璐ㄣ
杩欎釜鍑芥暟鐨勫師鐞嗘槸妫鏌ユ彁渚涚殑绗涓涓鍏冪礌骞跺湪瀹冪殑浠g爜缁撴瀯涓鎵惧埌鏈涓婂眰鐨勭栧厛鍏冪礌锛嶏紞杩欎釜绁栧厛鍏冪礌灏辨槸鍖呰呭厓绱犮
褰揌TML鏍囪颁唬鐮佷腑鐨勫厓绱犲寘鍚鏂囨湰鏃舵棤娉曚娇鐢ㄨ繖涓鍑芥暟銆傚洜姝わ紝濡傛灉瑕佹坊鍔犳枃鏈搴旇ュ湪鍖呰呭畬鎴愪箣鍚庡啀琛屾坊鍔犮
Wrap all matched elements with a structure of other elements.
This wrapping process is most useful for injecting additional
stucture into a document, without ruining the original semantic
qualities of a document.
This works by going through the first element
provided and finding the deepest ancestor element within its
structure - it is that element that will en-wrap everything else.
This does not work with elements that contain text. Any necessary text
must be added after the wrapping is done.
鐢ㄤ簬鍖呰呯洰鏍囧厓绱犵殑DOM鍏冪礌
$("p").wrap( document.getElementById('content') );
<div id="content"><p>Test Paragraph.</p></div>
<p>Test Paragraph.</p><div id="content"></div>
鍚戞瘡涓鍖归厤鐨勫厓绱犲唴閮ㄨ拷鍔犲唴瀹广
杩欎釜鎿嶄綔涓庡规寚瀹氱殑鍏冪礌鎵ц宎ppendChild鏂规硶锛屽皢瀹冧滑娣诲姞鍒版枃妗d腑鐨勬儏鍐电被浼笺
Append content to the inside of every matched element.
This operation is similar to doing an appendChild to all the
specified elements, adding them into the document.
prepend(<Content>)
before(<Content>)
after(<Content>)
瑕佽拷鍔犲埌鐩鏍囦腑鐨勫唴瀹
鍚戞墍鏈夋佃惤涓杩藉姞涓浜汬TML鏍囪般
<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
<p>I would like to say: <b>Hello</b></p>
鍚戞墍鏈夋佃惤涓杩藉姞涓涓鍏冪礌銆
<p>I would like to say: </p><b id="foo">Hello</b>
$("p").append( $("#foo")[0] );
<p>I would like to say: <b id="foo">Hello</b></p>
鍚戞墍鏈夋佃惤涓杩藉姞涓涓猨Query瀵硅薄(绫讳技浜庝竴涓狣OM鍏冪礌鏁扮粍)銆
<p>I would like to say: </p><b>Hello</b>
$("p").append( $("b") );
<p>I would like to say: <b>Hello</b></p>
鍚戞瘡涓鍖归厤鐨勫厓绱犲唴閮ㄥ墠缃鍐呭广
杩欐槸鍚戞墍鏈夊尮閰嶅厓绱犲唴閮ㄧ殑寮濮嬪勬彃鍏ュ唴瀹圭殑鏈浣虫柟寮忋
Prepend content to the inside of every matched element.
This operation is the best way to insert elements
inside, at the beginning, of all matched elements.
append(<Content>)
before(<Content>)
after(<Content>)
瑕佹彃鍏ュ埌鐩鏍囧厓绱犲唴閮ㄥ墠绔鐨勫唴瀹
鍚戞墍鏈夋佃惤涓鍓嶇疆涓浜汬TML鏍囪颁唬鐮併
<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
<p><b>Hello</b>I would like to say: </p>
鍚戞墍鏈夋佃惤涓鍓嶇疆涓涓鍏冪礌銆
<p>I would like to say: </p><b id="foo">Hello</b>
$("p").prepend( $("#foo")[0] );
<p><b id="foo">Hello</b>I would like to say: </p>
鍚戞墍鏈夋佃惤涓鍓嶇疆涓涓猨Query瀵硅薄(绫讳技浜庝竴涓狣OM鍏冪礌鏁扮粍)銆
<p>I would like to say: </p><b>Hello</b>
$("p").prepend( $("b") );
<p><b>Hello</b>I would like to say: </p>
鍦ㄦ瘡涓鍖归厤鐨勫厓绱犱箣鍓嶆彃鍏ュ唴瀹广
Insert content before each of the matched elements.
append(<Content>)
prepend(<Content>)
after(<Content>)
鎻掑叆鍒版瘡涓鐩鏍囧墠鐨勫唴瀹
鍦ㄦ墍鏈夋佃惤涔嬪墠鎻掑叆涓浜汬TML鏍囪颁唬鐮併
<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
<b>Hello</b><p>I would like to say: </p>
鍦ㄦ墍鏈夋佃惤涔嬪墠鎻掑叆涓涓鍏冪礌銆
<p>I would like to say: </p><b id="foo">Hello</b>
$("p").before( $("#foo")[0] );
<b id="foo">Hello</b><p>I would like to say: </p>
鍦ㄦ墍鏈夋佃惤涓鍓嶆彃鍏ヤ竴涓猨Query瀵硅薄(绫讳技浜庝竴涓狣OM鍏冪礌鏁扮粍)銆
<p>I would like to say: </p><b>Hello</b>
$("p").before( $("b") );
<b>Hello</b><p>I would like to say: </p>
鍦ㄦ瘡涓鍖归厤鐨勫厓绱犱箣鍚庢彃鍏ュ唴瀹广
Insert content after each of the matched elements.
append(<Content>)
prepend(<Content>)
before(<Content>)
鎻掑叆鍒版瘡涓鐩鏍囧悗鐨勫唴瀹
鍦ㄦ墍鏈夋佃惤涔嬪悗鎻掑叆涓浜汬TML鏍囪颁唬鐮併
<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>
鍦ㄦ墍鏈夋佃惤涔嬪悗鎻掑叆涓涓鍏冪礌銆
<b id="foo">Hello</b><p>I would like to say: </p>
$("p").after( $("#foo")[0] );
<p>I would like to say: </p><b id="foo">Hello</b>
鍦ㄦ墍鏈夋佃惤涓鍚庢彃鍏ヤ竴涓猨Query瀵硅薄(绫讳技浜庝竴涓狣OM鍏冪礌鏁扮粍)銆
<b>Hello</b><p>I would like to say: </p>
$("p").after( $("b") );
<p>I would like to say: </p><b>Hello</b>
鍏嬮殕鍖归厤鐨凞OM鍏冪礌骞朵笖閫変腑杩欎簺鍏嬮殕鐨勫壇鏈銆
鍦ㄦ兂鎶奃OM鏂囨。涓鍏冪礌鐨勫壇鏈娣诲姞鍒板叾浠栦綅缃鏃惰繖涓鍑芥暟闈炲父鏈夌敤銆
Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another
location in the DOM.
鍏嬮殕鎵鏈塨鍏冪礌锛堝苟閫変腑杩欎簺鍏嬮殕鐨勫壇鏈锛夛紝鐒跺悗灏嗗畠浠鍓嶇疆鍒版墍鏈夋佃惤涓銆
<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p");
<b>Hello</b><p><b>Hello</b>, how are you?</p>
鎶婃墍鏈夊尮閰嶇殑鍏冪礌杩藉姞鍒板彟涓涓銆佹寚瀹氱殑鍏冪礌鍏冪礌闆嗗悎涓銆
瀹為檯涓婏紝浣跨敤杩欎釜鏂规硶鏄棰犲掍簡甯歌勭殑$(A).append(B)鐨勬搷浣滐紝鍗充笉鏄鎶夿杩藉姞鍒癆涓锛岃屾槸鎶夾杩藉姞鍒癇涓銆
Append all of the matched elements to another, specified, set of elements.
This operation is, essentially, the reverse of doing a regular
$(A).append(B), in that instead of appending B to A, you're appending
A to B.
鐢ㄤ簬鍖归厤鍏冪礌鐨刯Query琛ㄨ揪寮
鎶婃墍鏈夋佃惤杩藉姞鍒癐D鍊间负foo鐨勫厓绱犱腑銆
<p>I would like to say: </p><div id="foo"></div>
$("p").appendTo("#foo");
<div id="foo"><p>I would like to say: </p></div>
鎶婃墍鏈夊尮閰嶇殑鍏冪礌鍓嶇疆鍒板彟涓涓銆佹寚瀹氱殑鍏冪礌鍏冪礌闆嗗悎涓銆
瀹為檯涓婏紝浣跨敤杩欎釜鏂规硶鏄棰犲掍簡甯歌勭殑$(A).prepend(B)鐨勬搷浣滐紝鍗充笉鏄鎶夿鍓嶇疆鍒癆涓锛岃屾槸鎶夾鍓嶇疆鍒癇涓銆
Prepend all of the matched elements to another, specified, set of elements.
This operation is, essentially, the reverse of doing a regular
$(A).prepend(B), in that instead of prepending B to A, you're prepending
A to B.
鐢ㄤ簬鍖归厤鍏冪礌鐨刯Query琛ㄨ揪寮
鎶婃墍鏈夋佃惤鍓嶇疆鍒癐D鍊间负foo鐨勫厓绱犱腑銆
<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
$("p").prependTo("#foo");
<div id="foo"><p>I would like to say: </p><b>Hello</b></div>
鎶婃墍鏈夊尮閰嶇殑鍏冪礌鎻掑叆鍒板彟涓涓銆佹寚瀹氱殑鍏冪礌鍏冪礌闆嗗悎鐨勫墠闈銆
瀹為檯涓婏紝浣跨敤杩欎釜鏂规硶鏄棰犲掍簡甯歌勭殑$(A).before(B)鐨勬搷浣滐紝鍗充笉鏄鎶夿鎻掑叆鍒癆鍓嶉潰锛岃屾槸鎶夾鎻掑叆鍒癇鍓嶉潰銆
Insert all of the matched elements before another, specified, set of elements.
This operation is, essentially, the reverse of doing a regular
$(A).before(B), in that instead of inserting B before A, you're inserting
A before B.
鐢ㄤ簬鍖归厤鍏冪礌鐨刯Query琛ㄨ揪寮
涓 $("#foo").before("p")鐩稿悓
<div id="foo">Hello</div><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><div id="foo">Hello</div>
鎶婃墍鏈夊尮閰嶇殑鍏冪礌鎻掑叆鍒板彟涓涓銆佹寚瀹氱殑鍏冪礌鍏冪礌闆嗗悎鐨勫悗闈銆
瀹為檯涓婏紝浣跨敤杩欎釜鏂规硶鏄棰犲掍簡甯歌勭殑$(A).after(B)鐨勬搷浣滐紝鍗充笉鏄鎶夿鎻掑叆鍒癆鍚庨潰锛岃屾槸鎶夾鎻掑叆鍒癇鍚庨潰銆
Insert all of the matched elements after another, specified, set of elements.
This operation is, essentially, the reverse of doing a regular
$(A).after(B), in that instead of inserting B after A, you're inserting
A after B.
鐢ㄤ簬鍖归厤鍏冪礌鐨刯Query琛ㄨ揪寮
涓 $("#foo").after("p")鐩稿悓
<p>I would like to say: </p><div id="foo">Hello</div>
$("p").insertAfter("#foo");
<div id="foo">Hello</div><p>I would like to say: </p>
浠嶥OM涓鍒犻櫎鎵鏈夊尮閰嶇殑鍏冪礌銆傝繖涓鏂规硶涓嶄細鎶婂尮閰嶇殑鍏冪礌浠巎Query瀵硅薄涓鍒犻櫎锛屽洜鑰屽彲浠ュ湪灏嗘潵鍐嶄娇鐢ㄨ繖浜涘尮閰嶇殑鍏冪礌銆
鍙浠ラ氳繃涓涓鍙閫夌殑琛ㄨ揪寮忓硅佸垹闄ょ殑鍏冪礌杩涜岀瓫閫夈
Removes all matched elements from the DOM. This does NOT remove them from the
jQuery object, allowing you to use the matched elements further.
Can be filtered with an optional expressions.
(鍙閫)鐢ㄤ簬绛涢夊厓绱犵殑jQuery琛ㄨ揪寮
$("p").remove();
how are
<p>Hello</p> how are <p>you?</p>
$("p").remove(".hello");
how are <p>you?</p>
<p class="hello">Hello</p> how are <p>you?</p>
鍒犻櫎鍖归厤鐨勫厓绱犻泦鍚堜腑鎵鏈夌殑瀛愯妭鐐广
Removes all child nodes from the set of matched elements.
$("p").empty()
[ <p></p> ]
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
缁撴潫鏈杩戠殑鈥滅牬鍧忔р濇搷浣滐紝鎶婂尮閰嶇殑鍏冪礌鍒楄〃鍥炲嶅埌鍓嶄竴涓鐘舵併
鍦ㄨ皟鐢╡nd鍑芥暟鍚庯紝鍖归厤鐨勫厓绱犲垪琛ㄤ細鍥炲嶅埌涓婁竴涓鎿嶄綔涔嬪墠鐨勫尮閰嶅厓绱犲垪琛ㄧ姸鎬併
濡傛灉鍓嶉潰鐨勬搷浣滐紙瀵瑰厓绱犲垪琛ㄧ殑鐘舵侊級娌℃湁鐮村潖鎬э紝鍒欎粈涔堜篃涓嶆敼鍙樸
End the most recent 'destructive' operation, reverting the list of matched elements
back to its previous state. After an end operation, the list of matched elements will
revert to the last state of matched elements.
If there was no destructive operation before, an empty set is returned.
閫夋嫨鎵鏈夋佃惤锛屽苟鍦ㄥ畠浠涓鏌ユ壘span鍏冪礌锛岀劧鍚庢仮鍥炲嶅埌閫夋嫨鎵鏈夋佃惤鐨勭姸鎬併
<p><span>Hello</span>, how are you?</p>
$("p").find("span").end();
[ <p>...</p> ]
鎼滅储鎵鏈変笌鎸囧畾琛ㄨ揪寮忓尮閰嶇殑鍏冪礌銆
杩欎釜鍑芥暟鏄鎵惧嚭姝e湪澶勭悊鐨勫厓绱犵殑鍚庝唬鍏冪礌鐨勫ソ鏂规硶銆
鎵鏈夋悳绱㈤兘渚濋潬jQuery琛ㄨ揪寮忔潵瀹屾垚銆傝繖涓琛ㄨ揪寮忓彲浠ヤ娇鐢–SS1-3鐨勯夋嫨绗﹁娉曟垨鍩烘湰鐨刋Path璇娉曟潵鍐欍
Searches for all elements that match the specified expression.
This method is a good way to find additional descendant
elements with which to process.
All searching is done using a jQuery expression. The expression can be
written using CSS 1-3 Selector syntax, or basic XPath.
鐢ㄤ簬鎼滅储鐨勮〃杈惧紡
浠庢墍鏈夌殑娈佃惤寮濮嬶紝杩涗竴姝ユ悳绱涓嬮潰鐨剆pan鍏冪礌銆備笌$("p span")鐩稿悓銆
<p><span>Hello</span>, how are you?</p>
$("p").find("span");
[ <span>Hello</span> ]
浠庢墍鏈夊尮閰嶇殑鍏冪礌闆嗗悎涓鍒犻櫎閭d簺涓庢寚瀹氱殑琛ㄨ揪寮忥紙鍙浠ユ槸澶氫釜锛変笉鍖归厤鐨勫厓绱犮傝繖涓鏂规硶鐢ㄤ簬缂╁皬鍖归厤鐨勮寖鍥淬
浣跨敤琛ㄨ揪寮忓瓧绗︿覆鏁扮粍鍙浠ュ疄鐜颁竴娆″畬鎴愬氶噸绛涢夌殑鏁堟灉銆
Removes all elements from the set of matched elements that do not
match the specified expression(s). This method is used to narrow down
the results of a search.
Provide a String array of expressions to apply multiple filters at once.
瑕佹悳绱㈢殑琛ㄨ揪寮忥紙鎴栬〃杈惧紡鏁扮粍锛
閫夋嫨鎵鏈夋佃惤骞跺垹闄ら偅浜涚被鍚嶄笉鏄痵elected鐨勫厓绱犮
<p class="selected">Hello</p><p>How are you?</p>
$("p").filter(".selected")
[ <p class="selected">Hello</p> ]
閫夋嫨鎵鏈夋佃惤骞跺垹闄ら偅浜涚被鍚嶄笉鏄痵elected鐨勫厓绱狅紝浣嗕笉鍒犻櫎绗涓涓鍏冪礌銆
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
$("p").filter([".selected", ":first"])
[ <p>Hello</p>, <p class="selected">And Again</p> ]
浠庡尮閰嶇殑鍏冪礌闆嗗悎涓鍒犻櫎閭d簺涓嶇﹀悎鎸囧畾鐨勭瓫閫夋潯浠剁殑鍏冪礌銆傝繖涓鏂规硶鐢ㄤ簬缂╁皬鎼滅储鐨勮寖鍥淬
Removes all elements from the set of matched elements that do not
pass the specified filter. This method is used to narrow down
the results of a search.
浣滀负绛涢夋潯浠剁殑鍑芥暟
鍒犻櫎鎵鏈夋嫢鏈変竴涓猳l瀛愬厓绱犵殑鍏冪礌銆
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
$("p").filter(function(index) {
return $("ol", this).length == 0;
})
[ <p>How are you?</p> ]
浠庡尮閰嶇殑鍏冪礌闆嗗悎涓鍒犻櫎鎸囧畾鐨勫厓绱犮傝繖涓鏂规硶鐢ㄤ簬浠庝竴涓猨Query瀵硅薄涓鍒犻櫎涓涓鍏冪礌銆
Removes the specified Element from the set of matched elements. This
method is used to remove a single Element from a jQuery object.
瑕佸垹闄ょ殑鍏冪礌
浠庢墍鏈夌殑娈佃惤闆嗗悎涓鍒犻櫎ID涓簊elected鐨勫厓绱犮
<p>Hello</p><p id="selected">Hello Again</p>
$("p").not( $("#selected")[0] )
[ <p>Hello</p> ]
浠庡尮閰嶇殑鍏冪礌闆嗗悎涓鍒犻櫎涓庢寚瀹氱殑琛ㄨ揪寮忓尮閰嶇殑鍏冪礌銆傝繖涓鏂规硶鐢ㄤ簬浠庝竴涓猨Query瀵硅薄涓鍒犻櫎涓涓鎴栧氫釜鍏冪礌銆
Removes elements matching the specified expression from the set
of matched elements. This method is used to remove one or more
elements from a jQuery object.
鐢ㄤ簬鍒犻櫎鍖归厤鐨勫厓绱犵殑琛ㄨ揪寮
浠庢墍鏈夋佃惤鐨勯泦鍚堜腑鍒犻櫎ID涓簊elected鐨勫厓绱犮
<p>Hello</p><p id="selected">Hello Again</p>
$("p").not("#selected")
[ <p>Hello</p> ]
鎶婁笌琛ㄨ揪寮忓尮閰嶇殑鍏冪礌娣诲姞鍒癹Query瀵硅薄涓銆傝繖涓鍑芥暟鍙浠ョ敤浜庤繛鎺ュ垎鍒涓庝袱涓琛ㄨ揪寮忓尮閰嶇殑鍏冪礌缁撴灉闆嗐
Adds the elements matched by the expression to the jQuery object. This
can be used to concatenate the result sets of two expressions.
鐢ㄤ簬鍖归厤鐩稿姞缁撴灉鍏冪礌鐨勮〃杈惧紡
$("p").add("span")
[ <p>Hello</p>, <span>Hello Again</span> ]
<p>Hello</p><p><span>Hello Again</span></p>
鎶婁竴涓鎴栧氫釜鍏冪礌娣诲姞鍒板尮閰嶇殑鍏冪礌闆嗗悎涓銆
杩欎釜鍑芥暟鐢ㄤ簬鎶婁竴涓鍏冪礌闆嗗悎娣诲姞鍒颁竴涓猨Query瀵硅薄涓銆
Adds one or more Elements to the set of matched elements.
This is used to add a set of Elements to a jQuery object.
瑕佹坊鍔犵殑涓涓鎴栧氫釜鍏冪礌
$("p").add( document.getElementById("a") )
[ <p>Hello</p>, <span id="a">Hello Again</span> ]
<p>Hello</p><p><span id="a">Hello Again</span></p>
$("p").add([document.getElementById("a"), document.getElementById("b")])
[ <p>Hello</p>, <span id="a">Hello Again</span>, <span id="b">And Again</span> ]
<p>Hello</p><p><span id="a">Hello Again</span><span id="b">And Again</span></p>
鐢ㄤ竴涓琛ㄨ揪寮忔潵妫鏌ュ綋鍓嶉夋嫨鐨勫厓绱犻泦鍚堬紝濡傛灉鍏朵腑鑷冲皯鏈変竴涓鍏冪礌绗﹀悎杩欎釜缁欏畾鐨勮〃杈惧紡灏辫繑鍥瀟rue銆
濡傛灉娌℃湁鍏冪礌绗﹀悎杩欎釜琛ㄨ揪寮忥紝鎴栬呰〃杈惧紡鏄鏃犳晥鐨勶紝閮借繑鍥瀎alse銆
鍦ㄥ唴閮ㄥ彲浠ヤ娇鐢╢ilter(String)鍑芥暟锛屽洜姝filter()鍑芥暟鍘熷厛鐨勮勫垯鍦ㄨ繖閲屼篃閫傜敤銆
Checks the current selection against an expression and returns true,
if at least one element of the selection fits the given expression.
Does return false, if no element fits or the expression is not valid.
filter(String) is used internally, therefore all rules that apply there
apply here, too.
鐢ㄤ簬绛涢夌殑琛ㄨ揪寮
鍥犱负input鍏冪礌鐨勭埗鍏冪礌鏄涓涓琛ㄥ崟鍏冪礌锛屾墍浠ヨ繑鍥瀟rue銆
<form><input type="checkbox" /></form>
$("input[@type='checkbox']").parent().is("form")
true
鍥犱负input鍏冪礌鐨勭埗鍏冪礌鏄涓涓猵鍏冪礌锛屾墍浠ヨ繑鍥瀎alse銆
<form><p><input type="checkbox" /></p></form>
$("input[@type='checkbox']").parent().is("form")
false
鍙栧緱涓涓鍖呭惈鐫鎵鏈夊尮閰嶅厓绱犵殑鍞涓鐖跺厓绱犵殑鍏冪礌闆嗗悎銆
鍙浠ラ氳繃涓涓鍙閫夌殑琛ㄨ揪寮忚繘琛岀瓫閫夈
Get a set of elements containing the unique parents of the matched
set of elements.
Can be filtered with an optional expressions.
(鍙閫) 鐢ㄤ簬绛涢夌埗鍏冪礌鐨勮〃杈惧紡
鎵惧埌姣忎釜娈佃惤鐨勭埗鍏冪礌銆
<div><p>Hello</p><p>Hello</p></div>
$("p").parent()
[ <div><p>Hello</p><p>Hello</p></div> ]
鎵惧埌娈佃惤鐨勭埗鍏冪礌涓姣忎釜绫诲悕涓簊elected鐨勭埗鍏冪礌銆
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
$("p").parent(".selected")
[ <div class="selected"><p>Hello Again</p></div> ]
鍙栧緱涓涓鍖呭惈鐫鎵鏈夊尮閰嶅厓绱犵殑鍞涓绁栧厛鍏冪礌鐨勫厓绱犻泦鍚堬紙涓嶅寘鍚鏍瑰厓绱狅級銆
鍙浠ラ氳繃涓涓鍙閫夌殑琛ㄨ揪寮忚繘琛岀瓫閫夈
Get a set of elements containing the unique ancestors of the matched
set of elements (except for the root element).
Can be filtered with an optional expressions.
(鍙閫) 鐢ㄤ簬绛涢夌栧厛鍏冪礌鐨勮〃杈惧紡
鎵惧埌姣忎釜span鍏冪礌鐨勭埗鍏冪礌銆
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents()
[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
鎵惧埌姣忎釜span鍏冪礌鐨勭埗鍏冪礌涓鏄痯鍏冪礌鐨勫厓绱犮
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents("p")
[ <p><span>Hello</span></p> ]
鍙栧緱涓涓鍖呭惈鍖归厤鐨勫厓绱犻泦鍚堜腑姣忎竴涓鍏冪礌绱ч偦鐨勫悗闈㈠悓杈堝厓绱犵殑鍏冪礌闆嗗悎銆
杩欎釜鍑芥暟鍙杩斿洖鍚庨潰閭d釜绱ч偦鐨勫悓杈堝厓绱狅紝鑰屼笉鏄鍚庨潰鎵鏈夌殑鍚岃緢鍏冪礌銆
鍙浠ョ敤涓涓鍙閫夌殑琛ㄨ揪寮忚繘琛岀瓫閫夈
Get a set of elements containing the unique next siblings of each of the
matched set of elements.
It only returns the very next sibling, not all next siblings.
Can be filtered with an optional expressions.
(鍙閫) 鐢ㄤ簬绛涢夊悗闈㈠悓杈堝厓绱犵殑琛ㄨ揪寮
鎵惧埌姣忎釜娈佃惤鐨勫悗闈㈢揣閭荤殑鍚岃緢鍏冪礌銆
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
$("p").next()
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
鎵惧埌绫诲悕涓簊elected鐨勬瘡涓涓娈佃惤鐨勫悗闈㈢揣閭荤殑鍚岃緢鍏冪礌銆
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
$("p").next(".selected")
[ <p class="selected">Hello Again</p> ]
鍙栧緱涓涓鍖呭惈鍖归厤鐨勫厓绱犻泦鍚堜腑姣忎竴涓鍏冪礌绱ч偦鐨勫墠涓涓鍚岃緢鍏冪礌鐨勫厓绱犻泦鍚堛
鍙浠ョ敤涓涓鍙閫夌殑琛ㄨ揪寮忚繘琛岀瓫閫夈
杩欎釜鍑芥暟鍙杩斿洖鍓嶄竴涓绱ч偦鐨勫悓杈堝厓绱狅紝鑰屼笉鏄鍓嶉潰鎵鏈夌殑鍚岃緢鍏冪礌銆
Get a set of elements containing the unique previous siblings of each of the
matched set of elements.
Can be filtered with an optional expressions.
It only returns the immediately previous sibling, not all previous siblings.
(鍙閫) 鐢ㄤ簬绛涢夊墠涓涓鍚岃緢鍏冪礌鐨勮〃杈惧紡
鎵惧埌姣忎釜娈佃惤绱ч偦鐨勫墠涓涓鍚岃緢鍏冪礌銆
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("p").prev()
[ <div><span>Hello Again</span></div> ]
鎵惧埌姣忎釜绫诲悕涓簊elected鐨勬佃惤鐨勫墠涓涓绱ч偦鐨勫悓杈堝厓绱犮
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
$("p").prev(".selected")
[ <div><span>Hello</span></div> ]
鍙栧緱涓涓鍖呭惈鍖归厤鐨勫厓绱犻泦鍚堜腑姣忎竴涓鍏冪礌鐨勬墍鏈夊敮涓鍚岃緢鍏冪礌鐨勫厓绱犻泦鍚堛
鍙浠ョ敤鍙閫夌殑琛ㄨ揪寮忚繘琛岀瓫閫夈
Get a set of elements containing all of the unique siblings of each of the
matched set of elements.
Can be filtered with an optional expressions.
(鍙閫) 鐢ㄤ簬绛涢夊悓杈堝厓绱犵殑琛ㄨ揪寮
鎵惧埌姣忎釜div鐨勬墍鏈夊悓杈堝厓绱犮
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("div").siblings()
[ <p>Hello</p>, <p>And Again</p> ]
鎵惧埌姣忎釜div鐨勬墍鏈夊悓杈堝厓绱犱腑甯︽湁绫诲悕涓簊elected鐨勫厓绱犮
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
$("div").siblings(".selected")
[ <p class="selected">Hello Again</p> ]
鍙栧緱涓涓鍖呭惈鍖归厤鐨勫厓绱犻泦鍚堜腑姣忎竴涓鍏冪礌鐨勬墍鏈夊敮涓瀛愬厓绱犵殑鍏冪礌闆嗗悎銆
鍙浠ョ敤鍙閫夌殑琛ㄨ揪寮忚繘琛岀瓫閫夈
Get a set of elements containing all of the unique children of each of the
matched set of elements.
Can be filtered with an optional expressions.
(鍙閫) 鐢ㄤ簬绛涢夊瓙鍏冪礌鐨勮〃杈惧紡
鎵惧埌姣忎釜div鐨勬墍鏈夊瓙鍏冪礌銆
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("div").children()
[ <span>Hello Again</span> ]
鎵惧埌姣忎釜div鐨勬墍鏈夊瓙鍏冪礌涓甯︽湁绫诲悕涓簊elected鐨勫厓绱犮
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
$("div").children(".selected")
[ <p class="selected">Hello Again</p> ]
鎶婂厓绱犻泦鍚堢瓫閫変负鍖呭惈鎸囧畾鏂囨湰鐨勫厓绱犮
Filter the set of elements to those that contain the specified text.
鍖呭惈鍦ㄥ厓绱犱腑鐨勬枃鏈
$("p").contains("test")
[ <p>This is just a test.</p> ]
<p>This is just a test.</p><p>So is this</p>
缁欏畾鍏冪礌鐨勬墍鏈夌栧厛鍏冪礌銆
All ancestors of a given element.
瑕佹煡鎵惧叾绁栧厛鍏冪礌鐨勫厓绱
娌跨壒瀹氱殑鏂瑰悜鍦ㄦ寚瀹氱殑鍏冪礌涓鎼滅储鐨勫揩鎹锋柟寮忋
A handy, and fast, way to traverse in a particular direction and find
a specific element.
瑕佹悳绱㈢殑鍏冪礌
瑕佸尮閰嶇殑绗鍑犱釜缁撴灉銆傚彲浠ユ槸鏁板瓧鎴栧瓧绗︿覆锛堝傗渆ven鈥濇垨鈥渙dd鈥濓級
鏌ユ壘鐨勬柟鍚戯紙渚嬪傗減reviousSibling鈥濇垨鈥渘extSibling鈥濓級
鍦ㄦ寚瀹氳酱鍚戜笂鐨勬墍鏈夊厓绱犮
All elements on a specified axis.
瑕佹煡鎵惧叾鎵鏈夊悓杈堝厓绱犵殑鍏冪礌锛堝寘鎷鍏惰嚜韬锛
璁块棶绗涓涓鍖归厤鍏冪礌鐨勬牱寮忓睘鎬с
浣跨敤杩欎釜鏂规硶鍙浠ュ緢瀹规槗鍦板彇寰楃涓涓鍖归厤鍏冪礌鐨勬牱寮忓睘鎬х殑鍊笺
Access a style property on the first matched element.
This method makes it easy to retrieve a style property value
from the first matched element.
瑕佽块棶鐨勫睘鎬у悕绉
鍙栧緱绗涓涓娈佃惤鐨刢olor鏍峰紡灞炴х殑鍊笺
<p style="color:red;">Test Paragraph.</p>
$("p").css("color");
"red"
鍙栧緱绗涓涓娈佃惤鐨刦ont-weight鏍峰紡灞炴х殑鍊笺
<p style="font-weight: bold;">Test Paragraph.</p>
$("p").css("font-weight");
"bold"
鎶婁竴涓鈥滃悕/鍊煎光濆硅薄璁剧疆涓烘墍鏈夊尮閰嶅厓绱犵殑鏍峰紡灞炴с
杩欐槸涓绉嶅湪鎵鏈夊尮閰嶇殑鍏冪礌涓婅剧疆澶ч噺鏍峰紡灞炴х殑鏈浣虫柟寮忋
Set a key/value object as style properties to all matched elements.
This serves as the best way to set a large number of style properties
on all matched elements.
瑕佽剧疆涓烘牱寮忓睘鎬х殑鍚/鍊煎瑰硅薄
涓烘墍鏈塸鍏冪礌璁剧疆color鍜宐ackground鏍峰紡灞炴с
<p>Test Paragraph.</p>
$("p").css({ color: "red", background: "blue" });
<p style="color:red; background:blue;">Test Paragraph.</p>
鍦ㄦ墍鏈夊尮閰嶇殑鍏冪礌涓锛岃剧疆涓涓鏍峰紡灞炴х殑鍊笺
Set a single style property to a value, on all matched elements.
瑕佽剧疆鐨勬牱寮忓睘鎬у悕绉
瑕佽剧疆鐨勬牱寮忓睘鎬х殑鍊
鎶婃墍鏈夋佃惤鐨刢olor鏍峰紡灞炴у兼敼涓虹孩鑹层
<p>Test Paragraph.</p>
$("p").css("color","red");
<p style="color:red;">Test Paragraph.</p>
鐢ㄤ竴涓鎴栧氫釜鍏朵粬瀵硅薄鏉ユ墿灞曚竴涓瀵硅薄锛岃繑鍥炶繖涓琚鎵╁睍鐨勫硅薄銆
杩欐槸绠鍖栫户鎵跨殑涓昏佸伐鍏枫
Extend one object with one or more others, returning the original,
modified, object. This is a great utility for simple inheritance.
瑕佹墿灞曠殑瀵硅薄
瑕佷笌绗涓涓瀵硅薄鍚堝苟鐨勫硅薄
(鍙閫) 鏇村氳佷笌绗涓涓瀵硅薄鍚堝苟鐨勫硅薄
鍚堝苟settings鍜宱ptions, 淇鏀瑰苟杩斿洖settings
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
settings == { validate: true, limit: 5, name: "bar" }
鍚堝苟defaults鍜宱ptions, 浣嗕笉淇鏀筪efaults锛岃繑鍥炲悎骞跺悗鐨勫硅薄
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend({}, defaults, options);
settings == { validate: true, limit: 5, name: "bar" }
涓涓閫氱敤鐨勮凯浠e嚱鏁帮紝鍙鐢ㄤ簬杩戜技鍦拌凯浠e硅薄鍜屾暟缁勩
杩欎釜鍑芥暟涓$().each()涓嶅悓锛$().each()鏄涓撻棬鐢ㄤ簬杩浠e拰鎵ц宩Query瀵硅薄鐨勫嚱鏁般
鑰岃繖涓鍑芥暟鍙浠ョ敤浜庤凯浠d换浣曞硅薄鍜屾暟缁勩
杩欎釜鍑芥暟鐨勫洖璋冧腑鍖呭惈涓や釜鍙傛暟锛氱涓涓鏄痥ey锛堝硅薄锛夋垨index锛堟暟缁勶級锛岀浜屼釜鏄鍊笺
A generic iterator function, which can be used to seemlessly
iterate over both objects and arrays. This function is not the same
as $().each() - which is used to iterate, exclusively, over a jQuery
object. This function can be used to iterate over anything.
The callback has two arguments:the key (objects) or index (arrays) as first
the first, and the value as the second.
瑕侀噸澶嶈凯浠g殑瀵硅薄鎴栨暟缁
瑕佸湪姣忎釜瀵硅薄涓鎵ц岀殑鍑芥暟
杩欐槸涓涓杩浠f暟缁勪腑鎵鏈夐」鐩鐨勪緥瀛愶紝閫氳繃鍑芥暟璁块棶浜嗗叾涓鐨勬瘡涓椤圭洰鍜岀储寮曘
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
杩欐槸涓涓杩浠e硅薄涓鎵鏈夊睘鎬х殑渚嬪瓙锛岄氳繃鍑芥暟璁块棶浜嗘瘡涓灞炴х殑鍚嶇О鍜屽笺
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
鍒犻櫎瀛楃︿覆涓ょ鐨勭┖鐧藉瓧绗︺
Remove the whitespace from the beginning and end of a string.
瑕佸垹闄ょ┖鐧藉瓧绗︾殑瀛楃︿覆
$.trim(" hello, how are you? ");
"hello, how are you?"
鍚堝苟涓や釜鏁扮粍锛屽垹闄ゅ叾涓閲嶅嶇殑椤圭洰銆
寰楀埌鐨勬柊鏁扮粍鏄锛氱涓涓鏁扮粍涓鐨勬墍鏈夐」鐩锛屽姞涓婄浜屼釜鏁扮粍涓鍞涓鐨勶紙涓嶄笌绗涓涓鏁扮粍涓浠讳綍椤圭洰鐩稿悓鐨勶級椤圭洰銆
Merge two arrays together, removing all duplicates.
The new array is: All the results from the first array, followed
by the unique results from the second array.
瑕佸悎骞剁殑绗涓涓鏁扮粍
瑕佸悎骞剁殑绗浜屼釜鏁扮粍
鍚堝苟涓や釜鏁扮粍锛屽垹闄ゅ叾涓閲嶅嶇殑2
$.merge( [0,1,2], [2,3,4] )
[0,1,2,3,4]
鍚堝苟涓や釜鏁扮粍锛屽垹闄ら噸澶嶇殑3鍜2銆
$.merge( [3,2,1], [4,3,2] )
[3,2,1,4]
浣跨敤绛涢夊嚱鏁帮紝浠庝竴涓鏁扮粍涓绛涢夐」鐩銆
鍏朵腑绛涢夊嚱鏁板繀椤讳紶閫掍袱涓鍙傛暟锛氭暟缁勪腑鐨勫綋鍓嶉」鐩鍜屾暟缁勪腑椤圭洰鐨勭储寮曘
濡傛灉瑕佷繚鎸佹暟缁勪腑鐨勯」鐩锛岃繖涓鍑芥暟蹇呴』杩斿洖true锛涘傛灉杩斿洖false锛屽氨浼氬垹闄ら」鐩銆
Filter items out of an array, by using a filter function.
The specified function will be passed two arguments: The
current array item and the index of the item in the array. The
function must return 'true' to keep the item in the array,
false to remove it.
瑕佸湪鍏朵腑鏌ユ壘椤圭洰鐨勬暟缁
澶勭悊鏁扮粍椤圭洰鐨勫嚱鏁
鍙嶈浆閫夐」 - 閫夋嫨鐩稿弽鐨勭瓫閫夌粨鏋
$.grep( [0,1,2], function(i){
return i > 0;
});
[1, 2]
鎶婁竴涓鏁扮粍涓鐨勯」鐩杞鎹㈠埌鍙︿竴涓鏁扮粍涓銆
浣滀负鍙傛暟鐨勮浆鎹㈠嚱鏁颁細琚姣忎釜鏁扮粍椤圭洰璋冪敤锛岃屼笖浼氱粰杩欎釜杞鎹㈠嚱鏁颁紶閫掍竴涓琛ㄧず瑕佽浆鎹㈢殑椤圭洰鐨勫弬鏁般
杞鎹㈠嚱鏁板彲浠ヨ繑鍥炶浆鎹㈠悗鐨勫笺乶ull锛堝垹闄ゆ暟缁勪腑鐨勯」鐩锛夋垨涓涓鍖呭惈鍊肩殑鏁扮粍锛嶏紞琛ㄧず瀵瑰師濮嬫暟缁勯」鐩鐨勬墿灞曟ā寮忋
Translate all items in an array to another array of items.
The translation function that is provided to this method is
called for each item in the array and is passed one argument:
The item to be translated.
The function can then return the translated value, 'null'
(to remove the item), or an array of values - which will
be flattened into the full array.
瑕佽浆鎹㈢殑鏁扮粍
澶勭悊鏁扮粍椤圭洰鐨勫嚱鏁
鎶婂師濮嬬殑鏁扮粍鏄犲皠鍒颁竴涓鏂版暟缁勪腑锛屽苟缁欐柊鏁扮粍涓鐨勬瘡涓鍊奸兘鍔犱笂4銆
$.map( [0,1,2], function(i){
return i + 4;
});
[4, 5, 6]
鎶婂師濮嬬殑鏁扮粍鏄犲皠鍒颁竴涓鏂版暟缁勪腑锛屽傛灉鏂版暟缁勪腑鐨勫煎ぇ浜0锛屽氨缁欒繖涓鍊煎姞涓1锛涘惁鍒欏皢杩欏煎垹闄ゃ
$.map( [0,1,2], function(i){
return i > 0 ? i + 1 : null;
});
[2, 3]
鎶婂師濮嬬殑鏁扮粍鏄犲皠鍒颁竴涓鏂版暟缁勪腑锛屽皢鏂版暟缁勪腑鐨勬瘡涓涓鍏冪礌閮芥墿灞曚负涓や釜锛屽叾涓涓涓鏄鍏跺師濮嬪硷紝鍙︿竴涓鏄鍔犱笂1涔嬪悗鐨勫笺
$.map( [0,1,2], function(i){
return [ i, i + 1 ];
});
[0, 1, 1, 2, 2, 3]
鍖呭惈浠巒avigator.userAgent灞炴т腑璇诲彇鐨勭敤鎴蜂唬鐞嗘爣绛撅紙浠g悊妫娴嬶級銆
鏈夋晥鐨勬爣绛炬湁锛歴afari, opera, msie, mozilla
杩欎釜灞炴у湪DOM杞藉叆瀹屾垚涔嬪墠灏卞彲浠ヨ块棶锛屾墍浠ュ彲浠ヤ娇鐢ㄥ畠鏉ラ拡瀵规煇涓娴忚堝櫒娣诲姞ready浜嬩欢銆
鏈夌殑鏃跺欙紝瀵硅薄妫娴嬪彲鑳戒笉澶鍙闈狅紝杩欐椂灏辨湁蹇呰佷娇鐢ㄦ祻瑙堝櫒妫娴嬨傚彧鏄涓轰簡閬垮厤鍚屾椂浣跨敤涓ょ嶆墜娈碉紒
鎶婃祻瑙堝櫒鍜屽硅薄妫娴嬬粨鍚堜娇鐢锛屽彲浠ュ緱鍒扮浉褰撳彲闈犵殑缁撴灉銆
Contains flags for the useragent, read from navigator.userAgent.
Available flags are: safari, opera, msie, mozilla
This property is available before the DOM is ready, therefore you can
use it to add ready events only for certain browsers.
There are situations where object detections is not reliable enough, in that
cases it makes sense to use browser detection. Simply try to avoid both!
A combination of browser and object detection yields quite reliable results.
濡傛灉褰撳墠鐨勭敤鎴蜂唬鐞嗘槸IE鐨勬煇涓鐗堟湰灏辫繑鍥瀟rue銆
$.browser.msie
鍙鍦╯afari娴忚堝櫒涓鎻愮ず锛"this is safari!"銆
if($.browser.safari) { $( function() { alert("this is safari!"); } ); }
鏄剧ず闅愯棌鐨勫尮閰嶅厓绱犮
Displays each of the set of matched elements if they are hidden.
$("p").show()
[ <p style="display: block">Hello</p> ]
<p style="display: none">Hello</p>
闅愯棌鏄剧ず鐨勫厓绱犮
Hides each of the set of matched elements if they are shown.
$("p").hide()
[ <p style="display: none">Hello</p> ]
<p>Hello</p>
鍒囨崲鍏冪礌鐨勫彲瑙佺姸鎬併
濡傛灉鍏冪礌鏄鍙瑙佺殑锛屽垏鎹涓洪殣钘忕殑锛涘傛灉鍏冪礌鏄闅愯棌鐨勶紝鍒囨崲涓哄彲瑙佺殑銆
Toggles each of the set of matched elements. If they are shown,
toggle makes them hidden. If they are hidden, toggle
makes them shown.
$("p").toggle()
[ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]
<p>Hello</p><p style="display: none">Hello Again</p>
浠ヤ紭闆呯殑鍔ㄧ敾鏄剧ず鎵鏈夊尮閰嶇殑鍏冪礌锛屽苟鍦ㄦ樉绀哄畬鎴愬悗鍙閫夊湴瑙﹀彂涓涓鍥炶皟鍑芥暟銆
鍙浠ユ牴鎹鎸囧畾鐨勯熷害鍔ㄦ佸湴鏀瑰彉姣忎釜鍖归厤鍏冪礌鐨勯珮搴︺佸藉害鍜屼笉閫忔槑搴︺
Show all matched elements using a graceful animation and firing an
optional callback after completion.
The height, width, and opacity of each of the matched elements
are changed dynamically according to the specified speed.
涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").show("slow");
$("p").show("slow",function(){
alert("Animation Done.");
});
浠ヤ紭闆呯殑鍔ㄧ敾闅愯棌鎵鏈夊尮閰嶇殑鍏冪礌锛屽苟鍦ㄦ樉绀哄畬鎴愬悗鍙閫夊湴瑙﹀彂涓涓鍥炶皟鍑芥暟銆
鍙浠ユ牴鎹鎸囧畾鐨勯熷害鍔ㄦ佸湴鏀瑰彉姣忎釜鍖归厤鍏冪礌鐨勯珮搴︺佸藉害鍜屼笉閫忔槑搴︺
Hide all matched elements using a graceful animation and firing an
optional callback after completion.
The height, width, and opacity of each of the matched elements
are changed dynamically according to the specified speed.
涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").hide("slow");
$("p").hide("slow",function(){
alert("Animation Done.");
});
閫氳繃楂樺害鍙樺寲锛堝悜涓嬪炲ぇ锛夋潵鍔ㄦ佸湴鏄剧ず鎵鏈夊尮閰嶇殑鍏冪礌锛屽湪鏄剧ず瀹屾垚鍚庡彲閫夊湴瑙﹀彂涓涓鍥炶皟鍑芥暟銆
杩欎釜鍔ㄧ敾鏁堟灉鍙璋冩暣鍏冪礌鐨勯珮搴︼紝鍙浠ヤ娇鍖归厤鐨勫厓绱犱互鈥滄粦鍔ㄢ濈殑鏂瑰紡鏄剧ず鍑烘潵銆
Reveal all matched elements by adjusting their height and firing an
optional callback after completion.
Only the height is adjusted for this animation, causing all matched
elements to be revealed in a "sliding" manner.
slideUp(String|Number,Function)
slideToggle(String|Number,Function)
(鍙閫) 涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").slideDown("slow");
$("p").slideDown("slow",function(){
alert("Animation Done.");
});
閫氳繃楂樺害鍙樺寲锛堝悜涓婂噺灏忥級鏉ュ姩鎬佸湴闅愯棌鎵鏈夊尮閰嶇殑鍏冪礌锛屽湪闅愯棌瀹屾垚鍚庡彲閫夊湴瑙﹀彂涓涓鍥炶皟鍑芥暟銆
杩欎釜鍔ㄧ敾鏁堟灉鍙璋冩暣鍏冪礌鐨勯珮搴︼紝鍙浠ヤ娇鍖归厤鐨勫厓绱犱互鈥滄粦鍔ㄢ濈殑鏂瑰紡闅愯棌璧锋潵銆
Hide all matched elements by adjusting their height and firing an
optional callback after completion.
Only the height is adjusted for this animation, causing all matched
elements to be hidden in a "sliding" manner.
slideDown(String|Number,Function)
slideToggle(String|Number,Function)
(鍙閫) 涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").slideUp("slow");
$("p").slideUp("slow",function(){
alert("Animation Done.");
});
閫氳繃楂樺害鍙樺寲鏉ュ垏鎹㈡墍鏈夊尮閰嶅厓绱犵殑鍙瑙佹э紝骞跺湪鍒囨崲瀹屾垚鍚庡彲閫夊湴瑙﹀彂涓涓鍥炶皟鍑芥暟銆
杩欎釜鍔ㄧ敾鏁堟灉鍙璋冩暣鍏冪礌鐨勯珮搴︼紝鍙浠ヤ娇鍖归厤鐨勫厓绱犱互鈥滄粦鍔ㄢ濈殑鏂瑰紡闅愯棌鎴栨樉绀恒
Toggle the visibility of all matched elements by adjusting their height and firing an
optional callback after completion.
Only the height is adjusted for this animation, causing all matched
elements to be hidden in a "sliding" manner.
slideDown(String|Number,Function)
slideUp(String|Number,Function)
(鍙閫) 涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").slideToggle("slow");
$("p").slideToggle("slow",function(){
alert("Animation Done.");
});
閫氳繃涓嶉忔槑搴︾殑鍙樺寲鏉ュ疄鐜版墍鏈夊尮閰嶅厓绱犵殑娣″叆鏁堟灉锛屽苟鍦ㄥ姩鐢诲畬鎴愬悗鍙閫夊湴瑙﹀彂涓涓鍥炶皟鍑芥暟銆
杩欎釜鍔ㄧ敾鍙璋冩暣鍏冪礌鐨勪笉閫忔槑搴︼紝涔熷氨鏄璇存墍鏈夊尮閰嶇殑鍏冪礌鐨勯珮搴﹀拰瀹藉害涓嶄細鍙戠敓鍙樺寲銆
Fade in all matched elements by adjusting their opacity and firing an
optional callback after completion.
Only the opacity is adjusted for this animation, meaning that
all of the matched elements should already have some form of height
and width associated with them.
fadeOut(String|Number,Function)
fadeTo(String|Number,Number,Function)
(鍙閫) 涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").fadeIn("slow");
$("p").fadeIn("slow",function(){
alert("Animation Done.");
});
閫氳繃涓嶉忔槑搴︾殑鍙樺寲鏉ュ疄鐜版墍鏈夊尮閰嶅厓绱犵殑娣″嚭鏁堟灉锛屽苟鍦ㄥ姩鐢诲畬鎴愬悗鍙閫夊湴瑙﹀彂涓涓鍥炶皟鍑芥暟銆
杩欎釜鍔ㄧ敾鍙璋冩暣鍏冪礌鐨勪笉閫忔槑搴︼紝涔熷氨鏄璇存墍鏈夊尮閰嶇殑鍏冪礌鐨勯珮搴﹀拰瀹藉害涓嶄細鍙戠敓鍙樺寲銆
Fade out all matched elements by adjusting their opacity and firing an
optional callback after completion.
Only the opacity is adjusted for this animation, meaning that
all of the matched elements should already have some form of height
and width associated with them.
fadeIn(String|Number,Function)
fadeTo(String|Number,Number,Function)
(鍙閫) 涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").fadeOut("slow");
$("p").fadeOut("slow",function(){
alert("Animation Done.");
});
鎶婃墍鏈夊尮閰嶅厓绱犵殑涓嶉忔槑搴︿互娓愯繘鏂瑰紡璋冩暣鍒版寚瀹氱殑涓嶉忔槑搴︼紝骞跺湪鍔ㄧ敾瀹屾垚鍚庡彲閫夊湴瑙﹀彂涓涓鍥炶皟鍑芥暟銆
杩欎釜鍔ㄧ敾鍙璋冩暣鍏冪礌鐨勪笉閫忔槑搴︼紝涔熷氨鏄璇存墍鏈夊尮閰嶇殑鍏冪礌鐨勯珮搴﹀拰瀹藉害涓嶄細鍙戠敓鍙樺寲銆
Fade the opacity of all matched elements to a specified opacity and firing an
optional callback after completion.
Only the opacity is adjusted for this animation, meaning that
all of the matched elements should already have some form of height
and width associated with them.
fadeIn(String|Number,Function)
fadeOut(String|Number,Function)
涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
瑕佽皟鏁村埌鐨勪笉閫忔槑搴﹀(0鍒1涔嬮棿鐨勬暟瀛).
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").fadeTo("slow", 0.5);
$("p").fadeTo("slow", 0.5, function(){
alert("Animation Done.");
});
鐢ㄤ簬鍒涘缓鑷瀹氫箟鍔ㄧ敾鐨勫嚱鏁般
杩欎釜鍑芥暟鐨勫叧閿鍦ㄤ簬鎸囧畾鍔ㄧ敾褰㈠紡鍙婄粨鏋滄牱寮忓睘鎬у硅薄銆傝繖涓瀵硅薄涓姣忎釜灞炴ч兘琛ㄧず涓涓鍙浠ュ彉鍖栫殑鏍峰紡灞炴э紙濡傗渉eight鈥濄佲渢op鈥濇垨鈥渙pacity鈥濓級銆
鑰屾瘡涓灞炴х殑鍊艰〃绀鸿繖涓鏍峰紡灞炴у埌澶氬皯鏃跺姩鐢荤粨鏋溿傚傛灉鏄涓涓鏁板硷紝鏍峰紡灞炴у氨浼氫粠褰撳墠鐨勫兼笎鍙樺埌鎸囧畾鐨勫笺
濡傛灉浣跨敤鐨勬槸鈥渉ide鈥濄佲渟how鈥濇垨鈥渢oggle鈥濊繖鏍风殑瀛楃︿覆鍊硷紝鍒欎細涓鸿ュ睘鎬ц皟鐢ㄩ粯璁ょ殑鍔ㄧ敾褰㈠紡銆
A function for making your own, custom, animations. The key aspect of
this function is the object of style properties that will be animated,
and to what end. Each key within the object represents a style property
that will also be animated (for example: "height", "top", or "opacity").
The value associated with the key represents to what end the property
will be animated. If a number is provided as the value, then the style
property will be transitioned from its current state to that new number.
Oterwise if the string "hide", "show", or "toggle" is provided, a default
animation will be constructed for that property.
涓缁勫寘鍚浣滀负鍔ㄧ敾灞炴у拰缁堝肩殑鏍峰紡灞炴у拰鍙婂叾鍊肩殑闆嗗悎
(鍙閫) 涓夌嶉勫畾閫熷害涔嬩竴鐨勫瓧绗︿覆("slow", "normal", or "fast")鎴栬〃绀哄姩鐢绘椂闀跨殑姣绉掓暟鍊(濡傦細1000)
(鍙閫) 瑕佷娇鐢ㄧ殑鎿﹂櫎鏁堟灉鐨勫悕绉(闇瑕佹彃浠舵敮鎸).
(鍙閫) 鍦ㄥ姩鐢诲畬鎴愭椂鎵ц岀殑鍑芥暟
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
$("p").animate({
left: 50, opacity: 'show'
}, 500);
An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function (Only 'linear' is provided by default, with jQuery).
$("p").animate({
opacity: 'show'
}, "slow", "easein");
涓烘瘡涓涓鍖归厤鍏冪礌鐨勭壒瀹氫簨浠讹紙鍍廲lick锛夌粦瀹氫竴涓浜嬩欢澶勭悊鍣ㄥ嚱鏁般
杩欎釜浜嬩欢澶勭悊鍑芥暟浼氭帴鏀跺埌涓涓浜嬩欢瀵硅薄锛屽彲浠ラ氳繃瀹冩潵闃绘锛堟祻瑙堝櫒锛夐粯璁ょ殑琛屼负銆
濡傛灉鏃㈡兂鍙栨秷榛樿ょ殑琛屼负锛屽張鎯抽樆姝浜嬩欢璧锋场锛岃繖涓浜嬩欢澶勭悊鍑芥暟蹇呴』杩斿洖false銆
澶氭暟鎯呭喌涓嬶紝鍙浠ユ妸浜嬩欢澶勭悊鍣ㄥ嚱鏁板畾涔変负鍖垮悕鍑芥暟锛堣佺ず渚嬩竴锛夈
鍦ㄤ笉鍙鑳藉畾涔夊尶鍚嶅嚱鏁扮殑鎯呭喌涓嬶紝鍙浠ヤ紶閫掍竴涓鍙閫夌殑鏁版嵁瀵硅薄浣滀负绗浜屼釜鍙傛暟锛堣屼簨浠跺勭悊鍣ㄥ嚱鏁板垯浣滀负绗涓変釜鍙傛暟锛夛紝
瑙佺ず渚嬩簩銆
Binds a handler to a particular event (like click) for each matched element.
The event handler is passed an event object that you can use to prevent
default behaviour. To stop both default action and event bubbling, your handler
has to return false.
In most cases, you can define your event handlers as anonymous functions
(see first example). In cases where that is not possible, you can pass additional
data as the second paramter (and the handler function as the third), see
second example.
浜嬩欢绫诲瀷
(鍙閫) 浣滀负event.data灞炴у间紶閫掔粰浜嬩欢瀵硅薄鐨勯濆栨暟鎹瀵硅薄
缁戝畾鍒版瘡涓鍖归厤鍏冪礌鐨勪簨浠朵笂闈㈢殑澶勭悊鍑芥暟
$("p").bind("click", function(){
alert( $(this).text() );
});
alert("Hello")
<p>Hello</p>
涓轰簨浠跺硅薄浼犻掍竴浜涢濆栫殑鏁版嵁銆
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
alert("bar")
閫氳繃杩斿洖false鏉ュ彇娑堥粯璁ょ殑琛屼负骞堕樆姝浜嬩欢璧锋场銆
$("form").bind("submit", function() { return false; })
閫氳繃浣跨敤 preventDefault 鏂规硶鍙鍙栨秷榛樿ょ殑琛屼负銆
$("form").bind("submit", function(event){
event.preventDefault();
});
閫氳繃浣跨敤 stopPropagation 鏂规硶鍙闃绘浜嬩欢璧锋场銆
$("form").bind("submit", function(event){
event.stopPropagation();
});
涓烘瘡涓涓鍖归厤鍏冪礌鐨勭壒瀹氫簨浠讹紙鍍廲lick锛夌粦瀹氫竴涓浜嬩欢澶勭悊鍣ㄥ嚱鏁般
鍦ㄦ瘡涓瀵硅薄涓婏紝杩欎釜浜嬩欢澶勭悊鍑芥暟鍙浼氳鎵ц屼竴娆°傚叾浠栬勫垯涓巄ind()鍑芥暟鐩稿悓銆
杩欎釜浜嬩欢澶勭悊鍑芥暟浼氭帴鏀跺埌涓涓浜嬩欢瀵硅薄锛屽彲浠ラ氳繃瀹冩潵闃绘锛堟祻瑙堝櫒锛夐粯璁ょ殑琛屼负銆
濡傛灉鏃㈡兂鍙栨秷榛樿ょ殑琛屼负锛屽張鎯抽樆姝浜嬩欢璧锋场锛岃繖涓浜嬩欢澶勭悊鍑芥暟蹇呴』杩斿洖false銆
澶氭暟鎯呭喌涓嬶紝鍙浠ユ妸浜嬩欢澶勭悊鍣ㄥ嚱鏁板畾涔変负鍖垮悕鍑芥暟锛堣佺ず渚嬩竴锛夈
鍦ㄤ笉鍙鑳藉畾涔夊尶鍚嶅嚱鏁扮殑鎯呭喌涓嬶紝鍙浠ヤ紶閫掍竴涓鍙閫夌殑鏁版嵁瀵硅薄浣滀负绗浜屼釜鍙傛暟锛堣屼簨浠跺勭悊鍣ㄥ嚱鏁板垯浣滀负绗涓変釜鍙傛暟锛夛紝
瑙佺ず渚嬩簩銆
Binds a handler to a particular event (like click) for each matched element.
The handler is executed only once for each element. Otherwise, the same rules
as described in bind() apply.
The event handler is passed an event object that you can use to prevent
default behaviour. To stop both default action and event bubbling, your handler
has to return false.
In most cases, you can define your event handlers as anonymous functions
(see first example). In cases where that is not possible, you can pass additional
data as the second paramter (and the handler function as the third), see
second example.
浜嬩欢绫诲瀷
(鍙閫) 浣滀负event.data灞炴у间紶閫掔粰浜嬩欢瀵硅薄鐨勯濆栨暟鎹瀵硅薄
缁戝畾鍒版瘡涓鍖归厤鍏冪礌鐨勪簨浠朵笂闈㈢殑澶勭悊鍑芥暟
$("p").one("click", function(){
alert( $(this).text() );
});
alert("Hello")
<p>Hello</p>
鍙嶇粦瀹氾紝浠庢瘡涓涓鍖归厤鐨勫厓绱犱腑鍒犻櫎缁戝畾鐨勪簨浠躲
濡傛灉娌℃湁鍙傛暟锛屽垯鍒犻櫎鎵鏈夌粦瀹氱殑浜嬩欢銆
濡傛灉鎻愪緵浜嗕簨浠剁被鍨嬩綔涓哄弬鏁帮紝鍒欏彧鍒犻櫎璇ョ被鍨嬬殑缁戝畾浜嬩欢銆
濡傛灉鎶婂湪缁戝畾鏃朵紶閫掔殑澶勭悊鍑芥暟浣滀负绗浜屼釜鍙傛暟锛屽垯鍙鏈夎繖涓鐗瑰畾鐨勪簨浠跺勭悊鍑芥暟浼氳鍒犻櫎銆
The opposite of bind, removes a bound event from each of the matched
elements.
Without any arguments, all bound events are removed.
If the type is provided, all bound events of that type are removed.
If the function that was passed to bind is provided as the second argument,
only that specific event handler is removed.
(鍙閫) 浜嬩欢绫诲瀷
(鍙閫) 瑕佷粠姣忎釜鍖归厤鍏冪礌鐨勪簨浠朵腑鍙嶇粦瀹氱殑浜嬩欢澶勭悊鍑芥暟
$("p").unbind()
[ <p>Hello</p> ]
<p onclick="alert('Hello');">Hello</p>
$("p").unbind( "click" )
[ <p>Hello</p> ]
<p onclick="alert('Hello');">Hello</p>
$("p").unbind( "click", function() { alert("Hello"); } )
[ <p>Hello</p> ]
<p onclick="alert('Hello');">Hello</p>
鍦ㄦ瘡涓涓鍖归厤鐨勫厓绱犱笂瑙﹀彂鏌愮被浜嬩欢銆
Trigger a type of event on every matched element.
瑕佽Е鍙戠殑浜嬩欢绫诲瀷
$("p").trigger("click")
alert('hello')
<p click="alert('hello')">Hello</p>
姣忔$偣鍑绘椂鍒囨崲瑕佽皟鐢ㄧ殑鍑芥暟銆
濡傛灉鐐瑰嚮浜嗕竴涓鍖归厤鐨勫厓绱狅紝鍒欒Е鍙戞寚瀹氱殑绗涓涓鍑芥暟锛屽綋鍐嶆$偣鍑诲悓涓鍏冪礌鏃讹紝鍒欒Е鍙戞寚瀹氱殑绗浜屼釜鍑芥暟銆
闅忓悗鐨勬瘡娆$偣鍑婚兘閲嶅嶅硅繖涓や釜鍑芥暟鐨勮疆鐣璋冪敤銆
鍙浠ヤ娇鐢╱nbind("click")鏉ュ垹闄ゃ
Toggle between two function calls every other click.
Whenever a matched element is clicked, the first specified function
is fired, when clicked again, the second is fired. All subsequent
clicks continue to rotate through the two functions.
Use unbind("click") to remove.
绗濂囨暟娆$偣鍑绘椂瑕佹墽琛岀殑鍑芥暟銆
绗鍋舵暟娆$偣鍑绘椂瑕佹墽琛岀殑鍑芥暟銆
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
涓涓妯′豢鎮鍋滀簨浠讹紙榧犳爣绉诲姩鍒颁竴涓瀵硅薄涓婇潰锛屽強绉诲嚭杩欎釜瀵硅薄锛夌殑鏂规硶銆
杩欐槸涓涓鑷瀹氫箟鐨勬柟娉曪紝瀹冧负棰戠箒浣跨敤鐨勪换鍔℃彁渚涗簡涓绉嶁滀繚鎸佸湪鍏朵腑鈥濈殑鐘舵併
褰撻紶鏍囩Щ鍔ㄥ埌涓涓鍖归厤鐨勫厓绱犱笂闈㈡椂锛屼細瑙﹀彂鎸囧畾鐨勭涓涓鍑芥暟銆
褰撻紶鏍囩Щ鍑鸿繖涓鍏冪礌鏃讹紝浼氳Е鍙戞寚瀹氱殑绗浜屼釜鍑芥暟銆
鑰屼笖锛屼細浼撮殢鐫瀵归紶鏍囨槸鍚︿粛鐒跺勫湪鐗瑰畾鍏冪礌涓鐨勬娴嬶紙渚嬪傦紝澶勫湪div涓鐨勫浘鍍忥級锛
濡傛灉鏄锛屽垯浼氱户缁淇濇寔鈥滄偓蹇碘濈姸鎬侊紝鑰屼笉瑙﹀彂绉诲嚭浜嬩欢锛堜慨姝d簡浣跨敤mouseout浜嬩欢鐨勪竴涓甯歌侀敊璇锛夈
A method for simulating hovering (moving the mouse on, and off,
an object). This is a custom method which provides an 'in' to a
frequent task.
Whenever the mouse cursor is moved over a matched
element, the first specified function is fired. Whenever the mouse
moves off of the element, the second specified function fires.
Additionally, checks are in place to see if the mouse is still within
the specified element itself (for example, an image inside of a div),
and if it is, it will continue to 'hover', and not move out
(a common error in using a mouseout event handler).
榧犳爣绉诲埌鍏冪礌涓婅佽Е鍙戠殑鍑芥暟
榧犳爣绉诲嚭鍏冪礌瑕佽Е鍙戠殑鍑芥暟
$("p").hover(function(){
$(this).addClass("over");
},function(){
$(this).addClass("out");
});
褰揇OM杞藉叆灏辩华鍙浠ユ煡璇㈠強鎿嶇旱鏃剁粦瀹氫竴涓瑕佹墽琛岀殑鍑芥暟銆
杩欐槸浜嬩欢妯″潡涓鏈閲嶈佺殑涓涓鍑芥暟锛屽洜涓哄畠鍙浠ユ瀬澶у湴鎻愰珮web搴旂敤绋嬪簭鐨勫搷搴旈熷害銆
绠鍗曞湴璇达紝杩欎釜鏂规硶绾绮规槸瀵瑰悜window.load浜嬩欢娉ㄥ唽浜嬩欢鐨勬浛浠f柟娉曘
閫氳繃浣跨敤杩欎釜鏂规硶锛屽彲浠ュ湪DOM杞藉叆灏辩华鑳藉熻诲彇骞舵搷绾垫椂绔嬪嵆璋冪敤浣犳墍缁戝畾鐨勫嚱鏁帮紝
鑰99.99%鐨凧avaScript鍑芥暟閮介渶瑕佸湪閭d竴鍒绘墽琛屻
璇风‘淇濆湪<body>鍏冪礌鐨刼nload浜嬩欢涓娌℃湁娉ㄥ唽鍑芥暟锛屽惁鍒欎笉浼氳Е鍙$(document).ready()浜嬩欢銆
鍙浠ュ湪鍚屼竴涓椤甸潰涓鏃犻檺娆″湴浣跨敤$(document).ready()浜嬩欢銆傚叾涓娉ㄥ唽鐨勫嚱鏁颁細鎸夌収锛堜唬鐮佷腑鐨勶級鍏堝悗椤哄簭渚濇℃墽琛屻
Bind a function to be executed whenever the DOM is ready to be
traversed and manipulated. This is probably the most important
function included in the event module, as it can greatly improve
the response times of your web applications.
In a nutshell, this is a solid replacement for using window.onload,
and attaching a function to that. By using this method, your bound Function
will be called the instant the DOM is ready to be read and manipulated,
which is exactly what 99.99% of all Javascript code needs to run.
Please ensure you have no code in your <body> onload event handler,
otherwise $(document).ready() may not fire.
You can have as many $(document).ready events on your page as you like.
The functions are then executed in the order they were added.
瑕佸湪DOM灏辩华鏃舵墽琛岀殑鍑芥暟
$(document).ready(function(){ Your code here... });
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨勬粴鍔ㄤ簨浠朵腑缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the scroll event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨勬粴鍔ㄤ簨浠朵腑缁戝畾鐨勫勭悊鍑芥暟
$("p").scroll( function() { alert("Hello"); } );
<p onscroll="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剆ubmit浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the submit event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剆ubmit浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟
Prevents the form submission when the input has no value entered.
$("#myform").submit( function() {
return $("input", this).val().length > 0;
} );
<form id="myform"><input /></form>
瑙﹀彂姣忎竴涓鍖归厤鍏冪礌鐨剆ubmit浜嬩欢銆
杩欎釜鍑芥暟浼氳皟鐢ㄦ墽琛岀粦瀹氬埌submit浜嬩欢鐨勬墍鏈夊嚱鏁般
娉ㄦ剰锛氳繖涓鍑芥暟涓嶄細璋冪敤form鍏冪礌鐨剆ubmit鏂规硶锛佸傛灉闇瑕侀氳繃浠g爜鏉ユ彁浜よ〃鍗曪紝蹇呴』浣跨敤DOM鏂规硶锛
渚嬪傦細$("form")[0].submit();
Trigger the submit event of each matched element. This causes all of the functions
that have been bound to thet submit event to be executed.
Note: This does not execute the submit method of the form element! If you need to
submit the form via code, you have to use the DOM method, eg. $("form")[0].submit();
瑙﹀彂娉ㄥ唽鍒拌〃鍗曠殑鎵鏈塻ubmit浜嬩欢锛屼絾涓嶆彁浜よ〃鍗曘
$("form").submit();
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刦ocus浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the focus event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剆ubmit浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").focus( function() { alert("Hello"); } );
<p onfocus="alert('Hello');">Hello</p>
<p>Hello</p>
瑙﹀彂姣忎竴涓鍖归厤鍏冪礌鐨刦ocus浜嬩欢銆傝繖涓鍑芥暟浼氳皟鐢ㄦ墽琛岀粦瀹氬埌focus浜嬩欢鐨勬墍鏈夊嚱鏁般
娉ㄦ剰锛氳繖涓鍑芥暟涓嶄細璋冪敤鐩稿簲鍏冪礌鐨刦ocus鏂规硶锛佸傛灉闇瑕侀氳繃浠g爜鏉ヤ娇涓涓鍏冪礌鑾峰緱鐒︾偣锛屽繀椤讳娇鐢―OM鏂规硶锛
渚嬪傦細$("#myinput")[0].focus();
Trigger the focus event of each matched element. This causes all of the functions
that have been bound to thet focus event to be executed.
Note: This does not execute the focus method of the underlying elements! If you need to
focus an element via code, you have to use the DOM method, eg. $("#myinput")[0].focus();
$("p").focus();
alert('Hello');
<p onfocus="alert('Hello');">Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刱eydown浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the keydown event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刱eydown浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").keydown( function() { alert("Hello"); } );
<p onkeydown="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刣blclick浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the dblclick event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刣blclick浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").dblclick( function() { alert("Hello"); } );
<p ondblclick="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刱eypress浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the keypress event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刱eypress浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").keypress( function() { alert("Hello"); } );
<p onkeypress="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨別rror浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the error event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨別rror浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").error( function() { alert("Hello"); } );
<p onerror="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刡lur浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the blur event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刡lur浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").blur( function() { alert("Hello"); } );
<p onblur="alert('Hello');">Hello</p>
<p>Hello</p>
瑙﹀彂姣忎竴涓鍖归厤鍏冪礌鐨刡lur浜嬩欢銆傝繖涓鍑芥暟浼氳皟鐢ㄦ墽琛岀粦瀹氬埌blur浜嬩欢鐨勬墍鏈夊嚱鏁般
娉ㄦ剰锛氳繖涓鍑芥暟涓嶄細璋冪敤鐩稿簲鍏冪礌鐨刡lur鏂规硶锛佸傛灉闇瑕侀氳繃浠g爜鏉ヤ娇涓涓鍏冪礌鑾峰緱鐒︾偣锛屽繀椤讳娇鐢―OM鏂规硶锛
渚嬪傦細$("#myinput")[0].blur();
Trigger the blur event of each matched element. This causes all of the functions
that have been bound to thet blur event to be executed.
Note: This does not execute the blur method of the underlying elements! If you need to
blur an element via code, you have to use the DOM method, eg. $("#myinput")[0].blur();
$("p").blur();
alert('Hello');
<p onblur="alert('Hello');">Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刲oad浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the load event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刲oad浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").load( function() { alert("Hello"); } );
<p onload="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剆elect浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the select event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剆elect浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").select( function() { alert("Hello"); } );
<p onselect="alert('Hello');">Hello</p>
<p>Hello</p>
瑙﹀彂姣忎竴涓鍖归厤鍏冪礌鐨剆elect浜嬩欢銆傝繖涓鍑芥暟浼氳皟鐢ㄦ墽琛岀粦瀹氬埌select浜嬩欢鐨勬墍鏈夊嚱鏁般
Trigger the select event of each matched element. This causes all of the functions
that have been bound to thet select event to be executed.
$("p").select();
alert('Hello');
<p onselect="alert('Hello');">Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ouseup浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the mouseup event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ouseup浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").mouseup( function() { alert("Hello"); } );
<p onmouseup="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剈nload浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the unload event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剈nload浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").unload( function() { alert("Hello"); } );
<p onunload="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刢hange浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the change event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刢hange浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").change( function() { alert("Hello"); } );
<p onchange="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ouseout浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the mouseout event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ouseout浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").mouseout( function() { alert("Hello"); } );
<p onmouseout="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刱eyup浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the keyup event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刱eyup浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").keyup( function() { alert("Hello"); } );
<p onkeyup="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刢lick浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the click event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刢lick浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").click( function() { alert("Hello"); } );
<p onclick="alert('Hello');">Hello</p>
<p>Hello</p>
瑙﹀彂姣忎竴涓鍖归厤鍏冪礌鐨刢lick浜嬩欢銆傝繖涓鍑芥暟浼氳皟鐢ㄦ墽琛岀粦瀹氬埌click浜嬩欢鐨勬墍鏈夊嚱鏁般
Trigger the click event of each matched element. This causes all of the functions
that have been bound to thet click event to be executed.
$("p").click();
alert('Hello');
<p onclick="alert('Hello');">Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剅esize浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the resize event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨剅esize浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").resize( function() { alert("Hello"); } );
<p onresize="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ousemove浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the mousemove event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ousemove浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").mousemove( function() { alert("Hello"); } );
<p onmousemove="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ousedown浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the mousedown event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ousedown浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").mousedown( function() { alert("Hello"); } );
<p onmousedown="alert('Hello');">Hello</p>
<p>Hello</p>
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ouseover浜嬩欢涓缁戝畾涓涓澶勭悊鍑芥暟銆
Bind a function to the mouseover event of each matched element.
鍦ㄦ瘡涓涓鍖归厤鍏冪礌鐨刴ouseover浜嬩欢涓缁戝畾鐨勫勭悊鍑芥暟銆
$("p").mouseover( function() { alert("Hello"); } );
<p onmouseover="alert('Hello');">Hello</p>
<p>Hello</p>
All ancestors of a given element.
The element to find the ancestors of.
All elements on a specified axis.
The element to find all the siblings of (including itself).
Load HTML from a remote file and inject it into the DOM, only if it's
been modified by the server.
The URL of the HTML file to load.
A set of key/value pairs that will be sent to the server.
A function to be executed whenever the data is loaded.
$("#feeds").loadIfModified("feeds.html")
<div id="feeds"><b>45</b> feeds found.</div>
<div id="feeds"></div>
Load HTML from a remote file and inject it into the DOM.
The URL of the HTML file to load.
A set of key/value pairs that will be sent as data to the server.
A function to be executed whenever the data is loaded (parameters: responseText, status and reponse itself).
$("#feeds").load("feeds.html")
<div id="feeds"><b>45</b> feeds found.</div>
<div id="feeds"></div>
Same as above, but with an additional parameter
and a callback that is executed when the data was loaded.
$("#feeds").load("feeds.html",
{test: true},
function() { alert("load is done"); }
);
Serializes a set of input elements into a string of data.
This will serialize all given elements. If you need
serialization similar to the form submit of a browser,
you should use the form plugin. This is also true for
selects with multiple attribute set, only a single option
is serialized.
Serialize a selection of input elements to a string
<input type='text' name='name' value='John'/>
<input type='text' name='location' value='Boston'/>
$("input[@type=text]").serialize();
Evaluate all script tags inside this jQuery. If they have a src attribute,
the script is loaded, otherwise it's content is evaluated.
Attach a function to be executed whenever an AJAX request begins.
The function to execute.
Show a loading message whenever an AJAX request starts.
$("#loading").ajaxStart(function(){
$(this).show();
});
Attach a function to be executed whenever all AJAX requests have ended.
The function to execute.
Hide a loading message after all the AJAX requests have stopped.
$("#loading").ajaxStop(function(){
$(this).hide();
});
Attach a function to be executed whenever an AJAX request completes.
The XMLHttpRequest and settings used for that request are passed
as arguments to the callback.
The function to execute.
Show a message when an AJAX request completes.
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
Attach a function to be executed whenever an AJAX request completes
successfully.
The XMLHttpRequest and settings used for that request are passed
as arguments to the callback.
The function to execute.
Show a message when an AJAX request completes successfully.
$("#msg").ajaxSuccess(function(request, settings){
$(this).append("<li>Successful Request!</li>");
});
Attach a function to be executed whenever an AJAX request fails.
The XMLHttpRequest and settings used for that request are passed
as arguments to the callback.
The function to execute.
Show a message when an AJAX request fails.
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
Attach a function to be executed before an AJAX request is send.
The XMLHttpRequest and settings used for that request are passed
as arguments to the callback.
The function to execute.
Show a message before an AJAX request is send.
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
Load a remote page using an HTTP GET request. All of the arguments to
the method (except URL) are optional.
The URL of the page to load.
A set of key/value pairs that will be sent to the server.
A function to be executed whenever the data is loaded.
$.get("test.cgi")
$.get("test.cgi", { name: "John", time: "2pm" } )
$.get("test.cgi", function(data){
alert("Data Loaded: " + data);
})
$.get("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
)
Load a remote page using an HTTP GET request, only if it hasn't
been modified since it was last retrieved. All of the arguments to
the method (except URL) are optional.
The URL of the page to load.
A set of key/value pairs that will be sent to the server.
A function to be executed whenever the data is loaded.
$.getIfModified("test.html")
$.getIfModified("test.html", { name: "John", time: "2pm" } )
$.getIfModified("test.cgi", function(data){
alert("Data Loaded: " + data);
})
$.getifModified("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
)
Loads, and executes, a remote JavaScript file using an HTTP GET request.
All of the arguments to the method (except URL) are optional.
Warning: Safari <= 2.0.x is unable to evalulate scripts in a global
context sychronously. If you load functions via getScript, make sure
to call them after a delay.
The URL of the page to load.
A function to be executed whenever the data is loaded.
$.getScript("test.js")
$.getScript("test.js", function(){
alert("Script loaded and executed.");
})
Load a remote JSON object using an HTTP GET request.
All of the arguments to the method (except URL) are optional.
The URL of the page to load.
A set of key/value pairs that will be sent to the server.
A function to be executed whenever the data is loaded.
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
})
$.getJSON("test.js",
{ name: "John", time: "2pm" },
function(json){
alert("JSON Data: " + json.users[3].name);
}
)
Load a remote page using an HTTP POST request. All of the arguments to
the method (except URL) are optional.
The URL of the page to load.
A set of key/value pairs that will be sent to the server.
A function to be executed whenever the data is loaded.
$.post("test.cgi")
$.post("test.cgi", { name: "John", time: "2pm" } )
$.post("test.cgi", function(data){
alert("Data Loaded: " + data);
})
$.post("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
)
浣跨敤HTTP璇锋眰锛圶MLHttpRequest锛夎浇鍏ヤ竴涓杩滅▼椤甸潰銆
杩欐槸jQuery鐨勪綆绾AJAX瀹炵幇銆傝佹煡鐪嬮珮绾ф娊璞★紝瑙$.set銆$.post绛夈
$.ajax()杩斿洖鍒涘缓濂界殑XMLHttpRequest瀵硅薄銆傚氭暟鎯呭喌涓嬪苟涓嶉渶瑕佺洿鎺ユ搷绾佃繖涓瀵硅薄锛
浣嗘槸濡傛灉闇瑕佹墜鍔ㄤ腑姝㈣锋眰锛屽畠涔熸槸鍙鐢ㄧ殑銆
娉ㄦ剰锛氳佺‘淇濇湇鍔″櫒杩斿洖姝g‘鐨凪IME绫诲瀷锛堜緥濡傦細XML鏄鈥渢ext/xml鈥濓級銆傚傛灉杩斿洖浜嗛敊璇鐨凪IME绫诲瀷灏变細瀵艰嚧jQuery鏃犳硶澶勭悊鐨勪弗閲嶉棶棰樸
鏀鎸佺殑鏁版嵁绫诲瀷鍖呮嫭锛堣乨ataType閫夐」锛夛細
"xml": 杩斿洖涓涓鍙浠ョ敱jQuery瀵硅薄澶勭悊鐨刋ML鏂囨。銆
"html": 杩斿洖绾鏂囨湰鏍煎紡鐨凥TML锛屽寘鎷姹傚煎悗鐨勮剼鏈鏍囪般
"script": 灏嗗搷搴斾綔涓篔avascript璇鍙ユ眰鍊硷紝骞惰繑鍥炵函鏂囨湰銆
"json": 灏嗗搷搴斾綔涓篔SON姹傚硷紝骞惰繑鍥炰竴涓狫avascript瀵硅薄銆
$.ajax()甯︽湁涓涓鍙傛暟锛嶏紞鈥滃悕/鍊煎光濆舰寮忕殑涓涓瀵硅薄锛岀敤浜庡垵濮嬪寲鍜屽勭悊璇锋眰銆
浠ヤ笅灏辨槸鍙鐢ㄧ殑鎵鏈夆滃悕/鍊煎光濓細
(String) url - 瑕佸皢璇锋眰鍙戦佸埌鐨刄RL鍦板潃銆
(String) type - 璇锋眰鐨勭被鍨 ("POST" 鎴 "GET"), 榛樿ゆ槸 "GET"銆
(String) dataType - 鏈熸湜浠庢湇鍔″櫒绔杩斿洖鐨勬暟鎹绫诲瀷銆
鏃犻粯璁ゅ硷細濡傛灉鏈嶅姟鍣ㄨ繑鍥瀀ML锛屽氨灏唕esponseXML浼犻掑埌鍥炶皟鍑芥暟锛屽惁鍒欏皢resposeText浼犻掑埌鍥炶皟鍑芥暟銆
(Boolean) ifModified - 鍙鏈夊搷搴旇嚜涓婃¤锋眰鍚庤淇鏀硅繃鎵嶆壙璁ゆ槸鎴愬姛鐨勮锋眰銆
鏄閫氳繃妫鏌ュご閮ㄧ殑Last-Modified鍊煎疄鐜扮殑銆傞粯璁ゅ间负false锛屽嵆蹇界暐 瀵归儴鍒嗙殑妫鏌
(Number) timeout - 瑕嗙洊鍏ㄥ眬寤惰繜鐨勫眬閮ㄥ欢杩燂紝渚嬪傦紝鍦ㄥ叾浠栨墍鏈夊欢杩熺粡杩1绉掗挓鍚庯紝鍚鍔ㄤ竴涓杈冮暱寤惰繜鐨勫崟鐙璇锋眰銆
鏈夊叧鍏ㄥ眬寤惰繜锛岃$.ajaxTimeout()銆
(Boolean) global - 鏄鍚︿负褰撳墠鐨勮锋眰瑙﹀彂鍏ㄥ眬AJAX浜嬩欢澶勭悊鍑芥暟锛岄粯璁ゅ间负true銆
璁剧疆涓篺alse鍙浠ラ槻姝㈣Е鍙戝儚ajaxStart鎴朼jaxStop杩欐牱鐨勫叏灞浜嬩欢澶勭悊鍑芥暟銆
(Function) error - 褰撹锋眰澶辫触鏃惰皟鐢ㄧ殑鍑芥暟銆
杩欎釜鍑芥暟浼氬緱鍒颁笁涓鍙傛暟锛歑MLHttpRequest瀵硅薄銆佷竴涓鎻忚堪鎵鍙戠敓鐨勯敊璇绫诲瀷鐨勫瓧绗︿覆鍜屼竴涓鍙閫夊紓甯稿硅薄锛堝傛灉鏈夛級銆
(Function) success - 褰撹锋眰鎴愬姛鏃惰皟鐢ㄧ殑鍑芥暟銆
杩欎釜鍑芥暟浼氬緱鍒颁竴涓鍙傛暟锛氫粠鏈嶅姟鍣ㄨ繑鍥炵殑鏁版嵁锛堟牴鎹鈥渄ataType鈥濊繘琛屼簡鏍煎紡鍖栵級銆
(Function) complete - 褰撹锋眰瀹屾垚鏃惰皟鐢ㄧ殑鍑芥暟銆
杩欎釜鍑芥暟浼氬緱鍒颁袱涓鍙傛暟锛歑MLHttpRequest瀵硅薄鍜屼竴涓鎻忚堪璇锋眰鎴愬姛鐨勭被鍨嬬殑瀛楃︿覆銆
(Object|String) data - 瑕佸彂閫佸埌鏈嶅姟鍣ㄧ殑鏁版嵁銆傚傛灉杩樹笉鏄涓涓瀛楃︿覆锛屽氨鑷鍔ㄨ疆鎹涓轰竴涓鏌ヨ㈠瓧绗︿覆銆
鍗抽檮鍔犲埌GET璇锋眰鐨剈rl鍚庨潰鐨勫瓧绗︿覆銆傝侀槻姝㈣嚜鍔ㄥ勭悊瑙乸rocessData閫夐」銆
(String) contentType - 璁剧疆鍙戦佽锋眰鐨刢ontent=type銆
榛樿ゅ兼槸 "application/x-www-form-urlencoded", 杩欎釜鍊艰兘婊¤冻澶氭暟鎯呭喌銆
(Boolean) processData - 鍦ㄩ粯璁ょ殑鎯呭喌涓嬶紝濡傛灉data閫夐」浼犺繘鐨勬暟鎹鏄涓涓瀵硅薄鑰屼笉鏄瀛楃︿覆锛屽皢浼氳嚜鍔ㄥ湴琚澶勭悊鍜岃浆鎹㈡垚涓涓鏌ヨ㈠瓧绗︿覆锛
浠ラ傚簲榛樿ょ殑content-type锛嶏紞"application/x-www-form-urlencoded"銆傚傛灉鎯冲彂閫丏OMDocuments锛屽氨瑕佹妸杩欎釜閫夐」璁剧疆涓篺alse銆
(Boolean) async - 鍦ㄩ粯璁ょ殑鎯呭喌涓嬶紝鎵鏈夎锋眰閮芥槸浠ュ紓姝ョ殑鏂瑰紡鍙戦佺殑锛堝间负true锛夈
濡傛灉瑕佷娇鐢ㄥ悓姝ユ柟寮忥紝闇瑕佸皢姝ら」璁剧疆涓篺alse銆
(Function) beforeSend - 鐢ㄤ簬璁剧疆鑷瀹氫箟澶撮儴绛変俊鎭鐨勯勮皟鐢ㄥ嚱鏁帮紝鎺ユ敹涓涓鍞涓鐨勫弬鏁帮紞锛峏MLHttpRequest瀵硅薄銆
Load a remote page using an HTTP request.
This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for
higher-level abstractions.
$.ajax() returns the XMLHttpRequest that it creates. In most cases you won't
need that object to manipulate directly, but it is available if you need to
abort the request manually.
Note: Make sure the server sends the right mimetype (eg. xml as
"text/xml"). Sending the wrong mimetype will get you into serious
trouble that jQuery can't solve.
Supported datatypes are (see dataType option):
"xml": Returns a XML document that can be processed via jQuery.
"html": Returns HTML as plain text, included script tags are evaluated.
"script": Evaluates the response as Javascript and returns it as plain text.
"json": Evaluates the response as JSON and returns a Javascript Object
$.ajax() takes one argument, an object of key/value pairs, that are
used to initalize and handle the request. These are all the key/values that can
be used:
(String) url - The URL to request.
(String) type - The type of request to make ("POST" or "GET"), default is "GET".
(String) dataType - The type of data that you're expecting back from
the server. No default: If the server sends xml, the responseXML, otherwise
the responseText is passed to the success callback.
(Boolean) ifModified - Allow the request to be successful only if the
response has changed since the last request. This is done by checking the
Last-Modified header. Default value is false, ignoring the header.
(Number) timeout - Local timeout to override global timeout, eg. to give a
single request a longer timeout while all others timeout after 1 second.
See $.ajaxTimeout() for global timeouts.
(Boolean) global - Whether to trigger global AJAX event handlers for
this request, default is true. Set to false to prevent that global handlers
like ajaxStart or ajaxStop are triggered.
(Function) error - A function to be called if the request fails. The
function gets passed tree arguments: The XMLHttpRequest object, a
string describing the type of error that occurred and an optional
exception object, if one occured.
(Function) success - A function to be called if the request succeeds. The
function gets passed one argument: The data returned from the server,
formatted according to the 'dataType' parameter.
(Function) complete - A function to be called when the request finishes. The
function gets passed two arguments: The XMLHttpRequest object and a
string describing the type of success of the request.
(Object|String) data - Data to be sent to the server. Converted to a query
string, if not already a string. Is appended to the url for GET-requests.
See processData option to prevent this automatic processing.
(String) contentType - When sending data to the server, use this content-type.
Default is "application/x-www-form-urlencoded", which is fine for most cases.
(Boolean) processData - By default, data passed in to the data option as an object
other as string will be processed and transformed into a query string, fitting to
the default content-type "application/x-www-form-urlencoded". If you want to send
DOMDocuments, set this option to false.
(Boolean) async - By default, all requests are send asynchronous (set to true).
If you need synchronous requests, set this option to false.
(Function) beforeSend - A pre-callback to set custom headers etc., the
XMLHttpRequest is passed as the only argument.
Key/value pairs to initialize the request with.
杞藉叆骞舵墽琛屼竴涓狫avaScript鏂囦欢銆
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
})
灏嗘暟鎹淇濆瓨鍒版湇鍔″櫒锛屽苟鍦ㄤ繚瀛樺畬鎴愬悗閫氭姤鐢ㄦ埛銆
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
鍚屾ヨ浇鍏ユ暟鎹銆傚綋璇锋眰澶勪簬娲诲姩鏈熼棿闃诲炴祻瑙堝櫒銆
濡傛灉蹇呴』鍚屾ヨ浇鍏ユ暟鎹锛屾渶濂芥槸閫氳繃鍏朵粬鎵嬫垫潵闃绘㈢敤鎴风殑浜や簰锛岃屼笉鏄闃诲炴暣涓娴忚堝櫒銆
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
灏嗕竴涓猉ML鏂囨。浣滀负鏁版嵁鍙戦佸埌鏈嶅姟鍣ㄣ
閫氳繃灏唒rocessData閫夐」璁剧疆涓篺alse锛屽彲浠ラ伩鍏嶆妸鑷鍔ㄦ妸鏁版嵁杞鎹涓哄瓧绗︿覆銆
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});