10个超实用的jQuery代码片段分享

jQuery绝对是最流行的JS第三方类库类库，在这篇文章中我们将收集网上的10个最棒的jQuery代码片段，希望大家能够有机会应用到自己的web开发项目或者网站中去，还想什么，请站内收藏吧！

相关阅读：

绝对应当收藏的10个实用HTML5代码片段

分享10个超实用的jQuery代码片段

jQuery实现的内链接平滑滚动

不需要使用太复杂的插件，只要使用下载这段代码即可实现基于内部链接的平滑滚动

    $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
     
    var anchor = this.hash,
    $target = $(target);
     
    $('html, body').stop().animate({
    'scrollTop': $target.offset().top
    }, 500, 'swing', function () {
    window.location.hash = anchor;
    });
     
    });

使用jQuery获取所有节点

    var $element = $('#gbtags');
    var $nodes = $element.contents();
    $nodes.each(function() {
    if(this.nodeType === 3 && $.trim($(this).text())) {
    $(this).wrap('');
    }
    });

限制选择框选择个数

    $("#categories option").click(function(e){
    if ($(this).parent().val().length < 2) {
    $(this).removeAttr("selected");
    }
    });

jQuery使用通配符来删除class

    var _c = 'your-icon-class'
     
    $('.currency').removeClass (function (index, css) {
    return (css.match (/\bicon-\S+/g) || []).join(' ');
    }).addClass('icon-'+_c);

切换启用和禁用

    /* HTML
    |
    |
    <input type="text" value="欢迎访问www.gbtags.com" /><input type="button" value="禁用按钮" />
    |
    |
    */
     
    // Plugin
    (function ($) {
    $.fn.toggleDisabled = function () {
    return this.each(function () {
    var $this = $(this);
    if ($this.attr('disabled')) $this.removeAttr('disabled');
    else $this.attr('disabled', 'disabled');
    });
    };
    })(jQuery);
     
    // TEST
    $(function () {
    $('input:button').click(function () {
    $('input:text').toggleDisabled();
    });
    });

在线调试：

平滑滚动返回顶端

    <h1 id="anchor">gbtags.com</h1>
    <a class="topLink" href="#anchor">返回顶端</a>
     
    $(document).ready(function () {
     
    $("a.topLink").click(function () {
    $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
    duration: 500,
    easing: "swing"
    });
    return false;
    });
     
    });

使用jQuery和Google Analytics来跟踪表单

 
 

  
  

   
   
  
     var array1 = [];
    $(document).ready(function () {
    $('input').change(function () {
    var formbox = $(this).attr('id');
    array1.push(formbox);
    console.log("you filled out box " + array1);
    });
    $('#submit').click(function () {
    console.log('tracked ' + array1);
    //alert('this is the order of boxes you filled out: ' + array1);
    _gaq.push(['_trackEvent', 'Form', 'completed', '"' + array1 + '"']);
    });
    });

  
  
 
 

超简单的密码强度提示

    $('#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生成一个自动停靠页尾效果

 
 

  
  

   
   
   
     // Window load event used just in case window height is dependant upon images
    $(window).bind("load", function () {
    var footerHeight = 0,
    footerTop = 0,
    $footer = $("#footer");
    positionFooter();
     
    function positionFooter() {
    footerHeight = $footer.height();
    footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";
    /* DEBUGGING
    console.log("Document height: ", $(document.body).height());
    console.log("Window height: ", $(window).height());
    console.log("Window scroll: ", $(window).scrollTop());
    console.log("Footer height: ", footerHeight);
    console.log("Footer top: ", footerTop);
    */
    if (($(document.body).height() + footerHeight) < $(window).height()) {
    $footer.css({
    position: "absolute"
    }).stop().animate({
    top: footerTop
    });
    } else {
    $footer.css({
    position: "static"
    });
    }
    }
     
    $(window)
    .scroll(positionFooter)
    .resize(positionFooter);
    });

  
  
 
 

在线调试：

让整个DIV可以被点击

    <div class = "myBox" >
    < a href = "http://www.gbtags.com" > gbtags.com < /a>
    </div >
     
    $(".myBox").click(function(){
    window.location=$(this).find("a").attr("href");
    return false;
    });