jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库，在这里我们分享一组实用的jQuery代码片段，希望大家喜欢！ 

1.  jQuery平滑回到顶端效果 

 $(document).ready(function() {  
   
     $("a.topLink").click(function() {  
         $("html, body").animate({  
             scrollTop: $($(this).attr("href")).offset().top + "px"  
         }, {  
             duration: 500,  
             easing: "swing"  
         });  
         return false;  
     });  
   
 });

2.  jQuery处理图片尺寸 

 $(window).bind("load", function() {  
     // 图片修改大小  
     $('#imglist img').each(function() {  
         var maxWidth = 120;  
         var maxHeight = 120;  
         var ratio = 0;  
         var width = $(this).width();  
         var height = $(this).height();  
       
         if(width > maxWidth){  
             ratio = maxWidth / width;  
             $(this).css("width", maxWidth);  
             $(this).css("height", height * ratio);  
             height = height * ratio;  
         }  
         
         if(height > maxHeight){  
             ratio = maxHeight / height;  
            $(this).css("height", maxHeight);  
             $(this).css("width", width * ratio);  
             width = width * ratio;  
         }  
     });  
   
 });

3.  jQuery实现的滚动自动加载代码 

 var loading = false;  
 $(window).scroll(function(){  
     if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){  
         if(loading == false){  
             loading = true;  
             $('#loadingbar').css("display","block");  
             $.get("load.php?start="+$('#loaded_max').val(), function(loaded){  
                 $('body').append(loaded);  
                 $('#loaded_max').val(parseInt($('#loaded_max').val())+50);  
                 $('#loadingbar').css("display","none");  
                 loading = false;  
             });  
         }  
     }  
 });  
   
 $(document).ready(function() {  
     $('#loaded_max').val(50);  
 });

4.  jQuery测试密码强度 

 $('#pass').keyup(function(e) {  
      var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");  
      var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");  
      var enoughRegex = new RegExp("(?=.{6,}).*", "g");  
      if (false == enoughRegex.test($(this).val())) {  
              $('#passstrength').html('More Characters');  
      } else if (strongRegex.test($(this).val())) {  
              $('#passstrength').className = 'ok';  
              $('#passstrength').html('Strong!');  
      } else if (mediumRegex.test($(this).val())) {  
              $('#passstrength').className = 'alert';  
              $('#passstrength').html('Medium!');  
      } else {  
              $('#passstrength').className = 'error';  
              $('#passstrength').html('Weak!');  
      }  
      return true;  
 });

5.  jQuery实现的DIv高度保持一致 

 var maxHeight = 0;  
   
 $("div").each(function(){  
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }  
 });  
   
 $("div").height(maxHeight);

6.  简单处理IE6上PNG格式文件 

 $('.pngfix').each( function() {  
    $(this).attr('writing-mode', 'tb-rl');  
    $(this).css('background-image', 'none');  
    $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');  
 });

将class=pngfix添加到需要处理的对象即可。 

7.  jQuery处理JSON 

 function parseJson(){  
     //Start by calling the json object, I will be using a   
         //file from my own site for the tutorial   
     //Then we declare a callback function to process the data  
     $.getJSON('hcj.json',getPosts);  
    
     //The process function, I am going to get the title,   
         //url and excerpt for 5 latest posts  
     function getPosts(data){  
    
         //Start a for loop with a limit of 5   
         for(var i = 0; i < 5; i++){  
             //Build a template string of   
                         //the post title, url and excerpt  
             var strPost = '<h2>'   
                       + data.posts[i].title  
                       + '</h2>'  
                       + '<p>'  
                       + data.posts[i].excerpt  
                       + '</p>'  
                       + '<a href="'  
                       + data.posts[i].url  
                       + '" title="Read '  
                       + data.posts[i].title  
                       + '">Read ></a>';  
    
             //Append the body with the string  
             $('body').append(strPost);  
    
         }  
     }  
    
 }  
    
 //Fire off the function in your document ready  
 $(document).ready(function(){  
     parseJson();                     
 });

8.  jQuery实现让整个div可以被点击 

 $(".myBox").click(function(){      window.location=$(this).find("a").attr("href");       return false; });

9.  jQuery实现的Facebook风格的图片预加载效果 

 var nextimage = "//www.gbtags.com/gb/networks/uploadimgthumb/55d67b14-fb25-45e7-acc8-211a41047ef0.jpg";  
 $(document).ready(function(){  
   window.setTimeout(function(){  
     var img = $("<img>").attr("src", nextimage).load(function(){  
     $('div').append(img);  
     });  
   }, 100);  
 });