转：26个Jquery使用小技巧(jQuery tips, tricks solutions)
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. 使用自己的 Bulletsview 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)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： r语言如何下载carzip包本地安装_R
- 下一篇： java实现预览图片,点击实现下一张