热门：网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置：.Net中文社区>> 实用代码>>正文内容

Jquery使用小技巧【推荐】

发布时间：2010年06月24日点击数： 次佚名

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


1. 禁止右键点击

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

2. 隐藏搜索文本框文字

  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. 在新窗口中打开链接

  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 变量。

  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. 预加载图片

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

  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列，使用此种方式可以是两列的高度相同。

  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. 动态控制页面字体大小

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

  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. 返回页面顶部功能

  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.获得鼠标指针ＸＹ值

  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. 验证元素是否为空

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

13. 替换元素

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

14. jQuery延时加载功能

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

15. 移除单词功能

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

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

  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. 克隆对象

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

  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. 统计元素个数

  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.

  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（动画）效果

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

 

英文地址：

http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作
本站部份资源来于互联网,只供学习之用,不得用于商业,如有侵犯版权请联系告知,本站将第一时间删除!
copyright © 2008-2010 .Net中文社区 ASPXCS.NET™.All Rights Reserved 滇ICP备08102132号