10+个方便，可重复使用的jQuery代码片段
多年来，jQuery已经成为每个Web开发人员必须使用的一个JS库。它使用简单，速度快，功能非常强大。在这篇文章中分享给大家一系列的10+个得心应手的jQuery代码片段。
平滑滚动到页面顶部
$("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); 来源: http://stackoverflow.com/questions/1144805/how-do-i-scroll…
克隆表头至表的底部
将表头复制一份到表的底部，可以让你的表格更具可读性。
var $tfoot = $('<tfoot></tfoot>'); $($('thead').clone(true, true).children().get().reverse()).each(function(){ $tfoot.append($(this)); }); $tfoot.insertAfter('table thead'); 来源: http://lunart.com.ua/jquery
加载外部内容
你是否需要加载一些外部内容到一个div中？利用jQuery就很容易做到，如下面的例子：
$("#content").load("somefile.html", function(response, status, xhr) { // error handling if(status == "error") { $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText); } }); 来源: http://api.jquery.com/load/
等高列
当你使用的列个来显示您网站内容，如果列有同等的高度，它肯定更好看。下面的代码将对所有div元素增加.col类。并会根据最大的元素调整自己的高度。超好用！
var maxheight = 0; $("div.col").each(function(){ if($(this).height() > maxheight) { maxheight = $(this).height(); } }); $("div.col").height(maxheight); 来源: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
Table Stripes (Zebra)
当在表上显示的数据，每一行交替颜色肯定会增加可读性。这里有一个片段，帮你自动实现这种效果。
$(document).ready(function(){ $("table tr:even").addClass('stripe'); }); 来源: http://www.alovefordesign.com/5-jquery-must-have-code-snippets/
部分页面刷新
如果你只需要刷新页面的某一部分，下面的3行代码就能够实现。在这个例子中，一个#refresh div会每10秒自动刷新。
setInterval(function() { $("#refresh").load(location.href+" #refresh>*",""); }, 10000); // milliseconds to wait 来源: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
预先载入图像
利用jQuery能够很方便实现在后台，预先加载图片。以下8行代码就能够实现。.
$.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { $("<img />").attr("src", arguments[i]); } } $(document).ready(function() { $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); }); 来源: http://css-tricks.com/snippets/jquery/image-preloader/
在新标签/窗口中打开外部链接
$('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } }); 来源: http://css-tricks.com/snippets/jquery/open-external-links-in-new-window/
利用jQuery实现Div占满一个viewport的宽/高
这一段代码允许您根据viewport大小创建一个全宽/全高的div。该代码也可以调整窗口大小。实现强大模态对话框或弹出窗口。
// global vars var winWidth = $(window).width(); var winHeight = $(window).height(); // set initial div height / width $('div').css({ 'width': winWidth, 'height': winHeight, }); // make sure div stays full width/height on resize $(window).resize(function(){ $('div').css({ 'width': winWidth, 'height': winHeight, }); }); 来源: http://www.jqueryrain.com/2013/03/div-full-widthheight-of-viewport-with-jquery/
测试密码强度
当你让用户定义自己的密码，它通常是一件好事，表明有多强密码。这正是这段代码做。
首先，假设此HTML：
<input type="password" name="pass" id="pass" /> <span id="passstrength"></span>
这里是相应的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; }); 来源: http://css-tricks.com/snippets/jquery/password-strength/
使用jQuery调整图像大小
$(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 }); 来源: http://snipplr.com/view/62552/mage-resize/
页面滚动时自动加载内容
一些网站如推ter在页面滚动时会加载内容。这意味着，所有内容都在一个页面上，只要你向下滚动就会动态加载。
下面这段代码可以实现这样的效果。
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); }); 来源: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery
检查一个图像是否已经加载
这里有一个片段，用来判断、一个图像是否已经加载。
var imgsrc = 'img/image1.png'; $('<img/>').load(function () { alert('image loaded'); }).error(function () { alert('error loading image'); }).attr('src', imgsrc); 来源: http://tympanus.net/codrops/2010/01/05/some-useful…
按字母顺序对列表进行排序
$(function() { $.fn.sortList = function() { var mylist = $(this); var listitems = $('li', mylist).get(); listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); }); 来源: http://stackoverflow.com/questions/13394796/javascript-jquery-to-sort…