有用的 JQuery 代碼片斷

如今，JQuery 已被普遍的利於用網站建設，下面介紹一些經常使用的代碼片斷，收藏。

滾動到首頁

常常出如今網站右側，向上箭頭同樣的東西，方便咱們回到網站頭部。給出代碼片斷，給連接一個id top：

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

複製表格頭

爲了表格的可讀性。咱們常常將表頭複製一份丟在表的底部。這裏給出 JQuery 片斷，能幫咱們完成這個功能： var $tfoot = $(''); $($('thead').clone(true, true).children().get().reverse()).each(function(){ $tfoot.append($(this)); }); $tfoot.insertAfter('table thead');

加載外部內容

在jquery中，咱們用如下方法很容易作到，加載面的信息進咱們的div中：

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

自動調整高度相等

在web的內容顯示上。咱們常常將內容高度統一，這樣看上去會更加美觀一些。

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

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

斑馬紋的表格

當顯示一個表的數據,不一樣的顏色在每一行確定會增長可讀性。

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

部分頁面刷新

當你須要刷新網站部份內容時候能夠用到下面的片斷，每10秒刷新一次div：
setInterval(function() { $("#refresh").load(location.href+" #refresh>*",""); }, 10000); // milliseconds to wait

預加載圖像

$.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" 這個屬性容許咱們在新窗口打開連接。咱們這裏能夠利用jquery代碼來批量控制網站之外連接經過新窗口打開

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

檢查密碼長度

html：
<input type="password" name="pass" />
<span></span>

在正則表達式中判斷密碼強弱並返回信息

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

滾動加載信息

ajax滾動加載信息到列表中顯示

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