0+个方便，可重复使用的jQuery代码片段

http://www.open-open.com/news/view/1522776

多年来，jQuery已经成为每个Web开发人员必须使用的一个JS库。它使用简单，速度快，功能非常强大。在这篇文章中分享给大家一系列的10+个得心应手的jQuery代码片段。

平滑滚动到页面顶部

1$("a[href='#top']").click(function() {

2  $("html, body").animate({ scrollTop: 0 }, "slow");

3  return false;

4});

来源: http://stackoverflow.com/questions/1144805/how-do-i-scroll…

克隆表头至表的底部

将表头复制一份到表的底部，可以让你的表格更具可读性。

1var $tfoot = $('<tfoot></tfoot>');

2$($('thead').clone(true,true).children().get().reverse()).each(function(){

3    $tfoot.append($(this));

4});

5$tfoot.insertAfter('table thead');

来源: http://lunart.com.ua/jquery

加载外部内容

你是否需要加载一些外部内容到一个div中？利用jQuery就很容易做到，如下面的例子：

1$("#content").load("somefile.html", function(response, status, xhr) {

2  // error handling

3  if(status == "error") {

4    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);

5  }

6});

来源: http://api.jquery.com/load/

等高列

当你使用的列个来显示您网站内容，如果列有同等的高度，它肯定更好看。下面的代码将对所有div元素增加.col类。并会根据最大的元素调整自己的高度。超好用！

1var maxheight = 0;

2$("div.col").each(function(){

3  if($(this).height() > maxheight) { maxheight = $(this).height(); }

4});

5 

6$("div.col").height(maxheight);

来源: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

Table Stripes (Zebra)

当在表上显示的数据，每一行交替颜色肯定会增加可读性。这里有一个片段，帮你自动实现这种效果。

1$(document).ready(function(){                            

2     $("table tr:even").addClass('stripe');

3});

来源: http://www.alovefordesign.com/5-jquery-must-have-code-snippets/

部分页面刷新

如果你只需要刷新页面的某一部分，下面的3行代码就能够实现。在这个例子中，一个#refresh div会每10秒自动刷新。

1setInterval(function() {

2$("#refresh").load(location.href+" #refresh>*","");

3}, 10000); // milliseconds to wait

来源: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

预先载入图像

利用jQuery能够很方便实现在后台，预先加载图片。以下8行代码就能够实现。.

1$.preloadImages = function() {

2       for(var i = 0; i<arguments.length; i++) {

3               $("<img />").attr("src", arguments[i]);

4       }

5}

6 

7$(document).ready(function() {

8       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");

9});

来源: http://css-tricks.com/snippets/jquery/image-preloader/

在新标签/窗口中打开外部链接

01$('a').each(function() {

02   var a = new RegExp('/' + window.location.host + '/');

03   if(!a.test(this.href)) {

04       $(this).click(function(event) {

05           event.preventDefault();

06           event.stopPropagation();

07           window.open(this.href, '_blank');

08       });

09   }

10});

来源: http://css-tricks.com/snippets/jquery/open-external-links-in-new-window/

利用jQuery实现Div占满一个viewport的宽/高

这一段代码允许您根据viewport大小创建一个全宽/全高的div。该代码也可以调整窗口大小。实现强大模态对话框或弹出窗口。

01// global vars

02var winWidth = $(window).width();

03var winHeight = $(window).height();

04 

05// set initial div height / width

06$('div').css({

07    'width': winWidth,

08'height': winHeight,

09});

10 

11// make sure div stays full width/height on resize

12$(window).resize(function(){

13    $('div').css({

14    'width': winWidth,

15    'height': winHeight,

16});

17});

来源: http://www.jqueryrain.com/2013/03/div-full-widthheight-of-viewport-with-jquery/

测试密码强度

当你让用户定义自己的密码，它通常是一件好事，表明有多强密码。这正是这段代码做。

首先，假设此HTML：

1<input type="password" name="pass" id="pass" />

2<span id="passstrength"></span>

这里是相应的jQuery代码。所输入的密码将使用正则表达式进行评估和消息将被返回给用户，让他知道，如果他所选择的密码为强，中，弱，或太短。

01$('#pass').keyup(function(e) {

02     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

03     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

04     var enoughRegex = new RegExp("(?=.{6,}).*", "g");

05     if (false == enoughRegex.test($(this).val())) {

06             $('#passstrength').html('More Characters');

07     } else if (strongRegex.test($(this).val())) {

08             $('#passstrength').className = 'ok';

09             $('#passstrength').html('Strong!');

10     } else if (mediumRegex.test($(this).val())) {

11             $('#passstrength').className = 'alert';

12             $('#passstrength').html('Medium!');

13     } else {

14             $('#passstrength').className = 'error';

15             $('#passstrength').html('Weak!');

16     }

17     return true;

18});

来源: http://css-tricks.com/snippets/jquery/password-strength/

使用jQuery调整图像大小

01$(window).bind("load", function() {

02    // IMAGE RESIZE

03    $('#product_cat_list img').each(function() {

04        var maxWidth = 120;

05        var maxHeight = 120;

06        var ratio = 0;

07        var width = $(this).width();

08        var height = $(this).height();

09     

10        if(width > maxWidth){

11            ratio = maxWidth / width;

12            $(this).css("width", maxWidth);

13            $(this).css("height", height * ratio);

14            height = height * ratio;

15        }

16        var width = $(this).width();

17        var height = $(this).height();

18        if(height > maxHeight){

19            ratio = maxHeight / height;

20            $(this).css("height", maxHeight);

21            $(this).css("width", width * ratio);

22            width = width * ratio;

23        }

24    });

25    //$("#contentpage img").show();

26    // IMAGE RESIZE

27});

来源: http://snipplr.com/view/62552/mage-resize/

页面滚动时自动加载内容

一些网站如Twitter在页面滚动时会加载内容。这意味着，所有内容都在一个页面上，只要你向下滚动就会动态加载。 
下面这段代码可以实现这样的效果。

01var loading = false;

02$(window).scroll(function(){

03    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){

04        if(loading == false){

05            loading = true;

06            $('#loadingbar').css("display","block");

07            $.get("load.php?start="+$('#loaded_max').val(),function(loaded){

08                $('body').append(loaded);

09                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);

10                $('#loadingbar').css("display","none");

11                loading = false;

12            });

13        }

14    }

15});

16 

17$(document).ready(function() {

18    $('#loaded_max').val(50);

19});

来源: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery

检查一个图像是否已经加载

这里有一个片段，用来判断、一个图像是否已经加载。

1var imgsrc = 'img/image1.png';

2$('<img/>').load(function () {

3    alert('image loaded');

4}).error(function () {

5    alert('error loading image');

6}).attr('src', imgsrc);

来源: http://tympanus.net/codrops/2010/01/05/some-useful…

按字母顺序对列表进行排序

view source

print?

01$(function() {

02    $.fn.sortList = function() {

03    var mylist = $(this);

04    var listitems = $('li', mylist).get();

05    listitems.sort(function(a, b) {

06        var compA = $(a).text().toUpperCase();

07        var compB = $(b).text().toUpperCase();

08        return (compA < compB) ? -1 : 1;

09    });

10    $.each(listitems, function(i, itm) {

11        mylist.append(itm);

12    });

13   }

14 

15    $("ul#demoOne").sortList();

16 

17});