9 個超實用的 jQuery 代碼片斷

1.  jQuery平滑回到頂端效果 

Javascript代碼

$(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處理圖片尺寸 

Javascript代碼

$(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實現的滾動自動加載代碼 

Javascript代碼

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測試密碼強度 

Javascript代碼

$('#pass').keyup(function(e) {  
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*[        DISCUZ_CODE_372        ]quot;, "g");  
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*[        DISCUZ_CODE_372        ]quot;, "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 

Javascript代碼

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能夠被點擊 

Javascript代碼

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

9.  jQuery實現的Facebook風格的圖片預加載效果 

Javascript代碼

var nextimage = "http://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);  
});