`

9 个超实用的 jQuery 代码片段

    博客分类:
  • js
 
阅读更多

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

1.  jQuery平滑回到顶端效果 

Javascript代码 
  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. });  



在线调试 

2.  jQuery处理图片尺寸 

Javascript代码 
  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代码 
  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代码 
  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代码 
  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格式文件 

Javascript代码 
  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代码 
  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代码 
  1. $(".myBox").click(function(){      window.location=$(this).find("a").attr("href");       return false; });  



在线调试 

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

Javascript代码 
  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. [url=http://www.gbin1.com/gb/debug/b1a87e30-e33f-4369-92fc-55e8fd628816.htm]在线调试[/url]  



希望大家喜欢这些实用的jQuery代码,如果你也有更多的jQuery代码片段,请与我们分享,谢谢! 

分享到:
评论

相关推荐

    60个实用的jQuery代码片段.pdf

    60个实用的jQuery代码片段.pdf

    45个实用的jquery代码片段

    45个jquery代码片段,希望这些代码能够给你的javascript项目提供帮助。。

    超实用的JQUERY代码

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

    一些实用的jQuery代码片段

    1.JQuery得到用户的IP: $.getJSON("http://jsonip.appspot.com?callback=?",function(data){ alert&#40;"Your ip:"+data.ip&#41;; }); 2.JQuery查看图片的宽度和高度 var theImage = new Image(); theImage.src =...

    12个超实用的JQuery代码片段

    主要介绍了12个超实用的JQuery代码片段,代码简洁,具有实用价值,感兴趣的小伙伴们可以参考一下

    10个超棒jQuery表单操作代码片段

    可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望...

    几个实用的 jQuery 表单操作代码片段

    可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,这里收集了一些超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望大家喜欢!

    分享12个实用的jQuery代码片段

    主要介绍了12个实用的jQuery代码片段,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下

    非常实用的12个jquery代码片段

    本文收集了12段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。 1. 导航菜单背景切换效果 在项目的前端页面里,相...

    【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

    本文实例总结了jQuery实用代码片段。分享给大家供大家参考,具体如下: //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { //保存当前文本框的值 var vdefault = this...

    一些实用的jQuery代码片段收集

    下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享。下边就让我们看看这些有代码片段。 1.jQuery得到用户IP: 代码如下: $.getJSON(...

    10个很棒的jQuery代码片段

    本文推荐10个应该收藏的、实现功能很棒的jQuery代码片段,需要的朋友可以参考下

    7个有用的jQuery代码片段分享

    主要介绍了7个有用的jQuery技巧分享,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下

    高效Web开发的10个jQuery代码片段

    主要为大家详细介绍了高效Web开发的10个jQuery代码片段,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下

    分享100个直接可以拿来用的JavaScript实用功能代码片段

    把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率。

    直接拿来用的15个jQuery代码片段

    开发人员利用jQuery代码不仅能给网站带来各种动画、特效,还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段,大家可以直接拿来用。

Global site tag (gtag.js) - Google Analytics