15¸öÖµµÃ¿ª·¢ÈËÔ±¹Ø×¢µÄjQuery¿ª·¢¼¼ÇɺÍÐĵÃ
ÔÚÕâÆªÎÄÕÂÖУ¬ÎÒÃǽ«½éÉÜ15¸öÈÃÄãµÄjQuery¸ü¼ÓÓÐЧµÄ¼¼ÇÉ£¬´ó²¿·Ö¹ØÓÚÐÔÄÜÌáÉýµÄ£¬Ï£Íû´ó¼ÒÄܹ»Ï²»¶£¡
1. ¾¡Á¿Ê¹ÓÃ×îа汾µÄjQueryÀà¿â
jQueryÏîÄ¿ÖÐʹÓÃÁË´óÁ¿µÄ´´Ð¡£×îºÃµÄ·½·¨À´Ìá¸ßÐÔÄܾÍÊÇʹÓÃ×îа汾µÄjQuery¡£Ã¿Ò»¸öеİ汾¶¼°üº¬ÁËÓÅ»¯µÄbugÐÞ¸´¡£¶ÔÎÒÃÇÀ´ËµÎ¨Ò»Òª¸ÉµÄ¾ÍÊÇÐÞ¸Ätag£¬ºÎÀÖ¶ø²»ÎªÄØ£¿
ÎÒÃÇÒ²¿ÉÒÔʹÓÃÃâ·ÑµÄCDN·þÎñ£¬ÀýÈ磬 GoogleÀ´´æ·ÅjQueryÀà¿â¡£
<!-- Include a specific version of jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Include the latest version in the 1.6 branch --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
2. ʹÓüòµ¥µÄÑ¡ÔñÆ÷
Ö± µ½×î½ü£¬·µ»ØDOMÔªËØµÄ·½Ê½¶¼ÊǽâÎöÑ¡ÔñÆ÷×Ö·û´®£¬javascriptÑ»·ºÍÄÚ½¨µÄjavascript APIÀýÈ磬getElementbyId()£¬getElementsByTagName()£¬getElementsByClassName()ÈýÖÖ ·½Ê½µÄÕûºÏʹÓᣵ«ÊÇÏÖ´úä¯ÀÀÆ÷¶¼¿ªÊ¼Ö§³ÖquerySelectorAll()£¬Õâ¸ö·½·¨Äܹ»Àí½âCSS²éѯÆ÷£¬¶øÇÒÄÜ´øÀ´ÏÔÖøµÄÐÔÄÜÌáÉý¡£
È»¶ø£¬ÎÒÃÇÓ¦¸Ã±ÜÃâʹÓø´ÔÓµÄÑ¡ÔñÆ÷·µ»ØÔªËØ¡£¸ü²»ÓÃ˵ºÜ¶àÓû§Ê¹ÓÃÀϰ汾µÄä¯ÀÀÆ÷£¬Ç¿ÆÈjQueryÈ¥´¦ÀíDOMÊ÷¡£Õâ¸ö·½Ê½·Ç³£Âý¡£
$('li[data-selected="true"] a') // Fancy, but slow $('li.selected a') // Better $('#elem') // Best
Ñ¡ÔñidÊÇ×î¿ìËٵķ½Ê½¡£Èç¹ûÄãÐèҪʹÓÃclassÃû³Æ£¬ ÄÇôÄã×îºÃ´øÉÏtagÃû³Æ£¬ÕâÑù»á¸ü¿ìЩ¡£ÌرðÊÇÔÚÀÏä¯ÀÀÆ÷ºÍÒÆ¶¯É豸ÉÏ¡£
·ÃÎÊDOMÊÇjavascriptÓ¦ÓÃ×îÂýµÄ·½Ê½ £¬Òò´Ë¾¡Á¿ÉÙʹÓá£Ê¹ÓñäÁ¿È¥±£´æÑ¡ÔñÆ÷£¬ÕâÑù»áʹÓÃcacheÀ´±£´æ¡£ÐÔÄܸüºÃ¡£
var buttons = $('#navigation a.button'); // Some prefer prefixing their jQuery variables with $: var $buttons = $('#navigation a.button');
Áí ÍâÒ»¸öÖµµÃ×öµÄÊÇjQuery¸øÁËÄãºÜ¶àµÄ¶îÍâ±ãÀûÑ¡ÔñÆ÷ £¬ÀýÈ磬:visible£¬:hidden£¬:animated»¹ÓÐÆäËü£¬ÕâЩ²»ÊǺϷ¨µÄCSS3Ñ¡ÔñÆ÷¡£½á¹ûÊÇÄãʹÓÃÕâЩÀà¿â¾Í²»ÄÜÓÐЧµØÀûÓà querySelectorAll()·½·¨¡£ÎªÁËÃÖ²¹Õâ¸öÎÊÌ⣬ÄãÐèÒªÏÈÑ¡ÔñÔªËØ£¬ÔÙ¹ýÂË£¬ÈçÏ£º
$('a.button:animated'); // Does not use querySelectorAll() $('a.button').filter(':animated'); // Uses it
3. Êý×鷽ʽʹÓÃjQuery¶ÔÏó
ÔËÐÐÑ¡ÔñÆ÷µÄ½á¹ûÊÇÒ»¸öjQuery¶ÔÏó¡£È»¶ø£¬jQueryÀà¿âÈÃÄã¸Ð¾õÄãÕýÔÚʹÓÃÒ»¸ö¶¨ÒåÁËindexºÍ³¤¶ÈµÄÊý×é¡£
// Selecting all the navigation buttons: var buttons = $('#navigation a.button'); // We can loop though the collection: for(var i=0;i<buttons.length;i++){ console.log(buttons[i]); // A DOM element, not a jQuery object } // We can even slice it: var firstFour = buttons.slice(0,4);
Èç¹ûÐÔÄÜÊÇÄã¹Ø×¢µÄ£¬ÄÇôʹÓüòµ¥for»òÕßwhileÑ»·À´´¦Àí£¬¶ø²»ÊÇ$.each()£¬ÕâÑùÄÜʹÄãµÄ´úÂë¸ü¿ì¡£
¼ì²é³¤¶ÈÒ²ÊÇÒ»¸ö¼ì²éÄãµÄcollectionÊÇ·ñº¬ÓÐÔªËØµÄ·½Ê½¡£
if(buttons){ // This is always true // Do something } if(buttons.length){ // True only if buttons contains elements // Do something }
4. Ñ¡ÔñÆ÷ÊôÐÔ
jQueryÌṩÁËÒ»¸öÊôÐÔ£¬Õâ¸öÊôÐÔÏÔʾÁËÓÃÀ´×öÁ´Ê½µÄÑ¡ÔñÆ÷¡£
$('#container li:first-child').selector // #container li:first-child $('#container li').filter(':first-child').selector // #container li.filter(:first-child)
ËäÈ»ÉÏÃæµÄÀý×ÓÕë¶ÔͬÑùµÄÔªËØ£¬Ñ¡ÔñÆ÷ÔòÍêÈ«²»Ò»Ñù¡£µÚ¶þ¸öʵ¼ÊÉÏÊÇ·Ç·¨µÄ£¬Äã²»¿ÉÒÔʹÓÃËüÀ´´´½¨Ò»¸ö¶ÔÏó¡£Ö»ÄÜÓÃÀ´ÏÔʾfilter·½·¨ÊÇÓÃÀ´ËõСcollection¡£
5. ´´½¨Ò»¸ö¿ÕµÄjQuery¶ÔÏó
´´½¨Ò»¸öеÄjQuery¿Õ¼äÄܼ«´óµÄ¼õС¿ªÏú¡£ÓÐʱºò£¬Äã¿ÉÄÜÐèÒª´´½¨Ò»¸ö¿ÕµÄ¶ÔÏó£¬È»ºóʹÓÃadd()·½·¨Ìí¼Ó¶ÔÏó¡£
var container = $([]); container.add(another_element);
ÕâÒ²ÊÇquickEach·½·¨µÄ»ù´¡£¬Äã¿ÉÒÔʹÓÃÕâÖÖ¸ü¿ìµÄ·½Ê½¶ø·Çeach()¡£
6. Ñ¡ÔñÒ»¸öËæ»úÔªËØ
ÉÏÃæÎÒÌáµ½¹ý£¬jQueryÌí¼ÓËü×Ô¼ºµÄÑ¡ÔñÆ÷¹ýÂË¡£³ýÁËÀà¿â£¬Äã¿ÉÒÔÌí¼Ó×Ô¼ºµÄ¹ýÂËÆ÷¡£Ö»ÐèÒªÌí¼ÓÒ»¸öÐµķ½·¨µ½$.expr[':']¶ÔÏó¡£Ò»¸ö·Ç³£°ôµÄʹÓ÷½Ê½ÊÇWaldek MastykarzµÄ²©¿ÍÖÐÌáµ½µÄ£º´´½¨Ò»¸öÓÃÀ´·µ»ØËæ»úÔªËØµÄÑ¡ÔñÆ÷¡£Äã¿ÉÒÔÐÞ¸ÄÏÂÃæ´úÂ룺
(function($){ var random = 0; $.expr[':'].random = function(a, i, m, r) { if (i == 0) { random = Math.floor(Math.random() * r.length); } return i == random; }; })(jQuery); // This is how you use it: $('li:random').addClass('glow');
7. ʹÓÃCSS Hooks
CSS hooks APIÊÇÌṩ¿ª·¢ÈËÔ±µÃµ½ºÍÉèÖÃÌØ¶¨µÄCSSÊýÖµµÄ·½·¨¡£Ê¹ÓÃËü£¬Äã¿ÉÒÔÒþ²Øä¯ÀÀÆ÷ÌØ¶¨µÄÖ´Ðв¢ÇÒʹÓÃÒ»¸öͳһµÄ½çÃæÀ´´æÈ¡Ìض¨µÄÊôÐÔ¡£¡¢
$.cssHooks['borderRadius'] = { get: function(elem, computed, extra){ // Depending on the browser, read the value of // -moz-border-radius, -webkit-border-radius or border-radius }, set: function(elem, value){ // Set the appropriate CSS3 property } }; // Use it without worrying which property the browser actually understands: $('#rect').css('borderRadius',5);
¸üºÃµÄÔÚÓÚ£¬ÈËÃÇÒѾ´´½¨ÁËÒ»¸öÖ§³ÖCSS hooksÀà¿â
8. ʹÓÃ×Ô¶¨ÒåµÄɾ³ý·½·¨
Äã¿ÉÄÜÌýµ½¹ýjQueryµÄɾ³ý²å¼þ£¬ËüÄܹ»ÔÊÐíÄã¸øÄãµÄ¶¯»Ìí¼ÓÌØÐ§¡£Î¨Ò»µÄȱµãÊÇÄãµÄ·ÃÎÊÕßÐèÒª¼ÓÔØÁíÍâÒ»¸öjavascriptÎļþ¡£ÐÒÔ˵ÄÊÇ£¬Äã¿ÉÒÔ¼òµ¥µÄ´Ó²å¼þ¿½±´Ð§¹û£¬²¢ÇÒÌí¼Óµ½jQuery.easing¶ÔÏóÖУ¬ÈçÏ£º
$.easing.easeInOutQuad = function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }; // To use it: $('#elem').animate({width:200},'slow','easeInOutQuad');
9. $.proxy()
ʹÓÃcallback·½·¨µÄȱµãÖ®Ò»Êǵ±Ö´ÐÐÀà¿âÖеķ½·¨ºó£¬context±»ÉèÖõ½ÁíÍâÒ»¸öÔªËØ£¬ÀýÈ磺
<div id="panel" style="display:none"> <button>Close</button> </div>
Ö´ÐÐÏÂÃæ´úÂ룺
$('#panel').fadeIn(function(){ // this points to #panel $('#panel button').click(function(){ // this points to the button $(this).fadeOut(); }); });
Ä㽫Óöµ½ÎÊÌ⣬button»áÏûʧ£¬²»ÊÇpanel¡£Ê¹ÓÃ$.proxy·½·¨£¬Äã¿ÉÒÔÕâÑùÊéд´úÂ룺
$('#panel').fadeIn(function(){ // Using $.proxy to bind this: $('#panel button').click($.proxy(function(){ // this points to #panel $(this).fadeOut(); },this)); });
ÕâÑù²ÅÕýÈ·µÄÖ´ÐС£$.proxy·½·¨½ÓÊÜÁ½¸ö²ÎÊý£¬Äã×î³õµÄ·½·¨£¬»¹ÓÐcontext¡£ÕâÀïÔĶÁ¸ü¶à$.proxy in the docs.¡£
10. ÅжÏÒ³ÃæÊÇ·ñÌ«¹ý¸´ÔÓ
Ò»¸ö·Ç³£¼òµ¥µÄµÀÀí£¬Ô¼¸´ÔÓµÄÒ³Ãæ£¬¼ÓÔØµÄËÙ¶ÈÔ½Âý¡£Äã¿ÉÒÔʹÓÃÏÂÃæ´úÂë¼ì²éÒ»ÏÂÄãµÄÒ³ÃæÄÚÈÝ£º
console.log( $('*').length );
ÒÔÉÏ´úÂë·µ»ØµÄÊýֵԽС£¬ÍøÒ³¼ÓÔØËÙ¶ÈÔ½¿ì¡£Äã¿ÉÒÔ¿¼ÂÇͨ¹ýɾ³ýÎÞÓöàÓàµÄÔªËØÀ´ÓÅ»¯ÄãµÄ´úÂë
11. ½«ÄãµÄ´úÂëת»¯³ÉjQuery²å¼þ
Èç¹ûÄãÒª»¨Ò»¶¨µÃʱ¼äÈ¥¿ª·¢Ò»¶ÎjQuery´úÂ룬ÄÇôÄã¿ÉÒÔ¿¼Âǽ«´úÂë±ä³É²å¼þ¡£Õ⽫Äܹ»°ïÖúÄãÖØÓôúÂ룬²¢ÇÒÄܹ»ÓÐЧµÄ°ïÖúÄã×éÖ¯´úÂë¡£´´½¨Ò»¸ö²å¼þ´úÂëÈçÏ£º
(function($){ $.fn.yourPluginName = function(){ // Your code goes here return this; }; })(jQuery);
Äã¿ÉÒÔÔÚÕâÀïÔĶÁ¸ü¶à¿ª·¢½Ì³Ì¡£
12. ÉèÖÃÈ«¾ÖAJAXΪȱʡ
Èç¹ûÄ㿪·¢ajax³ÌÐòµÄ»°£¬Äã¿Ï¶¨ÐèÒªÓС±¼ÓÔØÖС°Ö®ÀàµÄÏÔʾ¸æÖªÓû§£¬ajaxÕýÔÚ½øÐУ¬ÎÒÃÇ¿ÉÒÔʹÓÃÈçÏ´úÂëͳһ¹ÜÀí£¬ÈçÏ£º
// ajaxSetup is useful for setting general defaults: $.ajaxSetup({ url : '/ajax/', dataType : 'json' }); $.ajaxStart(function(){ showIndicator(); disableButtons(); }); $.ajaxComplete(function(){ hideIndicator(); enableButtons(); }); /* // Additional methods you can use: $.ajaxStop(); $.ajaxError(); $.ajaxSuccess(); $.ajaxSend(); */
ÏêϸÄã¿ÉÒԲ鿴ÕâÆªÎÄÕÂ:
13. ÔÚ¶¯»ÖÐʹÓÃdelay()·½·¨
Á´Ê½µÄ¶¯»Ð§¹ûÊÇjQueryµÄÇ¿´óÖ®´¦¡£µ«ÊÇÓÐÒ»¸öºöÂÔÁ˵Äϸ½Ú¾ÍÊÇÄã¿ÉÒÔÔÚ¶¯»Ö®¼ä¼ÓÉÏdelays£¬ÈçÏ£º
// This is wrong: $('#elem').animate({width:200},function(){ setTimeout(function(){ $('#elem').animate({marginTop:100}); },2000); }); // Do it like this: $('#elem').animate({width:200}).delay(2000).animate({marginTop:100});
jQuery¶¯»°ïÁËÎÒÃÇ´óæ£¬·ñÔòÎÒÃǵÃ×Ô¼º´¦ÀíÒ»¶ÑµÄϸ½Ú£¬ÉèÖÃtimtout£¬´¦ÀíÊôÐÔÖµ£¬¸ú×Ù¶¯»±ä»¯µÈµÈ¡£
´ó¼Ò¿ÉÒԲο¼Õâ¸öÎÄÕ£ºjQuery animations
14. ºÏÀíÀûÓÃHTML5µÄDataÊôÐÔ
HTML5µÄdataÊôÐÔ¿ÉÒÔ°ïÖúÎÒÃDzåÈëÊý¾Ý¡£ÌرðºÏÊÊǰºó¶ËµÄÊý¾Ý½»»»¡£jQuery½üÀ´·¢²¼µÄdata()·½·¨£¬¿ÉÒÔÓÐЧµÄÀûÓÃHTML5µÄÊôÐÔ£¬À´×Ô¶¯µÃµ½Êý¾Ý¡£ÏÂÃæÊǸöÀý×Ó£º
<div id="d1" data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'> </div>
ΪÁË´æÈ¡Êý¾ÝÄãÐèÒªµ÷ÓÃÈçÏ´úÂ룺
$("#d1").data("role"); // "page" $("#d1").data("lastValue"); // 43 $("#d1").data("hidden"); // true; $("#d1").data("options").name; // "John";
Èç¹ûÄãÏë¿´¿´Êµ¼ÊµÄÀý×Ó£¬Çë²Î¿¼ÕâÆª½Ì³Ì£ºÊ¹ÓÃHTML5ºÍjQuery²å¼þQuicksandʵÏÖÒ»¸ö³¬¿áµÄÐǼÊÕù°Ô2±øÖÖ·ÖÀàչʾЧ¹û
data()µÄjQueryÎĵµ£ºdata() in the jQuery docs
15. ±¾µØ´æ´¢ºÍjQuery
±¾µØ´æ´¢ÊÇÒ»¸ö³¬¼¶¼òµ¥µÄAPI¡£¼òµ¥µÄÌí¼ÓÄãµÄÊý¾Ýµ½localStorageÈ«¾ÖÊôÐÔÖÐ:
localStorage.someData = "This is going to be saved across page refreshes and browser restarts";
µ«ÊǶÔÓÚÀϵÄä¯ÀÀÆ÷À´Ëµ£¬Õâ¸ö²»ÊǸöºÃÏûÏ¢¡£ÒòΪËûÃDz»Ö§³Ö¡£µ«ÊÇÎÒÃÇ¿ÉÒÔʹÓÃjQueryµÄ²å¼þÀ´Ìṩ֧³ÖÒ»µ©±¾µØ´æ´¢²»ÄÜÓõϰ¡£ÕâÖÖ·½Ê½¿ÉÒÔʹµÃ±¾µØ´æ´¢¹¦ÄÜÕý³£¹¤×÷¡£
ÍÆ¼öÐÅÏ¢
- jqueryʵÏÖÍøÕ¾Í¼Æ¬ÀÁ¼ÓÔØ´úÂë
- jQuery Tooltips²å¼þ
- jQueryµÄ.bind()¡¢.live()ºÍ.delegate(....
- [Ô´´]·ÂGoogle Reader¡¢ÐÂÀË΢²©¡¢ÌÚѶ΢²©µ....
- Ä㲻ϲ»¶»ðºü£¬µ«ÓÖϲ»¶firebug£¬ÄǾ͸úÎÒÒ»ÆðÀ´ÔÚIEÉÏ....
- ¸ù¾ÝÏÔʾÆ÷·Ö±æÂʵ÷ÕûÒ³ÃæÏÔʾµÄJavascript½Å±¾
- jQuery дµÄ·ÂÐÂÀË΢²© ÏòϹö¶¯Ð§¹û¡¾×ªÔØ¡¿
- ͨÓõÄJqueryÑ¡ÔñÆ÷
- jQuery ½áºÏ Json Ìá½»Êý¾Ýµ½Webservice£¬....
- ×ÔÖÆjQueryÖÇÄÜÌáʾ²å¼þһö
ÈÈÃÅÐÅÏ¢
- nohup: redirecting stderr to stdou....
- ʹÓÃlog_formatΪNginx·þÎñÆ÷ÉèÖøüÏêϸµÄÈÕÖ¾¸ñʽ
- jquery easyUI--dataGrid-Json
- [Ô´´]·ÂGoogle Reader¡¢ÐÂÀË΢²©¡¢ÌÚѶ΢²©µ....
- ÀûÓÃKeepalived+mysql¹¹½¨¸ß¿ÉÓÃMySQLË«Ö÷×Ô¶....
- Nginx+keepalivedʵÏÖ¸ºÔؾùºâºÍË«»úÈȱ¸¸ß¿ÉÓÃ
- jqueryʵÏÖÒ³Ãæ¼ÓÔØ½ø¶ÈÌõ
- Rolling cURL: PHP²¢·¢×î¼Ñʵ¼ù
- codeigniter ·ÓÉÖÕ¼«ÓÅ»¯(url rewrite)
- linuxÏÂÉèÖÃsshÎÞÃÜÂëµÇ¼
×î½ü¸üÐÂ
- js»ñÈ¡srcÖд«µÝµÄ²ÎÊý
- jqueryʵÏÖÍøÕ¾Í¼Æ¬ÀÁ¼ÓÔØ´úÂë
- ÈÃä¯ÀÀÆ÷ÆÁ±ÎµôJavaScriptµÄ³ö´íÌáʾ
- github²»ÄܼÓÔØcss¡¢js½â¾ö°ì·¨
- ÎÒÖªµÀµÄJavaScript -- Éè¼ÆÄ£Ê½(ÇŽÓ)Ó¦ÓÃÖ® ¨C ....
- 15¸öÖµµÃ¿ª·¢ÈËÔ±¹Ø×¢µÄjQuery¿ª·¢¼¼ÇɺÍÐĵÃ
- dz̸JavascriptÃæÏò¶ÔÏó±à³Ì
- JS¼òµ¥¶¯»·â×°
- JavaScript³õѧÕßӦעÒâµÄÆß¸öϸ½Ú
- jQuery Tooltips²å¼þ
ÆÀÂÛ