十條jQuery代碼片斷助力Web開發效率提高

JQuery是繼prototype以後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只須要定義id便可。如下十項jQuery示例能夠幫助你們的Web設計項目順利實現效率提高。

檢測IE瀏覽器

在進行CSS設計時，IE瀏覽器對開發者及設計師而言無疑是個麻煩。儘管IE6的黑暗時代已通過去，IE瀏覽器家族的人氣亦在不斷下滑，但咱們仍然有必要對其進行檢測。固然，如下片斷亦可用於檢測其它瀏覽器。

$(document).ready(function() { 
2. 
3.      if (navigator.userAgent.match(/msie/i) ){ 
4. 
5.        alert('I am an old fashioned Internet Explorer'); 
6. 
7.      } 
8. 
9.}); 

平滑滾動至頁面頂部

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

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

保持始終處於頂部

如下代碼片斷容許某一元素始終處於頁面頂部。能夠想見，其很是適合處理導航菜單、工具欄或者其它重要信息。

$(function(){ 
2. 
3.var $win = $(window) 
4. 
5.var $nav = $('.mytoolbar'); 
6. 
7.var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top; 
8. 
9.var isFixed=0; 
10. 
11.processScroll() 
12. 
13.$win.on('scroll', processScroll) 
14. 
15.function processScroll() { 
16. 
17.var i, scrollTop = $win.scrollTop() 
18. 
19.if (scrollTop >= navTop && !isFixed) { 
20. 
21.isFixed = 1 
22. 
23.$nav.addClass('subnav-fixed') 
24. 
25.} else if (scrollTop <= navTop && isFixed) { 
26. 
27.isFixed = 0 
28. 
29. $nav.removeClass('subnav-fixed') 
30. 
31.} 
32. 
33.} 

替換html標籤

jQuery可以很是輕鬆地實現html標籤替換，而這也將爲咱們帶來更多新的可能。

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

檢測屏幕寬度

如今移動設備的人氣幾乎已經超過了傳統計算機，所以對小型屏幕的尺寸進行檢測就變得很是重要。幸運的是，咱們能夠利用jQuery輕鬆實現這項功能。

var responsive_viewport = $(window).width(); 
2. 
3./* if is below 481px */ 
4. 
5.if (responsive_viewport < 481) { 
6. 
7.    alert('Viewport is smaller than 481px.'); 
8. 
9.} /* end smallest screen */ 

自動修復損壞圖片

若是你們的站點很是龐大並且已經上線數年，那麼其中或多或少會出現圖片損壞的狀況。這項功能能夠檢測損壞圖片並根據咱們的選擇加以替換。

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

檢測複製、粘貼與剪切操做

利用jQuery，你們能夠很是輕鬆地檢測到選定元素的複製、粘貼與剪切操做。

$("#textA").bind('copy', function() { 
2. 
3.    $('span').text('copy behaviour detected!') 
4. 
5.}); 
6. 
7.$("#textA").bind('paste', function() { 
8. 
9.    $('span').text('paste behaviour detected!') 
10. 
11.}); 
12. 
13.$("#textA").bind('cut', function() { 
14. 
15.    $('span').text('cut behaviour detected!') 
16. 
17.}); 

自動爲外部連接添加target=「blank」屬性

在連接至外部站點時，你們可能但願使用target="blank"屬性以確保在新的選項卡中打開頁面。問題在於，target="blank"屬性並未通過W3C認證。jQuery可以幫上大忙：如下片斷可以檢測當前連接是否指向外部，若是是則自動爲其添加target="blank"屬性。

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

懸停時淡入/淡出

又是另外一項「經典」效果，你們能夠利用如下片斷隨時加以運用。

$(document).ready(function(){ 
2. 
3.    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads 
4. 
5.    $(".thumbs img").hover(function(){ 
6. 
7.        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover 
8. 
9.    },function(){ 
10. 
11.        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout 
12. 
13.    }); 
14. 
15.}); 

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

不管是電子郵件、用戶名仍是密碼，不少常見字段都不須要使用空格。如下代碼可以輕鬆禁用選定輸入內容中的所有空格。

$('input.nospace').keydown(function(e) { 
2. 
3.if (e.keyCode == 32) { 
4. 
5.return false; 
6. 
7.} 
8. 
9.});