jQuery¼¼Êõ

Ç°¶Ë¿ª·¢±ØÖªµÄ15¸öjQueryС¼¼ÇÉ

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2017-01-27 17:02 ÎÒÒªÆÀÂÛ( )

±¾ÎÄÖ÷Òª½éÉÜÁËÇ°¶Ë¿ª·¢±ØÖªµÄ15¸öjQueryС¼¼ÇÉ¡£¾ßÓкܺõIJο¼¼ÛÖµ£¬ÏÂÃæ¸ú×ÅС±àÒ»ÆðÀ´¿´Ï°É

ÏÂÃæÕâЩ¼òµ¥µÄС¼¼ÇÉÄܹ»°ïÖúÄãÍæת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¾ÎĵÄÈ«²¿ÄÚÈÝ£¬Ï£Íû±¾ÎĵÄÄÚÈݶԴó¼ÒµÄѧϰ»òÕß¹¤×÷ÄÜ´øÀ´Ò»¶¨µÄ°ïÖú£¬Í¬Ê±Ò²Ï£Íû¶à¶àÖ§³Ö½Å±¾Ö®¼Ò£¡

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • ×Ô¼ºµÄjQuery¼¼ÇÉ×ܽá

    ×Ô¼ºµÄjQuery¼¼ÇÉ×ܽá

    2017-01-29 18:02

  •  15¸öÏ൱²»´íµÄjQuery¼¼ÇÉ

    15¸öÏ൱²»´íµÄjQuery¼¼ÇÉ

    2017-01-27 15:07

  • jQueryÖеÄһЩС¼¼ÇÉ£¬jQueryС¼¼ÇÉ

    jQueryÖеÄһЩС¼¼ÇÉ£¬jQueryС¼¼ÇÉ

    2017-01-25 16:00

  • Jquery¼¼ÇÉ(±ØÐëÕÆÎÕ)

    Jquery¼¼ÇÉ(±ØÐëÕÆÎÕ)

    2017-01-25 15:05

ÍøÓѵãÆÀ
´