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

前段时间发布了Jquery类库1.4版本，使用者也越来越多，为了方便大家对Jquery的使用，下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
具体如下：

1.禁止右键点击

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$(document).bind("contextmenu",function(e){
3.returnfalse;
4.});
5.});

2.隐藏搜索文本框文字[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$("input.text1").val("Enteryoursearchtexthere");
3.textFill($('input.text1'));
4.});
5.
6.functiontextFill(input){//inputfocustextfunction
7.varoriginalvalue=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.在新窗口中打开链接[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.//Example1:Everylinkwillopeninanewwindow
3.$('a[href^="http://"]').attr("target","_blank");
4.
5.//Example2:Linkswiththerel="external"attributewillonlyopeninanewwindow
6.$('a[@rel$='external']').click(function(){
7.this.target="_blank";
8.});
9.});
10.//howtouse
11.<Ahref="http://www.opensourcehunter.com"rel=external>openlink</A>

4.检测浏览器

注:在版本jQuery1.4中，$.support替换掉了$.browser变量。

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.//TargetFirefox2andabove
3.if($.browser.mozilla&&$.browser.version>="1.8"){
4.//dosomething
5.}
6.
7.//TargetSafari
8.if($.browser.safari){
9.//dosomething
10.}
11.
12.//TargetChrome
13.if($.browser.chrome){
14.//dosomething
15.}
16.
17.//TargetCamino
18.if($.browser.camino){
19.//dosomething
20.}
21.
22.//TargetOpera
23.if($.browser.opera){
24.//dosomething
25.}
26.
27.//TargetIE6andbelow
28.if($.browser.msie&&$.browser.version<=6){
29.//dosomething
30.}
31.
32.//TargetanythingaboveIE6
33.if($.browser.msie&&$.browser.version>6){
34.//dosomething
35.}
36.});

5.预加载图片

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.jQuery.preloadImages=function()
3.{
4.for(vari=0;i").attr("src",arguments[i]);
5.}
6.};
7.//howtouse
8.$.preloadImages("image1.jpg");
9.});

6.页面样式切换

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$("a.Styleswitcher").click(function(){
3.//swicththeLINKRELattributewiththevalueinARELattribute
4.$('link[rel=stylesheet]').attr('href',$(this).attr('rel'));
5.});
6.//howtouse
7.//placethisinyourheader
8.<LINKhref="default.css"type=text/cssrel=stylesheet>
9.//thelinks
10.<Aclass=Styleswitcherhref="#"rel=default.css>DefaultTheme</A>
11.<Aclass=Styleswitcherhref="#"rel=red.css>RedTheme</A>
12.<Aclass=Styleswitcherhref="#"rel=blue.css>BlueTheme</A>
13.});

7.列高度相同

如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.functionequalHeight(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.//howtouse
13.$(document).ready(function(){
14.equalHeight($(".left"));
15.equalHeight($(".right"));
16.});
17.});

8.动态控制页面字体大小

用户可以改变页面字体大小

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.//Resetthefontsize(backtodefault)
3.varoriginalFontSize=$('html').css('font-size');
4.$(".resetFont").click(function(){
5.$('html').css('font-size',originalFontSize);
6.});
7.//Increasethefontsize(biggerfont0
8.$(".increaseFont").click(function(){
9.varcurrentFontSize=$('html').css('font-size');
10.varcurrentFontSizeNum=parseFloat(currentFontSize,10);
11.varnewFontSize=currentFontSizeNum*1.2;
12.$('html').css('font-size',newFontSize);
13.returnfalse;
14.});
15.//Decreasethefontsize(smallerfont)
16.$(".decreaseFont").click(function(){
17.varcurrentFontSize=$('html').css('font-size');
18.varcurrentFontSizeNum=parseFloat(currentFontSize,10);
19.varnewFontSize=currentFontSizeNum*0.8;
20.$('html').css('font-size',newFontSize);
21.returnfalse;
22.});
23.});

