分享 10 个很有用的 jQuery 代码片段 - 文章教程

分享 10 个很有用的 jQuery 代码片段

发布于 2018-03-10 字数 9311 浏览 1556 评论 0

可重复使用 jQuery 代码片段,多年来 jQuery 成为了每个 Web 开发人员最喜欢使用库。 它使用简单、速度快并且功能非常强大。 在这篇文章中,我为大家分享一系列得心应手的 jQuery 代码片段,你可以保存并复制你到你的收藏中,这些片段是超级容易适应,以符合您自己的脚本。

分享 10 个很有用的 jQuery 代码片段

平滑滚动到页面顶部

让我们通过一个非常受欢迎的和有用的片段开始这个名单:这4行代码将让你的访问者只需点击A链接即可平滑滚动到页面顶部(与平滑双击自动滚屏发布到页面顶部 #top 位于页面底部的id)。

平滑滚动到页面顶部

$("a[href='#top']").click(function() {
 $("html, body").animate({ scrollTop: 0 }, "slow");
 return false;
 });

复制表格的 thead 表

为了更好的阅读网页的内容,一般编写table表格的时候,会设置一个表头和表尾,内容都是一样的,那么就可以使用jquery的复制这段代码,精简代码。

var $tfoot = $('<tfoot></tfoot>');
 $($('thead').clone(true, true).children().get().reverse()).each(function(){
 $tfoot.append($(this));
 });
 $tfoot.insertAfter('table thead');

加载外部内容

你需要一些外部内容添加到div ? 这是很容易做到的jQuery的,如下面的例子:

$("#content").load("somefile.html", function(response, status, xhr) {
 // error handling
 if(status == "error") {
 $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
 }
 });

等高列

当你使用的列显示在您的网站内容,它肯定更好看,如果列有同等的高度。 下面的代码将采取所有div元素中.col类,并会根据大元调整自己的高度。 超好用!

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

表格隔行换色(斑马纹)

表格隔行换色(斑马纹)

当在表上显示的数据,每一行交替颜色肯定会增加可读性。 这里有一个片段,自动CSS类添加到了两个一排。

$(document).ready(function(){
 $("table tr:even").addClass('stripe');
 });

部分页面刷新

如果你需要刷新页面只有一部分,下面3行代码有一定帮助。 在这个例子中,一个#refresh的div自动刷新每10秒。

setInterval(function() {
    $("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

预先载入图像

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

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

target="blank" 属性允许你强制开新窗口的链接。 虽然它是相关的,打开一个新标签或窗口的外部链接,同一个域的链接绝对应该在同一个窗口中打开。 此代码检测,如果一个链接是外部的,如果是,增加了一个 target="blank" 属性就可以了。

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

设置窗口的全宽/高

这个方便的一段代码允许您创建根据视口全宽/高格。 该代码也处理窗口大小调整。 伟大的模态对话框或弹出窗口。

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

测试密码强度

测试密码强度

当你让用户定义自己的密码,它通常是一件好事,表明有多强密码。 这正是这段代码做。 首先,假设此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;
});

使用 jQuery 调整图像大小

虽然你应该(使用 PHP 和 GD 为例)调整在服务器端的图像也可以是有用的,以便能够使用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
});

滚动自动加载内容

一些网站如 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);
});

检查图像加载

这里有一个片段,我经常使用带有图像时,因为它是要知道如果一个图像加载或不是最好的方式。

var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
    alert('image loaded');
}).error(function () {
    alert('error loading image');
}).attr('src', imgsrc);

列表按字母排序

在某些情况下,它可以是非常有用的一个排序一长串的英文字母顺序排列。 这段代码采取任何名单,并责成其元素按字母顺序。

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0