十條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() { if (navigator.userAgent.match(/msie/i) ){ alert('I am an old fashioned Internet Explorer'); } });
來源: Stack Overflow
平滑滾動至頁面頂部
以下是jQuery最為常見的一種實現效果:點選一條連結以平滑滾動至頁面頂部。雖然沒什麼新鮮感可言,但每位開發者幾乎都用得上。
$("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; });
來源: Stalk Overflow
保持始終處於頂部
以下程式碼片段允許某一元素始終處於頁面頂部。可以想見,其非常適合處理導航選單、工具欄或者其它重要資訊。
$(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') } }
來源: DesignBump
替換html標籤
jQuery能夠非常輕鬆地實現html標籤替換,而這也將為我們帶來更多新的可能。
$('li').replaceWith(function(){ return $("<div />").append($(this).contents()); });
檢測螢幕寬度
現在移動裝置的人氣幾乎已經超過了傳統計算機,因此對小型螢幕的尺寸進行檢測就變得非常重要。幸運的是,我們可以利用jQuery輕鬆實現這項功能。
var responsive_viewport = $(window).width(); /* if is below 481px */ if (responsive_viewport < 481) { alert('Viewport is smaller than 481px.'); } /* end smallest screen */
來源: jQuery Rain
自動修復損壞圖片
如果大家的站點非常龐大而且已經上線數年,那麼其中或多或少會出現圖片損壞的情況。這項功能可以檢測損壞圖片並根據我們的選擇加以替換。
$('img').error(function(){ $(this).attr('src', 'img/broken.png'); });
來源: WebDesignerDepot
檢測複製、貼上與剪下操作
利用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!') });
來源: Snipplr
自動為外部連結新增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"; });
來源: jQuery Rain
懸停時淡入/淡出
又是另一項“經典”效果,大家可以利用以下片段隨時加以運用。
$(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 }); });
來源: Snipplr
禁用文字/密碼輸入中的空格
無論是電子郵件、使用者名稱還是密碼,很多常見欄位都不需要使用空格。以下程式碼能夠輕鬆禁用選定輸入內容中的全部空格。
$('input.nospace').keydown(function(e) { if (e.keyCode == 32) { return false; } });
原文標題:10 jQuery Snippets for Efficient Web Development
相關文章
- 小程式助力提升運維效率運維
- 前端開發常用程式碼片段(中篇)前端
- 前端開發常用程式碼片段(下篇)前端
- 分享前端開發常用程式碼片段前端
- 使用小程式助力提升運維效率!運維
- 提升開發效率,暢享Web開發之旅——WebStorm 2023 for Mac/WinWebORMMac
- 提升開發效率,小程式容器來幫你
- 程式碼片段
- 提升前端開發效率的工具前端
- RN程式碼片段
- 助力提升移動研發效率的小程式容器技術,你瞭解嗎?
- 前端開發 Mock 利器,效率提升 100%!前端Mock
- 如何利用大模型提升前端研發效率和程式碼質量大模型前端
- Gorm常用程式碼片段GoORM
- 2021 Google 開發者大會丨 助力優質應用構建,多維度提升開發效率Go
- .NET開發工作效率提升利器 - CodeGeeX AI程式設計助手AI程式設計
- 提升開發效率,程式設計師都在使用的免費api程式設計師API
- 聊聊開發日常的效率提升工具(全)
- CoffeeScript和Sass提高Web開發效率Web
- 有關程式碼執行效率提升的小例子
- WEB程式設計開發常用的程式碼Web程式設計
- 如何藉助小程式容器與前端中介軟體提升開發效率前端
- 程式碼簡潔的十條建議
- 使用IDEA外掛來提升Mybatis開發效率IdeaMyBatis
- 如何利用webpack來提升前端開發效率(二)?Web前端
- 如何利用webpack來提升前端開發效率(一)?Web前端
- 提升JavaScript開發效率,盡在WebStorm for Mac/win!JavaScriptWebORMMac
- 提升開發效率的免費API好物API
- 常用免費api推薦,提升開發效率API
- Tech Talk · 雲技術有話聊 | 基於低程式碼的資料開發如何提升效率?
- duxapp:基於Taro使用模組化開發,提升開發效率UXAPP
- VSCode使用技巧,程式碼編寫效率提升2倍以上!VSCode
- vscode使用者程式碼片段VSCode
- 程式碼片段管理工具
- 如何提升 Web 應用的程式碼質量Web
- vs code 新建程式碼片段 路由基礎程式碼路由
- vs code 新建程式碼片段 vue 基礎程式碼Vue
- 提升Ruby開發效率,盡在JetBrains RubyMine for Mac/winAIMac
- 好用的API彙總:提升開發效率的利器API