快捷導(dǎo)航

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

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

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

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

檢測(cè)IE瀏覽器

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

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

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

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

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

保持始終處于頂部

以下代碼片段允許某一元素始終處于頁(yè)面頂部?？梢韵胍?jiàn)，其非常適合處理導(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)上線(xiàn)數(shù)年，那么其中或多或少會(huì)出現(xiàn)圖片損壞的情況。這項(xiàng)功能可以檢測(cè)損壞圖片并根據(jù)我們的選擇加以替換。

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

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

利用jQuery，大家可以非常輕松地檢測(cè)到選定元素的復(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)卡中打開(kāi)頁(yè)面。問(wèn)題在于，target="blank"屬性并未經(jīng)過(guò)W3C認(rèn)證。jQuery能夠幫上大忙：以下片段能夠檢測(cè)當(dāng)前鏈接是否指向外部，如果是則自動(dòng)為其添加target="blank"屬性。

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

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

無(wú)論是電子郵件、用戶(hù)名還是密碼，很多常見(jiàn)字段都不需要使用空格。以下代碼能夠輕松禁用選定輸入內(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)容還可查看本站專(zhuān)題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

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

您可能感興趣的文章: