常见26个Jquery使用技巧（转）-阿里云开发者社区

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

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

2、隐藏搜索文本框文字

 
      01 
       $(document).ready(function() {  
     
      02 
       $("input.text1").val("Enter  your search text here");  
     
      03 
       textFill($('input.text1'));  
     
      04 
      }); 
     
      05 
        
      06 
       function textFill(input){ //input  focus text function  
     
      07 
       var originalvalue = input.val();  
     
      08 
       input.focus( function(){  
     
      09 
       if( $.trim(input.val())  == originalvalue ){ input.val(''); }  
     
      10 
      }); 
     
      11 
       input.blur( function(){  
     
      12 
       if( $.trim(input.val()) == ''  ){ input.val(originalvalue); }  
     
      13 
      }); 
     
      14 
      }

3、在新窗口中打开链接

 
      01 
       $(document).ready(function()  {  
     
      02 
      //Example 1: Every link will open in a new window 
     
      03 
       $('a[href^="<a href="http://%22]%27%29.attr%28%22target/">http://"]').attr("target</a>","_blank");  
     
      04 
        
      05 
      //Example 2: Links  with the rel="external" attribute will only open in a new window 
     
      06 
       $('a[@rel$='external']').click(function(){  
     
      07 
       this.target = "_blank";  
     
      08 
      }); 
     
      09 
      }); 
     
      10 
      //  how to use 
     
      11 
       <A href="<a href="http://www.opensourcehunter.com/">http://www.opensourcehunter.com</a>" rel=external>open link</A>

4、检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。

 
      01 
       $(document).ready(function()  {  
     
      02 
      // Target Firefox 2 and above 
     
      03 
       if  ($.browser.mozilla && $.browser.version >= "1.8" ){  
     
      04 
      // do something 
     
      05 
      } 
     
      06 
        
      07 
      // Target  Safari 
     
      08 
       if( $.browser.safari ){  
     
      09 
      // 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、预加载图片

 
      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、页面样式切换

 
      01 
       $(document).ready(function() {  
     
      02 
       $("a.Styleswitcher").click(function() {  
     
      03 
      //swicth  the LINK REL attribute with the value in A REL attribute 
     
      04 
       $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  
     
      05 
      }); 
     
      06 
      // how to use 
     
      07 
      // place this in your  header 
     
      08 
       <LINK href="default.css" type=text/css  rel=stylesheet>  
     
      09 
      // the links 
     
      10 
       <A  class=Styleswitcher href="#" rel=default.css>Default  Theme</A>  
     
      11 
       <A href="#"  rel=red.css>Red Theme</A>  
     
      12 
       <A  href="#" rel=blue.css>Blue Theme</A>  
     
      13 
      });

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

 
      01 
       $(document).ready(function() {  
     
      02 
       function equalHeight(group)  {  
     
      03 
      tallest = 0; 
     
      04 
       group.each(function()  {  
     
      05 
       thisHeight = $(this).height();  
     
      06 
       if(thisHeight > tallest) {  
     
      07 
      tallest =  thisHeight; 
     
      08 
      } 
     
      09 
      }); 
     
      10 
      group.height(tallest); 
     
      11 
      } 
     
      12 
      // how to use 
     
      13 
       $(document).ready(function() {  
     
      14 
       equalHeight($(".left"));  
     
      15 
       equalHeight($(".right"));  
     
      16 
      }); 
     
      17 
      });

8、动态控制页面字体大小用户可以改变页面字体大小

 
      01 
       $(document).ready(function() {  
     
      02 
      // Reset the font  size(back to default) 
     
      03 
       var originalFontSize =  $('html').css('font-size');  
     
      04 
       $(".resetFont").click(function(){  
     
      05 
       $('html').css('font-size', originalFontSize);  
     
      06 
      }); 
     
      07 
      // Increase the font size(bigger font0 
     
      08 
       $(".increaseFont").click(function(){  
     
      09 
       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、返回页面顶部功能

 
      01 
       $(document).ready(function() {  
     
      02 
       $('a[href*=#]').click(function() {  
     
      03 
       if  (location.pathname.replace(/^///,'') ==  this.pathname.replace(/^///,'')  
     
      04 
       &&  location.hostname == this.hostname) {  
     
      05 
       var $target =  $(this.hash);  
     
      06 
      $target = $target.length &&  $target 
     
      07 
       || $('[name=' + this.hash.slice(1) +']');  
     
      08 
       if ($target.length) {  
     
      09 
       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 
      });

10、获得鼠标指针ＸＹ值

 
      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 
      });

11、验证元素是否为空

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

12、替换元素

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

13、jQuery延时加载功能

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

14、移除单词功能

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

16、验证元素是否存在于Ｊｑｕｅｒｙ对象集合中

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

17、使整个ＤＩＶ可点击

 
      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"); returnfalse;  
     
      5 
      }); 
     
      6 
      // how to use 
     
      7 
       <DIV><A  href="index.html">home</A></DIV>  
     
      8 
        
      9 
      });

18、ID与 Class之间转换当改变Window大小时，在ID与Class之间切换

 
      01 
       $(document).ready(function() {  
     
      02 
       function  checkWindowSize() {  
     
      03 
       if ( $(window).width() > 1200 )  {  
     
      04 
       $('body').addClass('large');  
     
      05 
      } 
     
      06 
       else {  
     
      07 
       $('body').removeClass('large');  
     
      08 
      } 
     
      09 
      } 
     
      10 
      $(window).resize(checkWindowSize); 
     
      11 
      });

19、克隆对象

 
      1 
       $(document).ready(function() {  
     
      2 
       var  cloned = $('#id').clone();  
     
      3 
      // how to use 
     
      4 
      <DIV id=id></DIV> 
     
      5 
        
      6 
      });

20、使元素居屏幕中间位置

 
      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、写自己的选择器

 
      01 
       $(document).ready(function() {  
     
      02 
       $.extend($.expr[':'], {  
     
      03 
       moreThen1000px: function(a) {  
     
      04 
       return $(a).width() > 1000;  
     
      05 
      } 
     
      06 
      }); 
     
      07 
       $('.box:moreThen1000px').click(function() {  
     
      08 
      // creating a simple js alert box 
     
      09 
       alert('The element  that you have clicked is over 1000 pixels wide');  
     
      10 
      }); 
     
      11 
      });

22、统计元素个数

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

23、使用自己的 Bullets

 
      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.

 
      01 
      //Example 1 
     
      02 
       <SCRIPT src="<a href="http://www.google.com/jsapi%22%3E%3C/SCRIPT">http://www.google.com/jsapi"></SCRIPT</a>>  
     
      03 
      <SCRIPT type=text/javascript> 
     
      04 
       google.load("jquery", "1.2.6");  
     
      05 
       google.setOnLoadCallback(function() {  
     
      06 
      // do something 
     
      07 
      }); 
     
      08 
       </SCRIPT><SCRIPT src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js</a>"  type=text/javascript></SCRIPT>  
     
      09 
        
      10 
      //  Example 2:(the best and fastest way) 
     
      11 
       <SCRIPT src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js</a>"  type=text/javascript></SCRIPT>

25、禁用Jquery（动画）效果

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

26、与其他Javascript类库冲突解决方案

 
      1 
       $(document).ready(function() {  
     
      2 
       var $jq = jQuery.noConflict();  
     
      3 
       $jq('#id').show();  
     
      4 
      });

常见26个Jquery使用技巧（转）

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

常见26个Jquery使用技巧（转）

热门文章

最新文章

相关课程

相关电子书