偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

十條jQuery代碼片段助力Web開發(fā)效率提升

譯文
開發(fā) 前端
本文章將介紹十項jQuery示例,用來提升大家Web設(shè)計項目的效率。

JQuery是繼prototype之后又一個優(yōu)秀的Javascript庫。它是輕量級的js庫 ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML(標準通用標記語言下的一個應(yīng)用)、events、實現(xiàn)動畫效果,并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個比較大的優(yōu)勢是,它的文檔說明很全,而且各種應(yīng)用也說得很詳細,同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離,也就是說,不用再在html里面插入一堆js來調(diào)用命令了,只需要定義id即可。以下十項jQuery示例可以幫助大家的Web設(shè)計項目順利實現(xiàn)效率提升。

檢測IE瀏覽器

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

 

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

 

來源: Stack Overflow

平滑滾動至頁面頂部

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

 

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

 

來源: Stalk Overflow

保持始終處于頂部

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

 

  1. $(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.  

來源: DesignBump

替換html標簽

jQuery能夠非常輕松地實現(xiàn)html標簽替換,而這也將為我們帶來更多新的可能。

 

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

來源: Allure Web Solutions

檢測屏幕寬度

現(xiàn)在移動設(shè)備的人氣幾乎已經(jīng)超過了傳統(tǒng)計算機,因此對小型屏幕的尺寸進行檢測就變得非常重要。幸運的是,我們可以利用jQuery輕松實現(xiàn)這項功能。

 

  1. 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 */ 

 

來源: jQuery Rain

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

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

 

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

 

來源: WebDesignerDepot

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

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

 

  1. $("#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. }); 

來源: Snipplr

自動為外部鏈接添加target=“blank”屬性

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

 

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

來源: jQuery Rain

懸停時淡入/淡出

又是另一項“經(jīng)典”效果,大家可以利用以下片段隨時加以運用。

 

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

來源: Snipplr

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

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

 

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

原文標題:10 jQuery Snippets for Efficient Web Development

【51CTO譯稿,合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】

責(zé)任編輯:王雪燕 來源: 51CTO
相關(guān)推薦

2016-04-25 10:07:18

jQuery代碼Web開發(fā)效率

2012-09-28 09:12:39

移動Web

2025-08-28 09:42:03

2012-03-06 16:01:04

項目管理

2023-03-27 09:51:46

2024-08-19 09:04:50

2024-02-19 14:50:42

編碼原則軟件開發(fā)

2025-07-21 09:00:00

2023-09-22 12:04:53

Java代碼

2020-08-23 21:07:16

編程PythonJava

2012-08-02 09:14:13

編程戒律

2025-05-21 00:10:00

2012-05-15 01:38:18

編程編程技巧編程觀點

2023-10-31 16:22:31

代碼質(zhì)量軟件開發(fā)Java

2009-05-19 10:14:44

Innodb字段MySQL

2025-03-19 08:21:15

2025-05-15 20:55:38

2024-11-28 11:34:54

2011-07-27 09:17:20

.NET設(shè)計架構(gòu)

2009-04-07 11:24:16

Java開發(fā)注意事項
點贊
收藏

51CTO技術(shù)棧公眾號