十條jQuery代碼片段助力Web開發(fā)效率提升
譯文JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫。它是輕量級(jí)的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需要定義id即可。以下十項(xiàng)jQuery示例可以幫助大家的Web設(shè)計(jì)項(xiàng)目順利實(shí)現(xiàn)效率提升。
檢測IE瀏覽器
在進(jìn)行CSS設(shè)計(jì)時(shí)，IE瀏覽器對(duì)開發(fā)者及設(shè)計(jì)師而言無疑是個(gè)麻煩。盡管IE6的黑暗時(shí)代已經(jīng)過去，IE瀏覽器家族的人氣亦在不斷下滑，但我們?nèi)匀挥斜匾獙?duì)其進(jìn)行檢測。當(dāng)然，以下片段亦可用于檢測其它瀏覽器。
- $(document).ready(function() {
- if (navigator.userAgent.match(/msie/i) ){
- alert('I am an old fashioned Internet Explorer');
- }
- });
來源: Stack Overflow
平滑滾動(dòng)至頁面頂部
以下是jQuery最為常見的一種實(shí)現(xiàn)效果：點(diǎn)擊一條鏈接以平滑滾動(dòng)至頁面頂部。雖然沒什么新鮮感可言，但每位開發(fā)者幾乎都用得上。
- $("a[href='#top']").click(function() {
- $("html, body").animate({ scrollTop: 0 }, "slow");
- return false;
- });
來源: Stalk Overflow
保持始終處于頂部
以下代碼片段允許某一元素始終處于頁面頂部?？梢韵胍姡浞浅＿m合處理導(dǎo)航菜單、工具欄或者其它重要信息。
- $(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標(biāo)簽
jQuery能夠非常輕松地實(shí)現(xiàn)html標(biāo)簽替換，而這也將為我們帶來更多新的可能。
- $('li').replaceWith(function(){
- return $("<div />").append($(this).contents());
- });
檢測屏幕寬度
現(xiàn)在移動(dòng)設(shè)備的人氣幾乎已經(jīng)超過了傳統(tǒng)計(jì)算機(jī)，因此對(duì)小型屏幕的尺寸進(jìn)行檢測就變得非常重要。幸運(yùn)的是，我們可以利用jQuery輕松實(shí)現(xiàn)這項(xiàng)功能。
- var responsive_viewport = $(window).width();
- /* if is below 481px */
- if (responsive_viewport < 481) {
- alert('Viewport is smaller than 481px.');
- } /* end smallest screen */
來源: jQuery Rain
自動(dòng)修復(fù)損壞圖片
如果大家的站點(diǎn)非常龐大而且已經(jīng)上線數(shù)年，那么其中或多或少會(huì)出現(xiàn)圖片損壞的情況。這項(xiàng)功能可以檢測損壞圖片并根據(jù)我們的選擇加以替換。
- $('img').error(function(){
- $(this).attr('src', 'img/broken.png');
- });
來源: WebDesignerDepot
檢測復(fù)制、粘貼與剪切操作
利用jQuery，大家可以非常輕松地檢測到選定元素的復(fù)制、粘貼與剪切操作。
- $("#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
自動(dòng)為外部鏈接添加target=“blank”屬性
在鏈接至外部站點(diǎn)時(shí)，大家可能希望使用target="blank"屬性以確保在新的選項(xiàng)卡中打開頁面。問題在于，target="blank"屬性并未經(jīng)過W3C認(rèn)證。jQuery能夠幫上大忙：以下片段能夠檢測當(dāng)前鏈接是否指向外部，如果是則自動(dòng)為其添加target="blank"屬性。
- var root = location.protocol + '//' + location.host;
- $('a').not(':contains(root)').click(function(){
- this.target = "_blank";
- });
來源: jQuery Rain
懸停時(shí)淡入/淡出
又是另一項(xiàng)“經(jīng)典”效果，大家可以利用以下片段隨時(shí)加以運(yùn)用。
- $(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
禁用文本/密碼輸入中的空格
無論是電子郵件、用戶名還是密碼，很多常見字段都不需要使用空格。以下代碼能夠輕松禁用選定輸入內(nèi)容中的全部空格。
- $('input.nospace').keydown(function(e) {
- if (e.keyCode == 32) {
- return false;
- }
- });
原文標(biāo)題：10 jQuery Snippets for Efficient Web Development
【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】
