jquery常用的12個(gè)小功能

1、jQuery開發(fā)，感興12個(gè)jquery常用功能，極好的，分享給大家，幫助大家更好的進(jìn)行趣的小伙伴們可以參考一下返回頂部使用JQuery的animate和scrollTop方法可以創(chuàng)建簡(jiǎn)單地返回頂部的動(dòng)畫：/Backtotop$('a.top').click(function(e) e.preventDefault(); $(document.body).animate(scrollTop:0,800););HTML中得有一個(gè)按鈕：<!-Createananchortag-><aclass="

2、;top"href="#">Backtotop</a>可以改變scrollTop的值來定位滾動(dòng)條的位置。圖片預(yù)加載如果頁(yè)面使用了很多不是最初加載便可見的圖片，有必要進(jìn)行預(yù)加載：$.preloadImages=function() for(vari=0;i<arguments.length;i+) $('img').attr('src',argumentsi); $.preloadImages('img/hover-o

3、n.png','img/hover-off.png');判斷圖片是否完全加載有時(shí)需要圖片完全加載才能進(jìn)行后面的操作，下面的這段腳本可以實(shí)現(xiàn)：$('img').load(function() console.log('imageloadsuccessful'););你也可以通過帶id或者class的img標(biāo)簽來判斷某張?zhí)囟ǖ膱D片是否完全加載自動(dòng)修復(fù)損壞圖片如果圖片損壞，可以用另外一張進(jìn)行替換：$('img').on('error',function() $(this).pr

4、op('src','img/broken.png'););Hover狀態(tài)的類切換class改變它當(dāng)用戶的鼠標(biāo)指針懸浮在一個(gè)可以點(diǎn)擊的元素上時(shí)，你可以通過添加一個(gè)的視覺效果，鼠標(biāo)指針離開該元素時(shí)，就移開剛剛添加的class：$('.btn').hover(function() $(this).addClass('hover'); ,function() $(this).removeClass('hover'); );一個(gè)更簡(jiǎn)單的方式是使用togg

5、leClass：$('.btn').hover(function() $(this).toggleClass('hover');)；Note:CSSmaybeafastersolutioninthiscasebutit'sstillworthwhiletoknowthis.輸入框的不可編輯有時(shí)，你想要表單的提交按鈕或者文本框變的不可編輯，直到用戶完成某個(gè)特定的動(dòng)作，通過修改input元素的disabled屬性來實(shí)現(xiàn)：$('inputtype="submit"').prop('disabled&

6、#39;,true);再次調(diào)用prop方法將disabled值改為false,就可以更改元素狀態(tài)：$('inputtype="submit"').prop('disabled',false);停止鏈接加載若你不想點(diǎn)擊鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面或者重新加載頁(yè)面，僅僅只想讓它做點(diǎn)別的事情，如觸發(fā)其它腳本，則需要阻止鏈接的默認(rèn)行為：$('a.no-link').click(function(e) e.preventDefault(););Fade/Slide切換Slideing和fading是很常用的JQuery動(dòng)畫。如

7、果你想要在用戶產(chǎn)生點(diǎn)擊事件時(shí)顯示一個(gè)元素，可以用fadeIn或者slideDown,若要實(shí)現(xiàn)第一次點(diǎn)擊顯示元素而第二次點(diǎn)擊隱藏元素的效果，可以參考下面的腳本：/Fade$('.btn').click(function() $('.element').fadeToggle('slow'););/Toggle$('.btn').click(function() $('.element').slideToggle('slow'););簡(jiǎn)單地手風(fēng)琴下面的這段腳本可以簡(jiǎn)單實(shí)

8、現(xiàn)手風(fēng)琴效果：/Closeallpanels$('#accordion').find('.content').hide();/Accordion$('#accordion').find('.accordion-header').click(function() varnext=$(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast

9、9;); returnfalse;);讓兩個(gè)Div等高有時(shí)，需要讓兩個(gè)Div保持等高，而不管兩個(gè)Div的內(nèi)容如何：$('.div').css('min-height',$(.main-div).height();var$columns=$('.column');varheight=0;$columns.each(function() if($(this).height()>height)( height=$(this).height(); );$columns.

10、height(height);在上述的示例中，會(huì)循環(huán)一個(gè)元素集合，并將元素的高度設(shè)置成元素集合中高度最高的。若要所有column保持同樣地高度，則可以這樣：var$rows=$('.same-height-columns');$rows.each(function()( $(this).find('.column').heighr('target','_self);Note:window.location.origindoesn'tworkinIE10.Thisfixtakescareoftheissue.通過文本查找元素利用JQuery的contains()選擇器可以