本文主要為大家分享一篇關於jQuery的實用技巧的方法,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧。以下十項jQuery範例可以幫助大家的Web設計專案順利實現效率提升。
檢測IE瀏覽器
在進行CSS設計時,IE瀏覽器對開發者及設計師而言無疑是個麻煩。儘管IE6的黑暗時代已經過去,IE瀏覽器家族的人氣也在不斷下滑,但我們仍有必要對其進行檢測。當然,以下片段也可用於偵測其它瀏覽器。
$(document).ready(function() { if (navigator.userAgent.match(/msie/i) ){ alert('I am an old fashioned Internet Explorer'); } });
平滑捲動至頁面頂部
以下是jQuery最常見的一種實作效果:點擊一條連結以平滑捲動至頁面頂部。雖然沒什麼新鮮感可言,但每位開發者幾乎都用得上。
$("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; });
保持始終處於頂部
以下程式碼片段允許某一元素始終處於頁面頂部。可以想見,其非常適合處理導航選單、工具列或其它重要資訊。
$(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 <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>替換html標籤</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">jQuery能夠非常輕鬆地實作html標籤替換,而這也將為我們帶來更多新的可能性。 </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('li').replaceWith(function(){ return $("<p></p>").append($(this).contents()); });
檢測螢幕寬度
現在行動裝置的人氣幾乎已經超過了傳統計算機,因此對小型螢幕的尺寸進行檢測就變得非常重要。幸運的是,我們可以利用jQuery輕鬆實現這項功能。
var responsive_viewport = $(window).width(); /* if is below 481px */ if (responsive_viewport <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>自動修復損壞圖片</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">如果大家的網站非常龐大而且已經上線數年,那麼其中或多或少會出現圖片損壞的情況。這項功能可以偵測損壞圖片並根據我們的選擇加以替換。 </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('img').error(function(){ $(this).attr('src', 'img/broken.png'); });
偵測複製、貼上與剪下操作
利用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!') });
自動為外部連結新增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"; });
懸停時淡入/淡出
又是另一個「經典」效果,大家可以利用以下片段隨時加以運用。
$(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 }); });
停用文字/密碼輸入中的空格
無論是電子郵件、使用者名稱或密碼,許多常見欄位都不需要使用空格。以下程式碼能夠輕鬆停用選定輸入內容中的全部空格。
$('input.nospace').keydown(function(e) { if (e.keyCode == 32) { return false; } });
以上是關於jQuery的實用技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!