高效Web開發的10個jQuery程式碼片段，web開發jquery片段

高效Web開發的10個jQuery程式碼片段，web開發jquery片段

在過去的幾年中，jQuery一直是使用最為廣泛的JavaScript指令碼庫。今天我們將為各位Web開發人員提供10個最實用的jQuery程式碼片段，有需要的開發人員可以儲存起來。 

1、檢測Internet Explorer版本 
當涉及到CSS設計時，對開發人員和設計者而言Internet Explorer一直是個問題。儘管IE6的黑暗時代已經過去，IE也越來越不流行，它始終是一個能夠容易檢測的好東西。當然了，下面的代碼也能用於檢測別的瀏覽器。

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

2、平穩滑動到頁面頂部
這是一個最廣泛使用的jQuery效果：對一個連結點擊下會平穩地將頁面移動到頂部。這裡沒什麼新的內容，但是每個開發人員必須要會偶爾編寫一下類似函數

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

3、固定在頂部
 非常有用的程式碼片段，它允許一個元素固定在頂部。對導覽按鈕、工具列或重要訊息框是超級有用的。

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

4、用其他內容取代html標誌
jQuery使得用另外一個東西取代html標誌很簡單。可以利用的餘地無窮無盡。

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

5、檢測視窗寬度
 現在行動裝置比過時的電腦更普遍，能夠方便去檢測一個更小的視窗寬度會很有協助。幸運的是，用jQuery來做超級簡單。

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

6、自動定位並修複損壞圖片 
如果你的網站比較大而且已經線上運行了好多年，你或多或少會遇到介面上某個地方有損壞的圖片。這個有用的函數能夠協助檢測損壞圖片並用你中意的圖片替換它，並會將此問題通知給訪客。

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

7、檢測複製、粘貼和剪下的操作
 使用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!')}); 

8、遇到外部連結自動添加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";}); 

9、在圖片上停留時逐漸增強或減弱的透明效果
 另一個“經典的”代碼，它要放到你的工具箱裡，因為你會不時地要實現它。

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

10、在文本或密碼輸入時禁止空格鍵
 在很多表格領域都不需要空格鍵，例如，電子郵件，使用者名稱，密碼等等等。這裡是一個簡單的技巧可以用於在選定輸入中禁止空格鍵。

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。