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

转自：http://www.cnblogs.com/ywqu/archive/2010/03/01/1675355.html

1. 禁止右键点击

view plaincopy to clipboardprint?

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

2. 隐藏搜索文本框文字


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2. $("input.text1").val("Enter your search text here");   
    3. 

  3.    textFill($('input.text1'));   
    4. 

  4. });   
    5. 

  5.   
    6. 

  6.     function textFill(input){ //input focus text function   
    7. 

  7.     var originalvalue = input.val();   
    8. 

  8.     input.focus( function(){   
    9. 

  9.         if( $.trim(input.val()) == originalvalue ){ input.val(''); }   
    10. 

  10.     });   
    11. 

  11.     input.blur( function(){   
    12. 

  12.         if( $.trim(input.val()) == '' ){ input.val(originalvalue); }   
    13. 

  13.     });   
    14. 

  14. }  
    15. 




3. 在新窗口中打开链接


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    //Example 1: Every link will open in a new window   
    3. 

  3.    $('a[href^="http://"]').attr("target", "_blank");   
    4. 

  4.   
    5. 

  5.    //Example 2: Links with the rel="external" attribute will only open in a new window   
    6. 

  6.    $('a[@rel$='external']').click(function(){   
    7. 

  7.       this.target = "_blank";   
    8. 

  8.    });   
    9. 

  9. });   
    10. 

  10. // how to use   
    11. 

  11. <A href="http://www.opensourcehunter.com" rel=external>open link</A>  
    12. 



4. 检测浏览器


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


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2. // Target Firefox 2 and above   
    3. 

  3. if ($.browser.mozilla && $.browser.version >= "1.8" ){   
    4. 

  4.     // do something   
    5. 

  5. }   
    6. 

  6.   
    7. 

  7. // Target Safari   
    8. 

  8. if( $.browser.safari ){   
    9. 

  9.     // do something   
    10. 

  10. }   
    11. 

  11.   
    12. 

  12. // Target Chrome   
    13. 

  13. if( $.browser.chrome){   
    14. 

  14.     // do something   
    15. 

  15. }   
    16. 

  16.   
    17. 

  17. // Target Camino   
    18. 

  18. if( $.browser.camino){   
    19. 

  19.     // do something   
    20. 

  20. }   
    21. 

  21.   
    22. 

  22. // Target Opera   
    23. 

  23. if( $.browser.opera){   
    24. 

  24.     // do something   
    25. 

  25. }   
    26. 

  26.   
    27. 

  27. // Target IE6 and below   
    28. 

  28. if ($.browser.msie && $.browser.version <= 6 ){   
    29. 

  29.     // do something   
    30. 

  30. }   
    31. 

  31.   
    32. 

  32. // Target anything above IE6   
    33. 

  33. if ($.browser.msie && $.browser.version > 6){   
    34. 

  34.     // do something   
    35. 

  35. }   
    36. 

  36. });  
    37. 



5. 预加载图片


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    jQuery.preloadImages = function()   
    3. 

  3.   {   
    4. 

  4.      for(var i = 0; i").attr("src", arguments[i]);  
    5. 

  5.   }  
    6. 

  6. };  
    7. 

  7. // how to use  
    8. 

  8. $.preloadImages("image1.jpg");   
    9. 

  9. });  
    10. 



6. 页面样式切换


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.     $("a.Styleswitcher").click(function() {   
    3. 

  3.         //swicth the LINK REL attribute with the value in A REL attribute   
    4. 

  4.         $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));   
    5. 

  5.     });   
    6. 

  6. // how to use   
    7. 

  7. // place this in your header   
    8. 

  8. <LINK href="default.css" type=text/css rel=stylesheet>   
    9. 

  9. // the links   
    10. 

  10. <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>   
    11. 

  11. <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>   
    12. 

  12. <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>   
    13. 

  13. });  
    14. 



