您的位置：首页 > Web前端 > JQuery

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

2010-03-01 09:23 579 查看
原文：/article/4754259.html

禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的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.});
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航