26個Jquery使用小技巧(jQuery tips, tricks & solutions)

前段時間發布了Jquery類庫1.4版本，使用者也越來越多，為了方便大家對Jquery的使用，下面列出了一些Jquery使用技巧。比如有禁止右鍵點擊、隱藏搜索文本框文字、在新窗口中打開鏈接、檢測瀏覽器、預加載圖片、頁面樣式切換、所有列等高、動態控制頁面字體大小、獲得鼠標指針的X值Y值、驗證元素是否為空、替換元素、延遲加載、驗證元素是否存在于Jquery集合中、使DIV可點擊、克隆對象、使元素居中、計算元素個數、使用Google主機上的Jquery類庫、禁用Jquery效果、解決Jquery類庫與其他Javascript類庫沖突問題。

具體如下：

1. 禁止右鍵點擊

view plaincopy to clipboardprint?

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

2.?????? ????$(document).bind("contextmenu",function(e){ ??

3.?????? ????????return?false; ??

4.?????? ????}); ??

5.?????? });??

2. 隱藏搜索文本框文字

view plaincopy to clipboardprint?

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

2.?????? $("input.text1").val("Enter?your?search?text?here"); ??

3.?????? ???textFill($('input.text1')); ??

4.?????? }); ??

5.?????? ??

6.?????? ????function?textFill(input){?//input?focus?text?function ??

7.?????? ????var?originalvalue?=?input.val(); ??

8.?????? ????input.focus(?function(){ ??

9.?????? ????????if(?$.trim(input.val())?==?originalvalue?){?input.val('');?} ??

10.?? ????}); ??

11.?? ????input.blur(?function(){ ??

12.?? ????????if(?$.trim(input.val())?==?''?){?input.val(originalvalue);?} ??

13.?? ????}); ??

14.?? }??

3. 在新窗口中打開鏈接

view plaincopy to clipboardprint?

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

2.?????? ???//Example?1:?Every?link?will?open?in?a?new?window ??

3.?????? ???$('a[href^="http://"]').attr("target",?"_blank"); ??

4.?????? ??

5.?????? ???//Example?2:?Links?with?the?rel="external"?attribute?will?only?open?in?a?new?window ??

6.?????? ???$('a[@rel$='external']').click(function(){ ??

7.?????? ??????this.target?=?"_blank"; ??

8.?????? ???}); ??

9.?????? }); ??

10.?? //?how?to?use ??

11.?? <A?href="http://www.opensourcehunter.com"?rel=external>open?link</A>??

4. 檢測瀏覽器

注: 在版本jQuery 1.4中，$.support 替換掉了$.browser 變量。

view plaincopy to clipboardprint?

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

2.?????? //?Target?Firefox?2?and?above ??

3.?????? if?($.browser.mozilla?&&?$.browser.version?>=?"1.8"?){ ??

4.?????? ????//?do?something ??

5.?????? } ??

6.?????? ??

7.?????? //?Target?Safari ??

8.?????? if(?$.browser.safari?){ ??

9.?????? ????//?do?something ??

10.?? } ??

11.?? ??

12.?? //?Target?Chrome ??

13.?? if(?$.browser.chrome){ ??

14.?? ????//?do?something ??

15.?? } ??

16.?? ??

17.?? //?Target?Camino ??

18.?? if(?$.browser.camino){ ??

19.?? ????//?do?something ??

20.?? } ??

21.?? ??

22.?? //?Target?Opera ??

23.?? if(?$.browser.opera){ ??

24.?? ????//?do?something ??

25.?? } ??

26.?? ??

27.?? //?Target?IE6?and?below ??

28.?? if?($.browser.msie?&&?$.browser.version?<=?6?){ ??

29.?? ????//?do?something ??

30.?? } ??

31.?? ??

32.?? //?Target?anything?above?IE6 ??

33.?? if?($.browser.msie?&&?$.browser.version?>?6){ ??

34.?? ????//?do?something ??

35.?? } ??

36.?? });??

5. 預加載圖片

view plaincopy to clipboardprint?

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

2.?????? ???jQuery.preloadImages?=?function() ??

3.?????? ??{ ??

4.?????? ?????for(var?i?=?0;?i").attr("src",?arguments[i]); ?

5.?????? ??} ?

6.?????? }; ?

7.?????? //?how?to?use ?

8.?????? $.preloadImages("image1.jpg"); ??

9.?????? });??

6. 頁面樣式切換

view plaincopy to clipboardprint?

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

2.?????? ????$("a.Styleswitcher").click(function()?{ ??

3.?????? ????????//swicth?the?LINK?REL?attribute?with?the?value?in?A?REL?attribute ??

4.?????? ????????$('link[rel=stylesheet]').attr('href'?,?$(this).attr('rel')); ??

5.?????? ????}); ??

6.?????? //?how?to?use ??

7.?????? //?place?this?in?your?header ??

8.?????? <LINK?href="default.css"?type=text/css?rel=stylesheet> ??

9.?????? //?the?links ??

