常见26个jquery使用技巧详解

本文列出jquery一些应用小技巧,比如有禁止右键点击、隐藏搜索文本框文 字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元 素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类 库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
请看下文jquery技巧:
1、禁止右键点击
       (document).ready(function()$(document).bind("contextmenu",function(e)returnfalse;););2(document).ready(function() {   
       ("input.text1").val("Enteryoursearchtexthere");textFill(('input.text1'));   
       });   
         
           function textFill(input){ //input focus text function   
           var originalvalue = input.val();   
           input.focus( function(){   
               if( .trim(input.val()) == originalvalue ){ input.val(''); }           });           input.blur( function(){               if( $.trim(input.val()) == '' ){ input.val(originalvalue); }           });       }  3、 在新窗口中打开链接(document).ready(function() {   
          //Example 1: Every link will open in a new window   
          $('a[href^="http://"]').attr("target", "_blank");   
         
          //Example 2: Links with the rel="external" attribute will only open in a new window   
          (a[@rel='external']').click(function(){   
             this.target = "_blank";   
          });   
       });   
   // how to use   
   <A href="http://huhaiqia.blog.163.com/blog/http://www.opensourcehunter.com" rel=external>open link</A> 
4、检测浏览器注: 在版本jQuery 1.4中,.support.browser 变量。
       (document).ready(function() {           // Target Firefox 2 and above           if ($.browser.mozilla && $.browser.version >= "1.8" ){               // do something           }                     // Target Safari           if( $.browser.safari ){               // do something       }             // Target Chrome       if( $.browser.chrome){           // do something       }             // Target Camino       if( $.browser.camino){           // do something       }             // Target Opera       if( $.browser.opera){           // do something       }             // Target IE6 and below       if ($.browser.msie && $.browser.version <= 6 ){           // do something       }             // Target anything above IE6       if ($.browser.msie && $.browser.version > 6){           // do something       }       });  5、预加载图片(document).ready(function() {   
          jQuery.preloadImages = function()   
         {   
            for(var i = 0; i").attr("src", arguments[i]); 
         } 
       }; 
       // how to use 
       .preloadImages("image1.jpg");           });  6、页面样式切换(document).ready(function() {   
           ("a.Styleswitcher").click(function() {                   //swicth the LINK REL attribute with the value in A REL attribute                   $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));               });           // how to use           // place this in your header           <LINK href="http://huhaiqia.blog.163.com/blog/default.css" type=text/css rel=stylesheet>           // the links       <A class=Styleswitcher href="http://huhaiqia.blog.163.com/blog/#" rel=default.css>Default Theme</A>       <A class=Styleswitcher href="http://huhaiqia.blog.163.com/blog/#" rel=red.css>Red Theme</A>       <A class=Styleswitcher href="http://huhaiqia.blog.163.com/blog/#" rel=blue.css>Blue Theme</A>       });  7、列高度相同如果使用了两个CSS列,使用此种方式可以是两列的高度相同。(document).ready(function() {   
       function equalHeight(group) {   
           tallest = 0;   
           group.each(function() {   
               thisHeight = (this).height();                   if(thisHeight > tallest) {                       tallest = thisHeight;                   }               });           group.height(tallest);       }       // how to use(document).ready(function() {   
       equalHeight((".left"));equalHeight((".right"));   
   });   
   }); 
8、 动态控制页面字体大小用户可以改变页面字体大小
       $(document).ready(function() {   
         // Reset the font size(back to default)   
         var originalFontSize = (html).css(fontsize);(".resetFont").click(function(){   
           ('html').css('font-size', originalFontSize);             });             // Increase the font size(bigger font0(".increaseFont").click(function(){   
           var currentFontSize = (html).css(fontsize);varcurrentFontSizeNum=parseFloat(currentFontSize,10);varnewFontSize=currentFontSizeNum1.2;('html').css('font-size', newFontSize);   
       return false;   
     });   
     // Decrease the font size(smaller font)   
     $(".decreaseFont").click(function(){   
       var currentFontSize = (html).css(fontsize);varcurrentFontSizeNum=parseFloat(currentFontSize,10);varnewFontSize=currentFontSizeNum0.8;('html').css('font-size', newFontSize);   
       return false;   
     });   
   });


