非常實用的jQuery代碼段集錦【檢測瀏覽器、滾動、復制、淡入淡出等】

更新時間：2019年08月08日 11:54:29 作者：cqingt

這篇文章主要介紹了非常實用的jQuery代碼段集錦,總結分析了包括jQuery檢測瀏覽器、滾動、復制、粘貼、淡入淡出等操作實現(xiàn)技巧,需要的朋友可以參考下

本文實例總結了非常實用的jQuery代碼段。分享給大家供大家參考，具體如下：

檢測IE瀏覽器

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

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

平滑滾動至頁面頂部

以下是jQuery最為常見的一種實現(xiàn)效果：點擊一條鏈接以平滑滾動至頁面頂部。雖然沒什么新鮮感可言，但每位開發(fā)者幾乎都用得上

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

保持始終處于頂部

以下代碼片段允許某一元素始終處于頁面頂部?？梢韵胍?，其非常適合處理導航菜單、工具欄或者其它重要信息。

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

自動修復損壞圖片

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

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

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

利用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!')
});

自動為外部鏈接添加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";
});

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

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

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

懸停時淡入/淡出

$(document).ready(function(){
  $(".thumbs img").fadeTo("slow", 0.6); // 透明度設置0.6
  $(".thumbs img").hover(function(){
    $(this).fadeTo("slow", 1.0); //懸停時，設為1
  },function(){
    $(this).fadeTo("slow", 0.6);
  });
});

更多關于jQuery相關內容還可查看本站專題：《jQuery操作DOM節(jié)點方法總結》、《jQuery遍歷算法與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章: