分享10个超实用的jQuery代码片段

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

jQuery平滑回到顶端效果

$(document).ready(function() {

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

});

运行代码：

GBdebug在线调试地址：http://www.gbin1.com/gb/debug/20864b59-a995-4318-a242-b3038f83f2c3.htm

jQuery处理图片尺寸

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

});

运行代码：

GBdebug在线调试地址：http://www.gbin1.com/gb/debug/5a2271a5-f363-4b34-8d2f-f0ad03121ced.htm

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

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

jQuery测试密码强度

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

运行代码：

GBdebug在线调试地址：http://www.gbin1.com/gb/debug/5ae6bca8-b12b-48b8-861a-8d9ab09e6641.htm

jQuery实现的DIv高度保持一致

var maxHeight = 0;

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

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

运行代码：

GBdebug在线调试地址：http://www.gbin1.com/gb/debug/ac7c5175-9282-41c0-a766-c56707946c7b.htm

简单处理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添加到需要处理的对象即可。

jQuery处理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++){
            //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();                   
});

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

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

运行代码：

GBdebug在线调试地址：http://www.gbin1.com/gb/debug/4bfb3dce-1681-470c-b47a-7490df12f3b0.htm

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

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

运行代码：

GBdebug在线调试地址：http://www.gbin1.com/gb/debug/b1a87e30-e33f-4369-92fc-55e8fd628816.htm

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

via 极客社区

来源：分享10个超实用的jQuery代码片段