jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库，在这里我们分享一组实用的jQuery代码片段，希望大家喜欢！?
1.? jQuery平滑回到顶端效果?
- $(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处理图片尺寸?
- $(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实现的滚动自动加载代码?
- 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测试密码强度?
- $('#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;??
- });??
在线调试?
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?
- 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可以被点击?
- $(".myBox").click(function(){??????window.location=$(this).find("a").attr("href");???????return?false;?});??
在线调试?
9.? 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);??
- });??
- ??
- [url=http://www.gbin1.com/gb/debug/b1a87e30-e33f-4369-92fc-55e8fd628816.htm]在线调试[/url]??
希望大家喜欢这些实用的jQuery代码，如果你也有更多的jQuery代码片段，请与我们分享，谢谢！?