7. 列高度相同


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


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2. function equalHeight(group) {   
    3. 

  3.     tallest = 0;   
    4. 

  4.     group.each(function() {   
    5. 

  5.         thisHeight = $(this).height();   
    6. 

  6.         if(thisHeight > tallest) {   
    7. 

  7.             tallest = thisHeight;   
    8. 

  8.         }   
    9. 

  9.     });   
    10. 

  10.     group.height(tallest);   
    11. 

  11. }   
    12. 

  12. // how to use   
    13. 

  13. $(document).ready(function() {   
    14. 

  14.     equalHeight($(".left"));   
    15. 

  15.     equalHeight($(".right"));   
    16. 

  16. });   
    17. 

  17. });  
    18. 



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


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


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.   // Reset the font size(back to default)   
    3. 

  3.   var originalFontSize = $('html').css('font-size');   
    4. 

  4.     $(".resetFont").click(function(){   
    5. 

  5.     $('html').css('font-size', originalFontSize);   
    6. 

  6.   });   
    7. 

  7.   // Increase the font size(bigger font0   
    8. 

  8.   $(".increaseFont").click(function(){   
    9. 

  9.     var currentFontSize = $('html').css('font-size');   
    10. 

  10.     var currentFontSizeNum = parseFloat(currentFontSize, 10);   
    11. 

  11.     var newFontSize = currentFontSizeNum*1.2;   
    12. 

  12.     $('html').css('font-size', newFontSize);   
    13. 

  13.     return false;   
    14. 

  14.   });   
    15. 

  15.   // Decrease the font size(smaller font)   
    16. 

  16.   $(".decreaseFont").click(function(){   
    17. 

  17.     var currentFontSize = $('html').css('font-size');   
    18. 

  18.     var currentFontSizeNum = parseFloat(currentFontSize, 10);   
    19. 

  19.     var newFontSize = currentFontSizeNum*0.8;   
    20. 

  20.     $('html').css('font-size', newFontSize);   
    21. 

  21.     return false;   
    22. 

  22.   });   
    23. 

  23. });  
    24. 



9. 返回页面顶部功能


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2. $('a[href*=#]').click(function() {   
    3. 

  3.  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')   
    4. 

  4.  && location.hostname == this.hostname) {   
    5. 

  5.    var $target = $(this.hash);   
    6. 

  6.    $target = $target.length && $target   
    7. 

  7.    || $('[name=' + this.hash.slice(1) +']');   
    8. 

  8.    if ($target.length) {   
    9. 

  9.   var targetOffset = $target.offset().top;   
    10. 

  10.   $('html,body')   
    11. 

  11.   .animate({scrollTop: targetOffset}, 900);   
    12. 

  12.     return false;   
    13. 

  13.    }   
    14. 

  14.   }   
    15. 

  15.   });   
    16. 

  16. // how to use   
    17. 

  17. // place this where you want to scroll to   
    18. 

  18. <A name=top></A>   
    19. 

  19. // the link   
    20. 

  20. <A href="#top">go to top</A>   
    21. 

  21. });  
    22. 



11.获得鼠标指针ＸＹ值


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    $().mousemove(function(e){   
    3. 

  3.      //display the x and y axis values inside the div with the id XY   
    4. 

  4.     $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);   
    5. 

  5.   });   
    6. 

  6. // how to use   
    7. 

  7. <DIV id=XY></DIV>   
    8. 

  8.   
    9. 

  9. });  
    10. 



12. 验证元素是否为空


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.   if ($('#id').html()) {   
    3. 

  3.    // do something   
    4. 

  4.    }   
    5. 

  5. });  
    6. 



13. 替换元素


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    $('#id').replaceWith('  
    3. 

  3. <DIV>I have been replaced</DIV>  
    4. 

  4.  
    5. 

  5. ');   
    6. 

  6. });  
    7. 




14. jQuery延时加载功能


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    window.setTimeout(function() {   
    3. 

  3.      // do something   
    4. 

  4.    }, 1000);   
    5. 

  5. });  
    6. 




