jQuery ºËÐÄ - jQuery() ·½·¨
ʵÀý
ÕÒ³öËùÓÐÊôÓÚ div ÔªËØµÄ×ÓÔªËØµÄ p ÔªËØ£¬È»ºóÉèÖÃÆä±ß¿òÊôÐÔ£º
$("div > p")
.css("border", "1px solid gray");
¶¨ÒåºÍÓ÷¨
jQuery() ·½·¨½ÓÊÜÒ»¸ö×Ö·û´®£¬ÆäÖаüº¬ÁËÓÃÓÚÆ¥ÅäÔªËØ¼¯ºÏµÄ CSS Ñ¡ÔñÆ÷¡£
jQuery() º¯ÊýÓÐÈýÖÖÓï·¨£º
Óï·¨ 1
½ÓÊÜÒ»¸ö×Ö·û´®£¬ÆäÖаüº¬ÁËÓÃÓÚÆ¥ÅäÔªËØ¼¯ºÏµÄ CSS Ñ¡ÔñÆ÷£º
jQuery(selector, [context])
Óï·¨ 2
ʹÓÃÔʼ HTML µÄ×Ö·û´®À´´´½¨ DOM ÔªËØ£º
jQuery(html,[ownerDocument])
Óï·¨ 3
°ó¶¨Ò»¸öÔÚ DOM ÎĵµÔØÈëÍê³ÉºóÖ´Ðеĺ¯Êý£º
jQuery( callback )
jQuery( selector, [ context ] )
¸ÃÓï·¨ÓÐÒÔϼ¸ÖÖÓ÷¨£º
Ó÷¨ 1 £ºÉèÖÃÑ¡ÔñÆ÷»·¾³
Óï·¨
jQuery(selector, [context])
ĬÈÏÇé¿öÏ£¬Ñ¡ÔñÆ÷´ÓÎĵµ¸ù²¿¶Ô DOM ½øÐÐËÑË÷¡£²»¹ý£¬¿ÉÒÔΪ $() ÉèÖÿÉÑ¡µÄ context ²ÎÊý¡£
ÀýÈ磬Èç¹ûÎÒÃÇÏ£ÍûÔÚÒ»¸ö callback ÖÐËÑË÷Ò»¸öÔªËØ£¬¿ÉÒÔÏÞ¶¨ÏÂÃæµÄËÑË÷£º
ʵÀý
$("div.foo").click(function() {
$("span", this)
.addClass("bar");
});
ÓÉÓÚÎÒÃÇÒѾ½« span Ñ¡ÔñÆ÷ÏÞ¶¨µ½ this Õâ¸ö»·¾³ÖУ¬Ö»Óб»µã»÷ÔªËØÖÐµÄ span »áµÃµ½¸½¼ÓµÄ class¡£
ÔÚÄÚ²¿£¬Ñ¡ÔñÆ÷»·¾³ÊÇͨ¹ý .find() ·½·¨ÊµÏֵģ¬Òò´Ë $("span", this) µÈ¼ÛÓÚ $(this).find("span")¡£
jQuery µÄºËÐŦÄܶ¼ÊÇͨ¹ýÕâ¸öº¯ÊýʵÏֵġ£jQueryÖеÄÒ»Çж¼»ùÓÚÕâ¸öº¯Êý£¬»òÕß˵¶¼ÊÇÔÚÒÔijÖÖ·½Ê½Ê¹ÓÃÕâ¸öº¯Êý¡£Õâ¸öº¯Êý×î»ù±¾µÄÓ÷¨¾ÍÊÇÏòËü´«µÝÒ»¸ö±í´ïʽ£¨Í¨³£ÓÉ CSS Ñ¡ÔñÆ÷×é³É£©£¬È»ºó¸ù¾ÝÕâ¸ö±í´ïʽÀ´²éÕÒËùÓÐÆ¥ÅäµÄÔªËØ¡£
ĬÈÏÇé¿öÏÂ, Èç¹ûûÓÐÖ¸¶¨ context ²ÎÊý£¬$() ½«ÔÚµ±Ç°µÄ HTML document ÖвéÕÒ DOM ÔªËØ£»Èç¹ûÖ¸¶¨ÁË context ²ÎÊý£¬ÈçÒ»¸ö DOM ÔªËØ¼¯»ò jQuery ¶ÔÏó£¬ÄǾͻáÔÚÕâ¸ö context ÖвéÕÒ¡£ÔÚ jQuery 1.3.2 ÒÔºó£¬Æä·µ»ØµÄÔªËØË³ÐòµÈͬÓÚÔÚ context ÖгöÏÖµÄÏȺó˳Ðò¡£
Ó÷¨ 2 £ºÊ¹Óà DOM ÔªËØ
Óï·¨
jQuery(element)
¸Ãº¯ÊýÔÊÐíÎÒÃÇͨ¹ýʹÓÃÒÔÆäËû·½Ê½ÕÒµ½µÄ DOM ÔªËØÀ´´´½¨ jQuery ¶ÔÏ󡣸ù¦ÄÜͨ³£µÄÓ÷¨ÊÇ£¬¶ÔÒѾͨ¹ý this ¹Ø¼ü×Ö´«µÝµ½ callback º¯ÊýµÄÔªËØµ÷Óà jQuery µÄ·½·¨£º
ʵÀý
$("div.foo"
).click(function() {
$(this).slideUp();
});
´ËÀý»áÔÚÔªËØ±»µã»÷ʱʹÓû¬¶¯¶¯»¶ÔÆä½øÐÐÒþ²Ø¡£ÓÉÓÚ´¦Àí³ÌÐò½ÓÊÜµÄ this ¹Ø¼ü´ÊÖеı»µã»÷ÏîÄ¿ÊÇ´¿µÄ DOM ÔªËØ£¬Òò´ËÔÚ¶ÔÆäµ÷Óà jQuery µÄ·½·¨Ö®Ç°£¬±ØÐëÓà jQuery ¶ÔÏó°ü×°¸ÃÔªËØ¡£
Õâ¸öº¯ÊýÒ²¿ÉÒÔ½ÓÊÕ XML ÎĵµºÍ Window ¶ÔÏó£¨ËäÈ»ËüÃDz»ÊÇ DOM ÔªËØ£©×÷ΪÓÐЧµÄ²ÎÊý¡£
µ± XML Êý¾Ý´Ó Ajax µ÷ÓÃÖзµ»Øºó£¬ÎÒÃÇ¿ÉÒÔʹÓà $() º¯Êýͨ¹ý jQuery ¶ÔÏó°ü×°¸ÃÊý¾Ý¡£Ò»µ©Íê³É£¬ÎÒÃǾͿÉÒÔʹÓà .find() ºÍÆäËû DOM ±éÀú·½·¨À´È¡»Ø XML ½á¹¹Öе¥¸öÔªËØ¡£
Ó÷¨ 3 £º¿Ë¡ jQuery ¶ÔÏó
Óï·¨
jQuery(jQuery object)
µ±ÒÔ²ÎÊýµÄÐÎʽÏò $() º¯Êý´«µÝ jQuery ¶ÔÏóºó£¬»á´´½¨Ò»¸ö¸Ã¶ÔÏóµÄ¸±±¾¡£Óë³õʼ¶ÔÏóÒ»Ñù£¬Ð嵀 jQuery ¶ÔÏóÒýÓÃÏàͬµÄ DOM ÔªËØ¡£
Ó÷¨ 4 £º·µ»Ø¿ÕµÄ¼¯ºÏ
Óï·¨
jQuery()
¶ÔÓÚ jQuery 1.4£¬µ÷ÓÃÎÞ²ÎÊýµÄ jQuery() ·½·¨»á·µ»Ø¿ÕµÄ jQuery ¼¯ºÏ¡£ÔÚ֮ǰ°æ±¾µÄ jQuery ÖУ¬ÕâÑù»á·µ»Ø°üº¬ document ½ÚµãµÄ¼¯ºÏ¡£
jQuery( html, [ ownerDocument ] )
¸ÃÓï·¨ÓÐÒÔϼ¸ÖÖÓ÷¨£º
Ó÷¨ 1 £º´´½¨ÐµÄÔªËØ
Óï·¨
jQuery(html,[ownerDocument])
Äã¿ÉÒÔ´«µÝÒ»¸öÊÖдµÄ HTML ×Ö·û´®£¬»òÕßÓÉijЩģ°åÒýÇæ»ò²å¼þ´´½¨µÄ×Ö·û´®£¬Ò²¿ÉÒÔÊÇͨ¹ý AJAX ¼ÓÔØ¹ýÀ´µÄ×Ö·û´®¡£µ«ÊÇÔÚÄã´´½¨ input ÔªËØµÄʱ»áÓÐÏÞÖÆ£¬¿ÉÒԲο¼µÚ¶þ¸öʾÀý¡£
µ±È»Õâ¸ö×Ö·û´®¿ÉÒÔ°üº¬Ð±¸Ü (±ÈÈçÒ»¸öͼÏñµØÖ·)£¬»¹Óз´Ð±¸Ü¡£µ±Äã´´½¨µ¥¸öÔªËØÊ±£¬ÇëʹÓñպϱêÇ©»ò XHTML ¸ñʽ¡£ÀýÈ磬´´½¨Ò»¸ö span £¬¿ÉÒÔÓà $("<span/>") »ò $("<span></span>") £¬µ«²»ÍƼö $("<span>")¡£ÔÚ jQuery ÖУ¬Õâ¸öÓï·¨µÈͬÓÚ $(document.createElement("span"))¡£
Èç¹ûÒÔ²ÎÊýµÄÐÎʽ½«×Ö·û´®´«µÝ¸ø $()£¬jQuery »á¼ì²é×Ö·û´®ÊÇ·ñÊÇ HTML £¨±ÈÈ磬×Ö·û´®Ä³Ð©Î»ÖôæÔÚ±êÇ©£©¡£Èç¹û²»ÊÇ£¬Ôò°Ñ×Ö·û´®½âÊÍΪѡÔñÆ÷±í´ïʽ£¬Çë¼ûÉÏÃæµÄ½²½â¡£µ«Èç¹û×Ö·û´®ÊÇ HTML Ƭ¶Î£¬Ôò jQuery ÊÔͼ´´½¨Óɸà HTML Ƭ¶ÎÃèÊöµÄ DOM ÔªËØ¡£È»ºó»á´´½¨²¢·µ»ØÒ»¸öÒýÓÃÕâЩ DOM ÔªËØµÄ jQuery ¶ÔÏó£º
ʵÀý
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Èç¹û HTML Ƭ¶Î±È²»º¬ÊôÐԵļòµ¥±êÇ©¸ü¸´ÔÓ£¬ÈçͬÉÏÃæÀý×ÓÖÐµÄ HTML£¬ÄÇÃ´ÔªËØÊµ¼ÊµÄ´´½¨¹ý³ÌÊÇÓÉä¯ÀÀÆ÷µÄ innerHTML »úÖÆÍê³ÉµÄ¡£¾ßÌ嵨½²£¬jQuery »á´´½¨Ð嵀 <div> ÔªËØ£¬È»ºóΪ´«ÈëµÄ HTML Ƭ¶ÎÉèÖÃÔªËØµÄ innerHTML ÊôÐÔ¡£µ±²ÎÊýÖ»ÊǼòµ¥µÄ±êÇ©£¬±ÈÈç$("<img />") »ò $("<a></a>")£¬jQuery »áͨ¹ýÄÚÉúµÄ JavaScript createElement() º¯ÊýÀ´´´½¨ÔªËØ¡£
Ҫȷ±£¿çƽ̨¼æÈÝÐÔ£¬Æ¬¶ÎµÄ½á¹¹±ØÐëÁ¼ºÃ¡£Äܹ»°üº¬ÆäËûÔªËØµÄ±êÇ©±ØÐë³É¶Ô³öÏÖ£¨´øÓйرձêÇ©£©£º
$("<a href="http://jquery.com"></a>");
²»¹ý£¬jQuery Ò²ÔÊÐíÀàËÆ XML µÄ±êÇ©Óï·¨£º
$("<a/>");
ÎÞ·¨°üº¬ÆäËûÔªËØµÄ±êÇ©¿ÉÒԹرգ¬Ò²¿ÉÒÔ²»¹Ø±Õ£º
$("<img />"); $("<input>");
Ó÷¨ 2 £ºÉèÖÃÊôÐÔºÍʼþ
Óï·¨
jQuery(html,props)
¶ÔÓÚ jQuery 1.4£¬ÎÒÃÇ¿ÉÒÔÏòµÚ¶þ¸ö²ÎÊý´«µÝÒ»¸öÊôÐÔÓ³Éä¡£¸Ã²ÎÊý½ÓÊÜÄܹ»´«µÝ¸ø .attr() ·½·¨µÄÊôÐԵij¬¼¯¡£´ËÍ⣬¿ÉÒÔ´«µÝÈÎÒâµÄʼþÀàÐÍ£¬²¢¿ÉÒÔµ÷ÓÃÏÂÃæµÄ jQuery ·½·¨£ºval, css, html, text, data, width, height, or offset.
×¢Ò⣬Internet Explorer ²»ÔÊÐíÄã´´½¨ input ÔªËØ²¢¸Ä±äÆäÀàÐÍ£»Äú±ØÐëʹÓÃÀýÈç "<input type="checkbox" />" À´¹æ¶¨ÀàÐÍ¡£
ʵÀý
´´½¨Ò»¸ö <input> ÔªËØ£¬Í¬Ê±É趨 type ÊôÐÔ¡¢ÊôÐÔÖµ£¬ÒÔ¼°Ò»Ð©Ê¼þ¡£
$("<input>", { type: "text", val: "Test", focusin: function() { $(this).addClass("active"); }, focusout: function() { $(this).removeClass("active"); } }).appendTo("form");
jQuery( callback )
ÔÊÐíÄã°ó¶¨Ò»¸öÔÚ DOM ÎĵµÔØÈëÍê³ÉºóÖ´Ðеĺ¯Êý¡£
¸Ãº¯ÊýµÄ×÷ÓÃÈçͬ $(document).ready() Ò»Ñù£¬Ö»²»¹ýÓÃÕâ¸öº¯Êýʱ£¬ÐèÒª°ÑÒ³ÃæÖÐËùÓÐÐèÒªÔÚ DOM ¼ÓÔØÍê³ÉʱִÐÐµÄÆäËû $() ²Ù×÷·û¶¼°ü×°µ½ÆäÖÐÀ´¡£¾¡¹Ü´Ó¼¼ÊõÉÏÀ´Ëµ£¬Õâ¸öº¯ÊýÊÇ¿ÉÁ´½ÓµÄ£¬µ«ÕæÕýÒÔÕâÖÖ·½Ê½Á´½ÓµÄÇé¿ö²¢²»¶à¡£
Àý×Ó
µ±DOM¼ÓÔØÍê³Éºó£¬Ö´ÐÐÆäÖеĺ¯Êý£º
$(function(){
// Îĵµ¾ÍÐ÷
});