经验分享：10个简单实用的代码片段

最新推荐文章于 2022-01-06 14:15:18 发布

21世纪大懒虫

最新推荐文章于 2022-01-06 14:15:18 发布

阅读量110

点赞数

分类专栏： web_javascript 文章标签： jQuery 前端开发实用代码

web_javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

尽管各种 JavaScirpt 框架和库层出不穷，jQuery 仍然是 Web 前端开发中最常用的工具库。今天，向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段。

您可能感兴趣的相关文章

平滑滚动到锚点

　　这个功能很常见，在网站底部添加一个让访客快速回到页面顶部的功能，下面是实现这个功能的示例代码：

 
   // HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
 
$(document).ready(function() {
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
});
 
 
  

缩放图片

　　虽然图片应该在服务器端缩放，不过如果服务器端未做缩放，需要再客户端缩放的时候，可以使用下面这个方便的代码片段：

 
       
 $(window).bind("load", function() {
     // IMAGE RESIZE
     $('#product_cat_list 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;
         }
         var width = $(this).width();
         var height = $(this).height();
         if(height > maxHeight){
             ratio = maxHeight / height;
             $(this).css("height", maxHeight);
             $(this).css("width", width * ratio);
             width = width * ratio;
         }
     });
     //$("#contentpage img").show();
     // IMAGE RESIZE
 });
 
  

滚动时自动加载内容

　　很多网站使用了流行的瀑布图布局，这种类型的网站在页面滚动的时候会自动加载内容。下面这段代码让你能够把这个功能搬到你的网站上。

 
         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); 
        
         });

检测密码强度

　　在表单功能中，经常会有检测用户输入的密码强度的功能，下面这个代码片段使用正则表达式来检测密码是否足够安全，当然记得在服务端也进行表单验证。

 
    
         $( 
         '#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 
         ; 
        
 
         }); 
        
 
  

均衡元素的高度

　　使用纯 CSS代码实现均衡元素的高度比较困难，而下面这段 jQuery 代码会根据最高的元素来均衡所有的 Div 元素。

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

修复 IE6 PNG 问题

　　至今，IE6 在国内仍然占据了大量的份额，因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。比较常用的 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")' 
         ); 
        
 
         }); 
        
 
  

解析 JSON 字符串

　　使用 jQuery 解析 JSON 数据并不复杂。下面是一个高效解析 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++){ 
        
         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();                   
        
         });

隔行换色

　　这是一个很老的功能了，在大的列表或表格中，隔行颜色可以大大提高内容的可读性。下面的代码可以非常简单实现这个功能。

 
    
         $( 
         'div:odd' 
         ).css( 
         "background-color" 
         , 
         "#F4F4F8" 
         ); 
        
 
         $( 
         'div:even' 
         ).css( 
         "background-color" 
         , 
         "#EFF1F1" 
         ); 
        
 
  

预加载图片

　　你是否注意到 facebook 相册的图片加载速度特别快？那是因为在你看到这些图片之前已经预加载到你的浏览器缓存中了。下面是实现这个类似功能的代码示例：

 
         var 
         nextimage =  
         "/images/some-image.jpg" 
         ; 
        
         $(document).ready( 
         function 
         (){ 
        
         window.setTimeout( 
         function 
         (){ 
        
         var 
         img = $( 
         "<img>" 
         ).attr( 
         "src" 
         , nextimage).load( 
         function 
         (){ 
        
         //all done 
        
         }); 
        
         }, 100); 
        
         });

让整个 Div 可点击

　　这是实现链接的父 Div 也能够点击的简单方法，HTML 示例代码如下：

 
         <div  
         class 
         = 
         "myBox" 
         > 
        
         blah blah blah. 
        
         <a href= 
         "http://google.com" 
         >link</a> 
        
         </div>

　　下面的 jQuery 代码让整个 Div 可点击：

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

您可能感兴趣的相关文章

21世纪大懒虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经验分享：10个简单实用的代码片段

尽管各种 JavaScirpt 框架和库层出不穷，jQuery 仍然是 Web 前端开发中最常用的工具库。今天，向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段。您可能感兴趣的相关文章精心挑选12款优秀 jQuery Ajax 分页插件分享60款绚丽的 jQuery 幻灯片插件下载分享8款效果精美的 jQuery 加载进度条插件期待已久的2012年度最佳
复制链接

扫一扫