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

jjfat 9年前

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

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

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

jQuery实现的DIv高度保持一致

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

简单处理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; });

jQuery实现的非死book风格的图片预加载效果

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

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