10个简单实用的 jQuery 代码片段

 

平滑滚动到锚点

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// HTML:
//

Lorem Ipsum

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

缩放图片

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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
});

滚动时自动加载内容

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);
});

检测密码强度

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$( '#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 元素。

?
1
2
3
4
5
6
7
var maxHeight = 0;
 
$( "div" ).each( function (){
    if ($( this ).height() > maxHeight) { maxHeight = $( this ).height(); }
});
 
$( "div" ).height(maxHeight);

修复 IE6 PNG 问题

  至今,IE6 在国内仍然占据了大量的份额,因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。比较常用的 IE6 PNG 图片问题,下面这段代码可以方便的修复。

?
1
2
3
4
5
$( '.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 数据并将其追加到您的网页的例子。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 = '

'

                       + data.posts[i].title
                       + ''
                       + '

'

                       + data.posts[i].excerpt
                       + '

'
                       + '                        + data.posts[i].url
                       + '" title="Read '
                       + data.posts[i].title
             //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 相册的图片加载速度特别快?那是因为在你看到这些图片之前已经预加载到你的浏览器缓存中了。下面是实现这个类似功能的代码示例:

?
1
2
3
4
5
6
7
8
var nextimage = "/images/some-image.jpg" ;
$(document).ready( function (){
     window.setTimeout( function (){
         var img = $( "" ).attr( "src" , nextimage).load( function (){
             //all done
         });
     }, 100);
});

让整个 Div 可点击

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

?
1
2
3
4
class = "myBox" >
      blah blah blah.

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

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

 

你可能感兴趣的