10.?? <A?class=Styleswitcher?href="#"?rel=default.css>Default?Theme</A> ??

11.?? <A?class=Styleswitcher?href="#"?rel=red.css>Red?Theme</A> ??

12.?? <A?class=Styleswitcher?href="#"?rel=blue.css>Blue?Theme</A> ??

13.?? });??

7. 列高度相同

如果使用了兩個CSS列，使用此種方式可以是兩列的高度相同。

view plaincopy to clipboardprint?

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

2.?????? function?equalHeight(group)?{ ??

3.?????? ????tallest?=?0; ??

4.?????? ????group.each(function()?{ ??

5.?????? ????????thisHeight?=?$(this).height(); ??

6.?????? ????????if(thisHeight?>?tallest)?{ ??

7.?????? ????????????tallest?=?thisHeight; ??

8.?????? ????????} ??

9.?????? ????}); ??

10.?? ????group.height(tallest); ??

11.?? } ??

12.?? //?how?to?use ??

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

14.?? ????equalHeight($(".left")); ??

15.?? ????equalHeight($(".right")); ??

16.?? }); ??

17.?? });??

8. 動態控制頁面字體大小

用戶可以改變頁面字體大小

view plaincopy to clipboardprint?

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

2.?????? ??//?Reset?the?font?size(back?to?default) ??

3.?????? ??var?originalFontSize?=?$('html').css('font-size'); ??

4.?????? ????$(".resetFont").click(function(){ ??

5.?????? ????$('html').css('font-size',?originalFontSize); ??

6.?????? ??}); ??

7.?????? ??//?Increase?the?font?size(bigger?font0 ??

8.?????? ??$(".increaseFont").click(function(){ ??

9.?????? ????var?currentFontSize?=?$('html').css('font-size'); ??

10.?? ????var?currentFontSizeNum?=?parseFloat(currentFontSize,?10); ??

11.?? ????var?newFontSize?=?currentFontSizeNum*1.2; ??

12.?? ????$('html').css('font-size',?newFontSize); ??

13.?? ????return?false; ??

14.?? ??}); ??

15.?? ??//?Decrease?the?font?size(smaller?font) ??

16.?? ??$(".decreaseFont").click(function(){ ??

17.?? ????var?currentFontSize?=?$('html').css('font-size'); ??

18.?? ????var?currentFontSizeNum?=?parseFloat(currentFontSize,?10); ??

19.?? ????var?newFontSize?=?currentFontSizeNum*0.8; ??

20.?? ????$('html').css('font-size',?newFontSize); ??

21.?? ????return?false; ??

22.?? ??}); ??

23.?? });??

9. 返回頁面頂部功能

view plaincopy to clipboardprint?

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

2.?????? $('a[href*=#]').click(function()?{ ??

3.?????? ?if?(location.pathname.replace(/^\//,'')?==?this.pathname.replace(/^\//,'') ??

4.?????? ?&&?location.hostname?==?this.hostname)?{ ??

5.?????? ???var?$target?=?$(this.hash); ??

6.?????? ???$target?=?$target.length?&&?$target ??

7.?????? ???||?$('[name='?+?this.hash.slice(1)?+']'); ??

8.?????? ???if?($target.length)?{ ??

9.?????? ??var?targetOffset?=?$target.offset().top; ??

10.?? ??$('html,body') ??

11.?? ??.animate({scrollTop:?targetOffset},?900); ??

12.?? ????return?false; ??

13.?? ???} ??

14.?? ??} ??

15.?? ??}); ??

16.?? //?how?to?use ??

17.?? //?place?this?where?you?want?to?scroll?to ??

18.?? <A?name=top></A> ??

19.?? //?the?link ??

20.?? <A?href="#top">go?to?top</A> ??

21.?? });??

11.獲得鼠標指針ＸＹ值

view plaincopy to clipboardprint?

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

2.?????? ???$().mousemove(function(e){ ??

3.?????? ?????//display?the?x?and?y?axis?values?inside?the?div?with?the?id?XY ??

4.?????? ????$('#XY').html("X?Axis?:?"?+?e.pageX?+?"?|?Y?Axis?"?+?e.pageY); ??

5.?????? ??}); ??

6.?????? //?how?to?use ??

7.?????? <DIV?id=XY></DIV> ??

8.?????? ??

9.?????? });??

12. 驗證元素是否為空

view plaincopy to clipboardprint?

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

2.?????? ??if?($('#id').html())?{ ??

3.?????? ???//?do?something ??

4.?????? ???} ??

5.?????? });??

13. 替換元素

view plaincopy to clipboardprint?

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

2.?????? ???$('#id').replaceWith(' ?

3.?????? <DIV>I?have?been?replaced</DIV> ?

4.?????? ?

5.?????? '); ??

6.?????? });??

14. jQuery延時加載功能

view plaincopy to clipboardprint?

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

2.?????? ???window.setTimeout(function()?{ ??

3.?????? ?????//?do?something ??

4.?????? ???},?1000); ??

