9 个超实用的 jQuery 代码片段

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

1.  jQuery平滑回到顶端效果 

 

1. $(document).ready(function() {  

2.   

3.     $("a.topLink").click(function() {  

4.         $("html, body").animate({  

5.             scrollTop: $($(this).attr("href")).offset().top + "px"  

6.         }, {  

7.             duration: 500,  

8.             easing: "swing"  

9.         });  

10.         return false;  

11.     });  

12.   

13. });  

/*offset()用于获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。*/

 

2.  jQuery处理图片尺寸 

3.

[javascript] view plaincopyprint?

1. $(window).bind("load", function() {  

2.     // 图片修改大小  

3.     $('#imglist img').each(function() {  

4.         var maxWidth = 120;  

5.         var maxHeight = 120;  

6.         var ratio = 0;  

7.         var width = $(this).width();  

8.         var height = $(this).height();  

9.       

10.         if(width > maxWidth){  

11.             ratio = maxWidth / width;  

12.             $(this).css("width", maxWidth);  

13.             $(this).css("height", height * ratio);  

14.             height = height * ratio;  

15.         }  

16.         

17.         if(height > maxHeight){  

18.             ratio = maxHeight / height;  

19.             $(this).css("height", maxHeight);  

20.             $(this).css("width", width * ratio);  

21.             width = width * ratio;  

22.         }  

23.     });  

24.   

25. });  

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

[javascript] view plaincopyprint?

1. var loading = false;  

2. $(window).scroll(function(){  

3.     if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){  

4.         if(loading == false){  

5.             loading = true;  

6.             $('#loadingbar').css("display","block");  

7.             $.get("load.php?start="+$('#loaded_max').val(), function(loaded){  

8.                 $('body').append(loaded);  

9.                 $('#loaded_max').val(parseInt($('#loaded_max').val())+50);  

10.                 $('#loadingbar').css("display","none");  

11.                 loading = false;  

12.             });  

13.         }  

14.     }  

15. });  

16.   

17. $(document).ready(function() {  

18.     $('#loaded_max').val(50);  

19. });  

4.  jQuery测试密码强度 

[javascript] view plaincopyprint?

1. $('#pass').keyup(function(e) {  

2.      var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");  

3.      var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");  

4.      var enoughRegex = new RegExp("(?=.{6,}).*", "g");  

5.      if (false == enoughRegex.test($(this).val())) {  

6.              $('#passstrength').html('More Characters');  

7.      } else if (strongRegex.test($(this).val())) {  

8.              $('#passstrength').className = 'ok';  

9.              $('#passstrength').html('Strong!');  

10.      } else if (mediumRegex.test($(this).val())) {  

11.              $('#passstrength').className = 'alert';  

12.              $('#passstrength').html('Medium!');  

13.      } else {  

14.              $('#passstrength').className = 'error';  

15.              $('#passstrength').html('Weak!');  

16.      }  

17.      return true;  

18. });  

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

[javascript] view plaincopyprint?

1. var maxHeight = 0;  

2.   

3. $("div").each(function(){  

4.    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }  

5. });  

6.   

7. $("div").height(maxHeight);  

 

6.  简单处理IE6上PNG格式文件 （背景：png格式图片在ie6下不支持）

 

[javascript] view plaincopyprint?

1. $('.pngfix').each( function() {  

2.    $(this).attr('writing-mode', 'tb-rl');  

3.    $(this).css('background-image', 'none');  

4.    $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');  

5. });  

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

 

7.  jQuery处理JSON 

[javascript] view plaincopyprint?

1. function parseJson(){  

2.     //Start by calling the json object, I will be using a   

3.         //file from my own site for the tutorial   

4.     //Then we declare a callback function to process the data  

5.     $.getJSON('hcj.json',getPosts);  

6.    

7.     //The process function, I am going to get the title,   

8.         //url and excerpt for 5 latest posts  

9.     function getPosts(data){  

10.    

11.         //Start a for loop with a limit of 5   

12.         for(var i = 0; i < 5; i++){  

13.             //Build a template string of   

14.                         //the post title, url and excerpt  

15.             var strPost = '<h2>'   

16.                       + data.posts[i].title  

17.                       + '</h2>'  

18.                       + '<p>'  

19.                       + data.posts[i].excerpt  

20.                       + '</p>'  

21.                       + '<a href="'  

22.                       + data.posts[i].url  

23.                       + '" title="Read '  

24.                       + data.posts[i].title  

25.                       + '">Read ></a>';  

26.    

27.             //Append the body with the string  

28.             $('body').append(strPost);  

29.    

30.         }  

31.     }  

32.    

33. }  

34.    

35. //Fire off the function in your document ready  

36. $(document).ready(function(){  

37.     parseJson();                     

38. });  

 

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

[javascript] view plaincopyprint?

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

 

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

[javascript] view plaincopyprint?

1. var nextimage = "http://www.gbtags.com/gb/networks/uploadimgthumb/55d67b14-fb25-45e7-acc8-211a41047ef0.jpg";  

2. $(document).ready(function(){  

3.   window.setTimeout(function(){  

4.     var img = $("<img>").attr("src", nextimage).load(function(){  

5.      $('div').append(img);  

6.     });  

7.   }, 100);  

8. });  

9.   

10. 在线调试