JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫(kù)。它是輕量級(jí)的js庫(kù) ，它兼容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)記語(yǔ)言下的一個(gè)應(yīng)用)、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁(yè)面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需要定義id即可。以下十項(xiàng)jQuery示例可以幫助大家的Web設(shè)計(jì)項(xiàng)目順利實(shí)現(xiàn)效率提升。

檢測(cè)IE瀏覽器

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

$(document).ready(function()?{

if(navigator.userAgent.match(/msie/i)?){

alert('I?am?an?old?fashioned?Internet?Explorer');

}

});

平滑滾動(dòng)至頁(yè)面頂部

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

$("a[href='#top']").click(function()?{

$("html,?body").animate({?scrollTop:0},"slow");

returnfalse;

});

保持始終處于頂部

以下代碼片段允許某一元素始終處于頁(yè)面頂部。可以想見，其非常適合處理導(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')

}?elseif(scrollTop?<=?navTop?&&?isFixed)?{

isFixed?=?0

$nav.removeClass('subnav-fixed')

}

}

替換html標(biāo)簽

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

$('li').replaceWith(function(){

return$("

});

檢測(cè)屏幕寬度

現(xiàn)在移動(dòng)設(shè)備的人氣幾乎已經(jīng)超過了傳統(tǒng)計(jì)算機(jī)，因此對(duì)小型屏幕的尺寸進(jìn)行檢測(cè)就變得非常重要。幸運(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?*/

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

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

$('img').error(function(){

$(this).attr('src','img/broken.png');

});

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

利用jQuery，大家可以非常輕松地檢測(cè)到選定元素的復(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!')

});

自動(dòng)為外部鏈接添加target=“blank”屬性

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

var?root?=?location.protocol?+'//'+?location.host;

$('a').not(':contains(root)').click(function(){

this.target?="_blank";

});

懸停時(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

});

});

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

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

$('input.nospace').keydown(function(e)?{

if(e.keyCode?==32)?{

returnfalse;

}

});

原文標(biāo)題：10 jQuery Snippets for Efficient Web Development

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

【編輯推薦】

【責(zé)任編輯：wangxueyan TEL：(010)68476606】

點(diǎn)贊 0

總結(jié)

以上是生活随笔為你收集整理的jquery html 片段,十条jQuery代码片段助力Web开发效率提升的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。