十條實用的jQuery代碼片段

以下十項jQuery示例可以幫助大家的Web設計項目順利實作效率提升。

檢測IE浏覽器

在進行CSS設計時，IE浏覽器對開發者及設計師而言無疑是個麻煩。盡管IE6的黑暗時代已經過去，IE浏覽器家族的人氣亦在不斷下滑，但我們仍然有必要對其進行檢測。當然，以下片段亦可用于檢測其它浏覽器。

$(document).ready(function() { 
 
      if (navigator.userAgent.match(/msie/i) ){ 
 
        alert('I am an old fashioned Internet Explorer'); 
 
      } 
 
});       

來源: Stack Overflow

平滑滾動至頁面頂部

以下是jQuery最為常見的一種實作效果：點選一條連結以平滑滾動至頁面頂部。雖然沒什麼新鮮感可言，但每位開發者幾乎都用得上。

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

來源: Stalk Overflow

保持始終處于頂部

以下代碼片段允許某一進制素始終處于頁面頂部。可以想見，其非常适合處理導航菜單、工具欄或者其它重要資訊。

$(function(){ 
 
var $win = $(window) 
 
var $nav = $('.mytoolbar'); 
 
var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top; 
 
var isFixed=0; 
 
processScroll() 
 
$win.on('scroll', processScroll) 
 
function processScroll() { 
 
var i, scrollTop = $win.scrollTop() 
 
if (scrollTop >= navTop && !isFixed) { 
 
isFixed = 1 
 
$nav.addClass('subnav-fixed') 
 
} else if (scrollTop <= navTop && isFixed) { 
 
isFixed = 0 
 
 $nav.removeClass('subnav-fixed') 
 
} 
 
}       

來源: DesignBump

替換html标簽

jQuery能夠非常輕松地實作html标簽替換，而這也将為我們帶來更多新的可能。

$('li').replaceWith(function(){ 
 
  return $("<div />").append($(this).contents()); 
 
});       

來源: Allure Web Solutions

檢測螢幕寬度

現在移動裝置的人氣幾乎已經超過了傳統計算機，是以對小型螢幕的尺寸進行檢測就變得非常重要。幸運的是，我們可以利用jQuery輕松實作這項功能。

var responsive_viewport = $(window).width(); 
 
/* if is below 481px */ 
 
if (responsive_viewport < 481) { 
 
    alert('Viewport is smaller than 481px.'); 
 
} /* end smallest screen */       

來源: jQuery Rain

自動修複損壞圖檔

如果大家的站點非常龐大而且已經上線數年，那麼其中或多或少會出現圖檔損壞的情況。這項功能可以檢測損壞圖檔并根據我們的選擇加以替換。

$('img').error(function(){ 
 
$(this).attr('src', 'img/broken.png'); 
 
});       

來源: WebDesignerDepot

檢測複制、粘貼與剪切操作

利用jQuery，大家可以非常輕松地檢測到標明元素的複制、粘貼與剪切操作。

$("#textA").bind('copy', function() { 
 
    $('span').text('copy behaviour detected!') 
 
}); 
 
$("#textA").bind('paste', function() { 
 
    $('span').text('paste behaviour detected!') 
 
}); 
 
$("#textA").bind('cut', function() { 
 
    $('span').text('cut behaviour detected!') 
 
});       

來源: Snipplr

自動為外部連結添加target=“blank”屬性

在連結至外部站點時，大家可能希望使用target="blank"屬性以確定在新的頁籤中打開頁面。問題在于，target="blank"屬性并未經過W3C認證。jQuery能夠幫上大忙：以下片段能夠檢測目前連結是否指向外部，如果是則自動為其添加target="blank"屬性。

var root = location.protocol + '//' + location.host; 
 
$('a').not(':contains(root)').click(function(){ 
 
    this.target = "_blank"; 
 
});       

懸停時淡入/淡出

又是另一項“經典”效果，大家可以利用以下片段随時加以運用。

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

禁用文本/密碼輸入中的空格

無論是電子郵件、使用者名還是密碼，很多常見字段都不需要使用空格。以下代碼能夠輕松禁用標明輸入内容中的全部空格。

$('input.nospace').keydown(function(e) { 
 
if (e.keyCode == 32) { 
 
return false; 
 
} 
 
      

}); 

原文釋出時間：2018年04月13日

作者：核子可樂譯

本文來源：

51CTO

  如需轉載請聯系原作者