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

最新推荐文章于 2016-07-12 01:46:20 发布

橙色阳光

最新推荐文章于 2016-07-12 01:46:20 发布

阅读量1.6k

点赞数

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

多年来，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/

页面滚动时自动加载内容

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

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

橙色阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0+个方便，可重复使用的jQuery代码片段

http://www.open-open.com/news/view/1522776多年来，jQuery已经成为每个Web开发人员必须使用的一个JS库。它使用简单，速度快，功能非常强大。在这篇文章中分享给大家一系列的10+个得心应手的jQuery代码片段。平滑滚动到页面顶部1$("a[href='#top']").click(
复制链接

扫一扫