9、返回页面顶部功能
       (document).ready(function() {           $('a[href*=#]').click(function() {            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')            && location.hostname == this.hostname) {              var $target = $(this.hash);              $target = $target.length && $target              || $('[name=' + this.hash.slice(1) +']');              if ($target.length) {             var targetOffset = $target.offset().top;         $('html,body')         .animate({scrollTop: targetOffset}, 900);           return false;          }         }         });       // how to use       // place this where you want to scroll to       <A name=top></A>       // the link       <A href="http://huhaiqia.blog.163.com/blog/#top">go to top</A>       });  10、获得鼠标指针XY值(document).ready(function() {   
          ().mousemove(function(e){                //display the x and y axis values inside the div with the id XY               $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);             });           // how to use           <DIV id=XY></DIV>                     });  11、验证元素是否为空(document).ready(function() {   
         if (('#id').html()) {              // do something              }           });  12、替换元素(document).ready(function() {   
          ('#id').replaceWith('         <DIV>I have been replaced</DIV>                  ');           });  13、jQuery延时加载功能(document).ready(function() {   
          window.setTimeout(function() {   
            // do something   
          }, 1000);   
       }); 
14、 移除单词功能
       (document).ready(function() {              var el = $('#id');              el.html(el.html().replace(/word/ig, ""));           });  15、验证元素是否存在于Jquery对象集合中(document).ready(function() {   
          if (('#id').length) {             // do something             }           });  16、使整个DIV可点击(document).ready(function() {   
           ("div").click(function(){                 //get the url from href attribute and launch the url                 window.location=$(this).find("a").attr("href"); return false;               });           // how to use           <DIV><A href="http://huhaiqia.blog.163.com/blog/index.html">home</A></DIV>                     });  17、ID与Class之间转换当改变Window大小时,在ID与Class之间切换(document).ready(function() {   
          function checkWindowSize() {   
           if ( (window).width() > 1200 ) {                   $('body').addClass('large');               }               else {                   $('body').removeClass('large');               }              }(window).resize(checkWindowSize);   
   });


18、克隆对象
       (document).ready(function() {              var cloned = $('#id').clone();           // how to use           <DIV id=id></DIV>                     });  18、使元素居屏幕中间位置(document).ready(function() {   
         jQuery.fn.center = function () {   
             this.css("position","absolute");   
             this.css("top", ( (window).height()this.height())/2+(window).scrollTop() + "px"); 
             this.css("left", ( (window).width()this.width())/2+(window).scrollLeft() + "px");   
             return this;   
         }   
         ("#id").center();           });  19、写自己的选择器(document).ready(function() {   
          .extend(.expr[':'], {   
              moreThen1000px: function(a) {   
                  return (a).width() > 1000;                 }              });('.box:moreThen1000px').click(function() {   
             // creating a simple js alert box   
             alert('The element that you have clicked is over 1000 pixels wide');   
     });   
   }); 
20、统计元素个数
       (document).ready(function()$("p").size(););21使Bullets(document).ready(function() {   
          ("ul").addClass("Replaced");("ul > li").prepend("? ");   
        // how to use   
        ul.Replaced { list-style : none; }   
       }); 
22、引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.

       //Example 1   
       <SCRIPT src="http://huhaiqia.blog.163.com/blog/http://www.google.com/jsapi"></SCRIPT>   
       <SCRIPT type=text/javascript> 
       google.load("jquery", "1.2.6"); 
       google.setOnLoadCallback(function() { 
           // do something 
       }); 
       </SCRIPT><SCRIPT src="http://huhaiqia.blog.163.com/blog/http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>   
         
    // Example 2:(the best and fastest way)   
   <SCRIPT src="http://huhaiqia.blog.163.com/blog/http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT> 
23、禁用Jquery(动画)效果
       (document).ready(function()jQuery.fx.off=true;);24Javascript(document).ready(function() {   
          var jq=jQuery.noConflict();jq('#id').show();   
       });

 

 

出处:http://www.cnblogs.com/ajunForNet/p/3529638.html

posted on   jack_Meng  阅读(2484)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2015-06-14 bat echo 输出不同的文字颜色和背景色
2014-06-14 Eclipse添加中文javadoc

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