18個很棒的jQuery程式碼片段分享

Web開發者發表於2013-12-20
jQuery

　　jQuery是當今最流行Web開發必備javascript庫。本文收集了18個很棒的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.admin10000.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">admin10000.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);
    });

　　預防對錶單進行多次提交

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

　　影像等比例縮放

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

　　滑鼠滑動時的漸入和漸出

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
    });
});

　　讓整個DIV可以被點選

<div class = "myBox" > 
    < a href = "http://www.admin10000.com" > admin10000.com < /a>
</div > 

$(".myBox").click(function(){
    window.location=$(this).find("a").attr("href");
    return false;
});

　　在新視窗開啟連結 (target=”blank”)    

$('a[@rel$='external']').click(function(){
     this.target = "_blank";
});

/*
   Usage:
   <a href="http://www.admin10000.com" rel="external">admin10000.com</a>
*/

　　製作等高的列 

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

　　圖片預載入

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }

jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

　　獲取 URL 中傳遞的引數

$.urlParam = function(name){
	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
	if (!results) { return 0; }
	return results[1] || 0;
}

　　禁用表單的Enter鍵提交

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

相關文章