9.返回页面顶部功能

viewplaincopytoclipboardprint?

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.vartargetOffset=$target.offset().top;
10.$('html,body')
11..animate({scrollTop:targetOffset},900);
12.returnfalse;
13.}
14.}
15.});
16.//howtouse
17.//placethiswhereyouwanttoscrollto
18.<Aname=top></A>
19.//thelink
20.<Ahref="#top">gototop</A>
21.});

11.获得鼠标指针ＸＹ值

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$().mousemove(function(e){
3.//displaythexandyaxisvaluesinsidethedivwiththeidXY
4.$('#XY').html("XAxis:"+e.pageX+"|YAxis"+e.pageY);
5.});
6.//howtouse
7.<DIVid=XY></DIV>
8.
9.});

12.验证元素是否为空

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.if($('#id').html()){
3.//dosomething
4.}
5.});

13.替换元素

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$('#id').replaceWith('
3.<DIV>Ihavebeenreplaced</DIV>
4.
5.');
6.});

14.jQuery延时加载功能[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.window.setTimeout(function(){
3.//dosomething
4.},1000);
5.});

15.移除单词功能[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.varel=$('#id');
3.el.html(el.html().replace(/word/ig,""));
4.});

16.验证元素是否存在于Ｊｑｕｅｒｙ对象集合中[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.if($('#id').length){
3.//dosomething
4.}
5.});

17.使整个ＤＩＶ可点击[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$("div").click(function(){
3.//gettheurlfromhrefattributeandlaunchtheurl
4.window.location=$(this).find("a").attr("href");returnfalse;
5.});
6.//howtouse
7.<DIV><Ahref="index.html">home</A></DIV>
8.
9.});

18.ID与Class之间转换[/code]
当改变Window大小时，在ID与Class之间切换

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.functioncheckWindowSize(){
3.if($(window).width()>1200){
4.$('body').addClass('large');
5.}
6.else{
7.$('body').removeClass('large');
8.}
9.}
10.$(window).resize(checkWindowSize);
11.});

19.克隆对象[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.varcloned=$('#id').clone();
3.//howtouse
4.<DIVid=id></DIV>
5.
6.});

20.使元素居屏幕中间位置[/code]
viewplaincopytoclipboardprint?

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.returnthis;
7.}
8.$("#id").center();
9.});

21.写自己的选择器[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$.extend($.expr[':'],{
3.moreThen1000px:function(a){
4.return$(a).width()>1000;
5.}
6.});
7.$('.box:moreThen1000px').click(function(){
8.//creatingasimplejsalertbox
9.alert('Theelementthatyouhaveclickedisover1000pixelswide');
10.});
11.});

22.统计元素个数[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$("p").size();
3.});

23.使用自己的Bullets[/code]
viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.$("ul").addClass("Replaced");
3.$("ul>li").prepend("‒");
4.//howtouse
5.ul.Replaced{list-style:none;}
6.});

24.引用Google主机上的Jquery类库[/code]
LetGooglehostthejQueryscriptforyou.Thiscanbedonein2ways.

viewplaincopytoclipboardprint?

1.//Example1
2.<SCRIPTsrc="http://www.google.com/jsapi"></SCRIPT>
3.<SCRIPTtype=text/javascript>
4.google.load("jquery","1.2.6");
5.google.setOnLoadCallback(function(){
6.//dosomething
7.});
8.</SCRIPT><SCRIPTsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type=text/javascript></SCRIPT>
9.
10.//Example2:(thebestandfastestway)
11.<SCRIPTsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type=text/javascript></SCRIPT>

25.禁用Jquery（动画）效果

viewplaincopytoclipboardprint?

1.$(document).ready(function(){
2.jQuery.fx.off=true;
3.});

26.与其他Javascript类库冲突解决方案[/code]
viewplaincopytoclipboardprint?

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/