ÏÂÃæÕâЩ¼òµ¥µÄС¼¼ÇÉÄܹ»°ïÖúÄãÍæתjQuery¡£
1¡¢·µ»Ø¶¥²¿°´Å¥
ͨ¹ýʹÓÃjQueryÖеÄanimate ºÍscrollTop ·½·¨£¬²»Óòå¼þ¾Í¿ÉÒÔ´´½¨Ò»¸ö¹ö¶¯µ½¶¥²¿µÄ¼òµ¥¶¯»£º
// Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a href="#">Back to top</a>
¸Ä±äscrollTop µÄÖµ¿ÉÒÔ¸ü¸ÄÄãÏëÒª·ÅÖùö¶¯ÌõµÄλÖá£ËùÓÐÄãÕæÕýÐèÒª×öµÄÊÇÔÚ800ºÁÃëµÄʱ¼äÄÚÉèÖÃÎĵµÖ÷ÌåµÄ¶¯»£¬Ö±µ½Ëü¹ö¶¯µ½ÎĵµµÄ¶¥²¿¡£
×¢£ºÐ¡ÐÄscrollTopµÄһЩ´íÎóÐÐΪ¡£
2¡¢Ô¤¼ÓÔØͼÏñ
Èç¹ûÄãµÄÍøҳҪʹÓôóÁ¿¿ªÊ¼²»¿É¼ûµÄ£¨ÀýÈ磬ÐüÍ£µÄ£©Í¼Ïñ£¬ÄÇô¿ÉÒÔÔ¤¼ÓÔØÕâЩͼÏñ£º
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png');
3¡¢¼ì²éͼÏñÊÇ·ñ¼ÓÔØ
ÓÐʱΪÁ˼ÌÐø½Å±¾£¬Äã¿ÉÄÜÐèÒª¼ì²éͼÏñÊÇ·ñÈ«²¿¼ÓÔØÍê±Ï£º
$('img').load(function () { console.log('image load successful'); });
ÄãÒ²¿ÉÒÔÓÃID»òÀàÌæ»»<img>±êÇ©À´¼ì²éij¸öÌض¨µÄͼÏñÊÇ·ñ±»¼ÓÔØ¡£
4¡¢×Ô¶¯ÐÞ¸´ÆÆ»µµÄͼÏñ
Öð¸öÌæ»»ÒѾÆÆ»µµÄͼÏñÁ´½ÓÊǷdz£Í´¿àµÄ¡£²»¹ý£¬ÏÂÃæÕâ¶Î¼òµ¥µÄ´úÂë¿ÉÒÔ°ïÖúÄ㣺
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } });
¼´Ê¹Ã»ÓÐÈκζϵôµÄÁ´½Ó£¬¼ÓÉÏÕâÒ»¶Î´úÂëÒ²²»»áÈÃÄãÓÐÈκÎËðʧ¡£
5¡¢ÐüÍ£Çл»Àà
¼ÙÉèÄãÏ£Íûµ±Óû§½«Êó±êÐüÍ£Ôڿɵã»÷µÄÔªËØÉÏʱ£¬Ëü»á¸Ä±äÑÕÉ«¡£ÄÇôÄã¿ÉÒÔÔÚÓû§ÐüÍ£µÄʱºòÌí¼ÓÀൽԪËØÖУ¬·´Ö®Ôòɾ³ýÀࣺ
$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); });
ÄãÖ»ÐèÒªÌí¼Ó±ØÒªµÄCSS¼´¿É¡£¸ü¼òµ¥µÄ·½·¨ÊÇʹÓÃtoggleClass ·½·¨£º
$('.btn').hover(function () { $(this).toggleClass('hover'); });
×¢£º¿ÉÄÜÔÚÕâÖÖÇé¿öÏ£¬CSSÕâÖÖ½â¾ö·½°¸¸ü¿ì£¬²»¹ýÁ˽âÕâ¸ö·½·¨ºÜÓбØÒª¡£
6¡¢½ûÓÃÊäÈë×Ö¶Î
ÓÐʱºò£¬Äã¿ÉÄÜÏëÒª½ûÓñí¸ñµÄÌá½»°´Å¥»òËüµÄijһÏîÎÄ×ÖÊäÈëÖ±µ½Óû§Ö´ÐÐÁËÌض¨²Ù×÷£¨ÀýÈ磬¹´Ñ¡¡°ÎÒÒÑÔĶÁÏà¹ØÌõ¿î¡±¸´Ñ¡¿ò£©¡£Ìí¼Ó disabledÊôÐÔµ½ÄãµÄÊäÈë¾Í¿ÉÒÔÔÚÄãÏëÒªµÄʱºò²ÅÆôÓÃËü£º
$('input[type="submit"]').prop('disabled', true);
È»ºóÄãÖ»ÐèÒªÔËÐÐÊäÈëµÄprop ·½·¨¾Í¿ÉÒÔÁË£¬²»¹ýdisabled µÄÖµÒªÉèÖÃΪfalse£º
$('input[type="submit"]').prop('disabled', false);
7¡¢Í£Ö¹¼ÓÔØÁ´½Ó
ÓÐʱºò£¬Äã¼È²»ÐèÒªÁ´½Óµ½Ä³¸öÌض¨µÄÍøÒ³£¬Ò²²»ÏëÒªÖØмÓÔØÒ³Ã桪¡ªÄã¿ÉÄÜÏ£ÍûÁ´½Ó×öµã±ðµÄÊÂÇ飬ÀýÈç˵´¥·¢Ò»Ð©ÆäËû½Å±¾¡£Õâ¾ÍÒªÔÚ×èֹĬÈ϶¯×÷ÉÏ×öÎÄÕÂÁË£º
$('a.no-link').click(function (e) { e.preventDefault(); });
8¡¢µÈë/»¬¶¯Çл»
»¬¶¯ºÍµÈ붼ÊÇÎÒÃÇÓÃjQuery×ö¶¯»µÄʱºò´óÁ¿ÔËÓõĶ«Î÷¡£Èç¹ûÄãÖ»ÊÇÏëÔÚÓû§µã»÷Ö®ºóչʾһ¸öÔªËصĻ°£¬ÄÇôÓÃfadeIn ºÍslideDown ·½·¨¾ÍºÜÍêÃÀ¡£µ«ÊÇ£¬Èç¹ûÄãÏëÒªÔªËØÔÚµÚÒ»´Îµã»÷µÄʱºò³öÏÖ£¬È»ºóÔÚµÚ¶þ´Îµã»÷µÄʱºòÏûʧµÄ»°£¬ÄÇô¿ÉÒÔÊÔÊÔÏÂÃæµÄ´úÂ룺
// Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); });
9¡¢¼òµ¥µÄÊÖ·çÇÙ
ÕâÊÇÒ»¸ö¿É¿ìËÙÉú³ÉÊÖ·çÇٵļòµ¥·½·¨£º
// Close all panels $('#accordion').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; });
ͨ¹ýÌí¼ÓÕâ¸ö½Å±¾£¬ÄãÕæÕýÐèÒª×öµÄ½ö½öÊÇÔÚÒ³ÃæÉÏÌí¼Ó±ØÒªµÄHTMLÔªËØ£¬ÕâÑùËü¾Í¿ÉÒÔÔËÐй¤×÷ÁË¡£
10¡¢ÈÃÁ½¸ödiv¸ß¶ÈÏàͬ
ÓÐʱºò£¬ÄãÐèÒªÈÃÁ½¸ödivÎÞÂÛ°üº¬Ê²Ã´ÄÚÈݶ¼ÓµÓÐÏàͬµÄ¸ß¶È£º
$('.div').css('min-height', $('.main-div').height());
ÉèÖà min-height£¬ÕâÒâζ×ÅËü¿ÉÒÔ±ÈÖ÷div´óµ«¾ø¶Ô²»ÄܱÈÖ÷divС¡£²»¹ý£¬»¹ÓÐÒ»ÖÖ¸üÁé»îµÄ·½·¨ÊDZéÀúÒ»×éÔªËØ£¬È»ºó½«¸ß¶ÈÉèÖÃΪ×î¸ßµÄÄǸöÔªËصĸ߶ȣº
var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height);
Èç¹ûÄãÏ£ÍûËùÓÐÁеĸ߶ÈÏàͬ£º
var $rows = $('.same-height-columns'); $rows.each(function () { $(this).find('.column').height($(this).height()); });
11¡¢ÔÚбêÇ©Ò³/´°¿Ú´ò¿ªÍⲿÁ´½Ó
ÔÚÒ»¸öеÄä¯ÀÀÆ÷tab»ò´°¿ÚÖдò¿ªÍⲿÁ´½Ó£¬²¢È·±£Í¬Ò»¸öÀ´Ô´µÄÁ´½ÓÄÜÔÚͬһ¸ötab»òÕß´°¿ÚÖдò¿ª£º
$('a[href^="http"]').attr('target', '_blank'); $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
×¢Ò⣺window.location.origin ÔÚIE10ÖÐÎÞЧ¡£ÐÞ¸´µÄʱºòҪСÐÄÕâ¸öÎÊÌâ¡£
12¡¢Í¨¹ýÎı¾²éÕÒÔªËØ
ͨ¹ýʹÓÃjQueryÖеÄcontains() Ñ¡ÔñÆ÷£¬Äã¿ÉÒÔÕÒµ½ÔªËØÄÚÈݵÄÎı¾¡£Èç¹ûÎı¾²»´æÔÚ£¬ÄǾÍÒþ²Ø¸ÃÔªËØ£º
var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide();
13¡¢ÔڸıäVisibilityʱ´¥·¢
µ±Óû§²»ÔÙ¹Øעij¸ötab£¬»òÖØо۽¹ÔÀ´µÄÄǸötabÉÏʱ£¬´¥·¢JavaScript£º
$(document).on('visibilitychange', function (e) { if (e.target.visibilityState === "visible") { console.log('Tab is now in view!'); } else if (e.target.visibilityState === "hidden") { console.log('Tab is now hidden!'); } });
14¡¢AJAXµ÷ÓôíÎó´¦Àí
µ±Ajaxµ÷Ó÷µ»Ø404»ò500´íÎóʱ£¬¾ÍÖ´ÐдíÎó´¦Àí³ÌÐò¡£Èç¹ûûÓж¨Òå´¦Àí³ÌÐò£¬ÆäËûµÄjQuery´úÂë»ò»á¾Í´Ë°Õ¹¤¡£¶¨ÒåÒ»¸öÈ«¾ÖµÄAjax´íÎó´¦Àí³ÌÐò£º
$(document).ajaxError(function (e, xhr, settings, error) { console.log(error); });
15¡¢Á´Ê½²å¼þµ÷ÓÃ
jQueryÔÊÐí¡°Á´Ê½¡±²å¼þµÄ·½·¨µ÷Óã¬ÒÔ¼õÇá·´¸´²éѯDOM²¢´´½¨¶à¸öjQuery¶ÔÏóµÄ¹ý³Ì¡£±È·½Ëµ£¬ÏÂÃæµÄ´úÂëƬ¶Î´ú±íÁËÄãµÄ²å¼þ·½·¨µ÷Óãº
$('#elem').show(); $('#elem').html('bla'); $('#elem').otherStuff();
ͨ¹ýʹÓÃÁ´Ê½£¬¿ÉÒÔ´ó´ó¸ÄÉÆ£º
$('#elem') .show() .html('bla') .otherStuff();
»¹ÓÐÒ»ÖÖ·½·¨ÊÇÔÚ£¨Ç°×º$£©±äÁ¿ÖиßËÙ»º´æÔªËØ£º
var $elem = $('#elem'); $elem.hide(); $elem.html('bla'); $elem.otherStuff();
Á´Ê½ºÍ¸ßËÙ»º´æµÄ·½·¨¶¼ÊÇjQueryÖпÉÒÔÈôúÂë±äµÃ¸ü¶ÌºÍ¸ü¿ìµÄ´ú×î¼Ñ×ö·¨¡£
ÒÔÉϾÍÊDZ¾ÎĵÄÈ«²¿ÄÚÈÝ£¬Ï£Íû±¾ÎĵÄÄÚÈݶԴó¼ÒµÄѧϰ»òÕß¹¤×÷ÄÜ´øÀ´Ò»¶¨µÄ°ïÖú£¬Í¬Ê±Ò²Ï£Íû¶à¶àÖ§³Ö½Å±¾Ö®¼Ò£¡
¡¡