15. 移除单词功能


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    var el = $('#id');   
    3. 

  3.    el.html(el.html().replace(/word/ig, ""));   
    4. 

  4. });  
    5. 




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


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    if ($('#id').length) {   
    3. 

  3.   // do something   
    4. 

  4.   }   
    5. 

  5. });  
    6. 




17. 使整个ＤＩＶ可点击


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.     $("div").click(function(){   
    3. 

  3.       //get the url from href attribute and launch the url   
    4. 

  4.       window.location=$(this).find("a").attr("href"); return false;   
    5. 

  5.     });   
    6. 

  6. // how to use   
    7. 

  7. <DIV><A href="index.html">home</A></DIV>   
    8. 

  8.   
    9. 

  9. });  
    10. 




18.ID与Class之间转换


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


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    function checkWindowSize() {   
    3. 

  3.     if ( $(window).width() > 1200 ) {   
    4. 

  4.         $('body').addClass('large');   
    5. 

  5.     }   
    6. 

  6.     else {   
    7. 

  7.         $('body').removeClass('large');   
    8. 

  8.     }   
    9. 

  9.    }   
    10. 

  10. $(window).resize(checkWindowSize);   
    11. 

  11. });  
    12. 




19. 克隆对象


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    var cloned = $('#id').clone();   
    3. 

  3. // how to use   
    4. 

  4. <DIV id=id></DIV>   
    5. 

  5.   
    6. 

  6. });  
    7. 




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


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.   jQuery.fn.center = function () {   
    3. 

  3.       this.css("position","absolute");   
    4. 

  4.       this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");   
    5. 

  5.       this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");   
    6. 

  6.       return this;   
    7. 

  7.   }   
    8. 

  8.   $("#id").center();   
    9. 

  9. });  
    10. 




21. 写自己的选择器


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    $.extend($.expr[':'], {   
    3. 

  3.        moreThen1000px: function(a) {   
    4. 

  4.            return $(a).width() > 1000;   
    5. 

  5.       }   
    6. 

  6.    });   
    7. 

  7.   $('.box:moreThen1000px').click(function() {   
    8. 

  8.       // creating a simple js alert box   
    9. 

  9.       alert('The element that you have clicked is over 1000 pixels wide');   
    10. 

  10.   });   
    11. 

  11. });  
    12. 






22. 统计元素个数


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    $("p").size();   
    3. 

  3. });  
    4. 




23. 使用自己的 Bullets


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    $("ul").addClass("Replaced");   
    3. 

  3.    $("ul > li").prepend("‒ ");   
    4. 

  4.  // how to use   
    5. 

  5.  ul.Replaced { list-style : none; }   
    6. 

  6. });  
    7. 




24. 引用Google主机上的Jquery类库


Let Google host the jQuery script for you. This can be done in 2 ways.


view plaincopy to clipboardprint?


    

  1. //Example 1   
    2. 

  2. <SCRIPT src="http://www.google.com/jsapi"></SCRIPT>   
    3. 

  3. <SCRIPT type=text/javascript>  
    4. 

  4. google.load("jquery", "1.2.6");  
    5. 

  5. google.setOnLoadCallback(function() {  
    6. 

  6.     // do something  
    7. 

  7. });  
    8. 

  8. </SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>   
    9. 

  9.   
    10. 

  10.  // Example 2:(the best and fastest way)   
    11. 

  11. <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>  
    12. 



 


25. 禁用Jquery（动画）效果


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.     jQuery.fx.off = true;   
    3. 

  3. });  
    4. 




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


view plaincopy to clipboardprint?


    

  1. $(document).ready(function() {   
    2. 

  2.    var $jq = jQuery.noConflict();   
    3. 

  3.    $jq('#id').show();   
    4. 

  4. });  
    5. 



 


英文地址：


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






            

            
posted @ 
2010-03-01 11:19 
宿远 
阅读(122) 
评论(0) 
编辑 
收藏 
举报