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(){
  // Îĵµ¾ÍÐ÷
});
VUE