5.?????? });??

15. 移除單詞功能

view plaincopy to clipboardprint?

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

2.?????? ???var?el?=?$('#id'); ??

3.?????? ???el.html(el.html().replace(/word/ig,?"")); ??

4.?????? });??

16. 驗證元素是否存在于Ｊｑｕｅｒｙ對象集合中

view plaincopy to clipboardprint?

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

2.?????? ???if?($('#id').length)?{ ??

3.?????? ??//?do?something ??

4.?????? ??} ??

5.?????? });??

17. 使整個ＤＩＶ可點擊

view plaincopy to clipboardprint?

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

2.?????? ????$("div").click(function(){ ??

3.?????? ??????//get?the?url?from?href?attribute?and?launch?the?url ??

4.?????? ??????window.location=$(this).find("a").attr("href");?return?false; ??

5.?????? ????}); ??

6.?????? //?how?to?use ??

7.?????? <DIV><A?href="index.html">home</A></DIV> ??

8.?????? ??

9.?????? });??

18.ID與Class之間轉換

當改變Window大小時，在ID與Class之間切換

view plaincopy to clipboardprint?

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

2.?????? ???function?checkWindowSize()?{ ??

3.?????? ????if?(?$(window).width()?>?1200?)?{ ??

4.?????? ????????$('body').addClass('large'); ??

5.?????? ????} ??

6.?????? ????else?{ ??

7.?????? ????????$('body').removeClass('large'); ??

8.?????? ????} ??

9.?????? ???} ??

10.?? $(window).resize(checkWindowSize); ??

11.?? });??

19. 克隆對象

view plaincopy to clipboardprint?

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

2.?????? ???var?cloned?=?$('#id').clone(); ??

3.?????? //?how?to?use ??

4.?????? <DIV?id=id></DIV> ??

5.?????? ??

6.?????? });??

20. 使元素居屏幕中間位置

view plaincopy to clipboardprint?

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

2.?????? ??jQuery.fn.center?=?function?()?{ ??

3.?????? ??????this.css("position","absolute"); ??

4.?????? ??????this.css("top",?(?$(window).height()?-?this.height()?)?/?2+$(window).scrollTop()?+?"px"); ??

5.?????? ??????this.css("left",?(?$(window).width()?-?this.width()?)?/?2+$(window).scrollLeft()?+?"px"); ??

6.?????? ??????return?this; ??

7.?????? ??} ??

8.?????? ??$("#id").center(); ??

9.?????? });??

21. 寫自己的選擇器

view plaincopy to clipboardprint?

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

2.?????? ???$.extend($.expr[':'],?{ ??

3.?????? ???????moreThen1000px:?function(a)?{ ??

4.?????? ???????????return?$(a).width()?>?1000; ??

5.?????? ??????} ??

6.?????? ???}); ??

7.?????? ??$('.box:moreThen1000px').click(function()?{ ??

8.?????? ??????//?creating?a?simple?js?alert?box ??

9.?????? ??????alert('The?element?that?you?have?clicked?is?over?1000?pixels?wide'); ??

10.?? ??}); ??

11.?? });??

22. 統計元素個數

view plaincopy to clipboardprint?

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

2.?????? ???$("p").size(); ??

3.?????? });??

23. 使用自己的 Bullets

view plaincopy to clipboardprint?

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

2.?????? ???$("ul").addClass("Replaced"); ??

3.?????? ???$("ul?>?li").prepend("??"); ??

4.?????? ?//?how?to?use ??

5.?????? ?ul.Replaced?{?list-style?:?none;?} ??

6.?????? });??

24. 引用Google主機上的Jquery類庫

Let Google host the jQuery script for you. This can be done in 2 ways.

view plaincopy to clipboardprint?

1.?????? //Example?1 ??

2.?????? <SCRIPT?src="http://www.google.com/jsapi"></SCRIPT> ??

3.?????? <SCRIPT?type=text/javascript>??

4.?????? google.load("jquery",?"1.2.6");??

5.?????? google.setOnLoadCallback(function()?{??

6.?????? ????//?do?something??

7.?????? });??

8.?????? </SCRIPT><SCRIPT?src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"?type=text/javascript></SCRIPT> ??

9.?????? ??

10.?? ?//?Example?2:(the?best?and?fastest?way) ??

11.?? <SCRIPT?src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"?type=text/javascript></SCRIPT>??

?

25. 禁用Jquery（動畫）效果

view plaincopy to clipboardprint?

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

2.?????? ????jQuery.fx.off?=?true; ??

3.?????? });??

26. 與其他Javascript類庫沖突解決方案

view plaincopy to clipboardprint?

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

2.?????? ???var?$jq?=?jQuery.noConflict(); ??

3.?????? ???$jq('#id').show(); ??

4.?????? });??

?

英文地址：

http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/

?

轉載于:https://www.cnblogs.com/OSoft/archive/2010/03/01/1675570.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的转：26个Jquery使用小技巧(jQuery tips, tricks solutions)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。