快捷導(dǎo)航

非常實(shí)用的jQuery代碼段集錦【檢測瀏覽器、滾動(dòng)、復(fù)制、淡入淡出等】

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

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

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

檢測IE瀏覽器

在進(jìn)行CSS設(shè)計(jì)時(shí)，IE瀏覽器對(duì)開發(fā)者及設(shè)計(jì)師而言無疑是個(gè)麻煩。盡管IE6的黑暗時(shí)代已經(jīng)過去，IE瀏覽器家族的人氣亦在不斷下滑，但我們?nèi)匀挥斜匾獙?duì)其進(jìn)行檢測。當(dāng)然，以下片段亦可用于檢測其它瀏覽器。

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

平滑滾動(dòng)至頁面頂部

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

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

保持始終處于頂部

以下代碼片段允許某一元素始終處于頁面頂部。可以想見，其非常適合處理導(dǎo)航菜單、工具欄或者其它重要信息。

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

自動(dòng)修復(fù)損壞圖片

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

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

檢測復(fù)制、粘貼與剪切操作

利用jQuery，大家可以非常輕松地檢測到選定元素的復(fù)制、粘貼與剪切操作

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

自動(dòng)為外部鏈接添加target=“blank”屬性

在鏈接至外部站點(diǎn)時(shí)，大家可能希望使用target="blank"屬性以確保在新的選項(xiàng)卡中打開頁面。問題在于，target="blank"屬性并未經(jīng)過W3C認(rèn)證。jQuery能夠幫上大忙：以下片段能夠檢測當(dāng)前鏈接是否指向外部，如果是則自動(dòng)為其添加target="blank"屬性。

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

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

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

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

懸停時(shí)淡入/淡出

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

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

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: