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

 The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions. 

        jQuery has a lot of very useful plugins  that can help you with almost anything, but there are a couple of plugins that aren’t that smart to use, why? Well sometimes 1 or 2 lines of jQuery code can do the same thing(or even better), so why use a big script if you can do the same trick with a small piece of code. 

        As many of you already know, jQuery can do a lot of things in more than just one way, so if you see a tip, trick or solution and think/know this can be done better, smarter or faster please let me know, post and share it in a comment below of just email me this, so that i can use this for part 2. 

● Disable right-click(禁止右键点击) 
        Disable right-click contextual menu. 
Javascript代码  收藏代码
  1. $(document).ready(function(){  
  2.   $(document).bind("contextmenu"function(e) {  
  3.     return false;  
  4.   });  
  5. });  


● Disappearing search field text(隐藏搜索文本框文字) 
        Hide when clicked in the search field, the value.(example can be found below in the comment fields) 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   $("input.text1").val("Enter your search text here");  
  3.   textFill($('input.text1'));  
  4. });  
  5.   
  6. // input focus text function  
  7. function textFill(input) {  
  8.   var originalvalue = input.val();  
  9.   input.focus(function() {  
  10.     if( $.trim(input.val()) == originalvalue ) {  
  11.       input.val('');  
  12.     }  
  13.   });  
  14.   input.blur( function() {  
  15.     if( $.trim(input.val()) == '' ) {  
  16.       input.val(originalvalue);  
  17.     }  
  18.   });  
  19. }  


● Opening links in a new window(在新窗口中打开链接) 
        XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid. 
Javascript代码  收藏代码
  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>  


● Detect browser(检测浏览器) 
        Change/add something for a certain browser. 
        Notice: As of jQuery 1.4, the $.browser variable is replaced by $.support. 
Javascript代码  收藏代码
  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. });  


● Preloading images(预加载图片) 
        This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images. 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   jQuery.preloadImages = function() {  
  3.     for(var i = 0; i < arguments.length; i++) {  
  4.       $("<img>").attr("src", arguments[i]);  
  5.     }  
  6.   }  
  7.   
  8.   // how to use  
  9.   $.preloadImages("image1.jpg");  
  10. });  


● CSS Styleswitcher(页面样式切换) 
        Switch between different styles? 
Javascript代码  收藏代码
  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. });  
  7.   
  8. // how to use  
  9. // place this in your header  
  10. <link rel="stylesheet" href="default.css" type="text/css">  
  11. // the links  
  12. <a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>  
  13. <a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>  
  14. <a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>  


● Columns of equal height(列高度相同) 
        If you are using two CSS columns, use this to make them exactly the same height. 
Javascript代码  收藏代码
  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.   
  13.   // how to use  
  14.   $(document).ready(function() {  
  15.     equalHeight($(".left"));  
  16.     equalHeight($(".right"));  
  17.   });  
  18. });  


● Font resizing(动态控制页面字体大小) 
        Want to let the users change there font size? 
Javascript代码  收藏代码
  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.   
  8.   // Increase the font size(bigger font0  
  9.   $(".increaseFont").click(function() {  
  10.     var currentFontSize = $('html').css('font-size');  
  11.     var currentFontSizeNum = parseFloat(currentFontSize, 10);  
  12.     var newFontSize = currentFontSizeNum * 1.2;  
  13.     $('html').css('font-size', newFontSize);  
  14.     return false;  
  15.   });  
  16.   
  17.   // Decrease the font size(smaller font)  
  18.   $(".decreaseFont").click(function() {  
  19.     var currentFontSize = $('html').css('font-size');  
  20.     var currentFontSizeNum = parseFloat(currentFontSize, 10);  
  21.     var newFontSize = currentFontSizeNum*0.8;  
  22.     $('html').css('font-size', newFontSize);  
  23.     return false;  
  24.   });  
  25. });  


● Smooth(animated) page scroll(返回页面顶部功能) 
        For a smooth(animated) ride back to the top(or any location). 
Javascript代码  收藏代码
  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 || $('[name=' + this.hash.slice(1) +']');  
  7.      if ($target.length) {  
  8.        var targetOffset = $target.offset().top;  
  9.        $('html,body').animate( { scrollTop: targetOffset }, 900);  
  10.        return false;  
  11.      }  
  12.    }  
  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>  


● Get the mouse cursor x and y axis(获得鼠标指针 X/Y 值) 
        Want to know where your mouse cursor is? 
Javascript代码  收藏代码
  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. });  
  7.   
  8. // how to use  
  9. <div id="XY"></div>  


● Verify if an Element is empty(验证元素是否为空) 
        This will allow you to check if an element is empty. 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   if ($('#id').html()) {  
  3.     // do something  
  4.   }  
  5. });  


● Replace a element(替换元素) 
        Want to replace a div, or something else? 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   $('#id').replaceWith('<div>I have been replaced</div>');  
  3. });  


● jQuery timer callback functions(jQuery 延时加载功能) 
        Want to delay something? 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   window.setTimeout(function() {  
  3.     // do something  
  4.   }, 1000);  
  5. });  


● Remove a word(移除单词功能) 
        Want to remove a certain word(s)? 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   var el = $('#id');  
  3.   el.html(el.html().replace(/word/ig, ""));  
  4. });  


● Verify that an element exists in jQuery(验证元素是否存在) 
        Simply test with the .length property if the element exists. 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   if ($('#id').length) {  
  3.     // do something  
  4.   }  
  5. });  


● Make the entire DIV clickable(使整个 DIV 可点击) 
        Want to make the complete div clickable? 
Javascript代码  收藏代码
  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");  
  5.     return false;  
  6.   });  
  7. });  
  8.   
  9. // how to use  
  10. <div><a href="index.html">home</a></div>  


● Switch between classes or id’s when resizing the window(id 与 class 之间转换) 
        Want to switch between a class or id, when resizing the window? 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   function checkWindowSize() {  
  3.     if ( $(window).width() > 1200 ) {  
  4.       $('body').addClass('large');  
  5.     } else {  
  6.       $('body').removeClass('large');  
  7.     }  
  8.   }  
  9.   
  10.   $(window).resize(checkWindowSize);  
  11. });  


● Clone a object(克隆对象) 
        Clone a div or an other element. 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   var cloned = $('#id').clone();  
  3. });  
  4.   
  5. // how to use  
  6. <div id="id"></div>  


● Center an element on the screen(使元素居屏幕中间位置) 
        Center an element in the center of your screen. 
Javascript代码  收藏代码
  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. });  


● Write our own selector(写自己的选择器) 
        Write your own selectors. 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   $.extend($.expr[':'], {  
  3.       moreThen1000px: function(a) {  
  4.       return $(a).width() > 1000;  
  5.     }  
  6.   });  
  7.   
  8.   $('.box:moreThen1000px').click(function() {  
  9.     // creating a simple js alert box  
  10.     alert('The element that you have clicked is over 1000 pixels wide');  
  11.   });  
  12. });  


● Count a element(统计元素个数) 
        Count an element. 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   $("p").size();  
  3. });  


● Use Your Own Bullets(使用自己的 Bullets) 
        Want to use your own bullets instead of using the standard or images bullets? 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   $("ul").addClass("Replaced");  
  3.   $("ul > li").prepend("- ");  
  4. });  
  5.   
  6. // how to use  
  7. ul.Replaced { list-style : none; }  


● Let Google host jQuery for you(引用 Google 主机上的 jQuery 类库) 
        Let Google host the jQuery script for you. This can be done in 2 ways. 
Javascript代码  收藏代码
  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>  
  9.   
  10.  // Example 2:(the best and fastest way)  
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  


● Disable jQuery animations(禁用 jQuery 动画效果) 
        Disable all jQuery effects. 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   jQuery.fx.off = true;  
  3. });  


● No conflict-mode(与其他 Javascript 类库冲突解决方案) 
        To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign. 
Javascript代码  收藏代码
  1. $(document).ready(function() {  
  2.   var $jq = jQuery.noConflict();  
  3.   $jq('#id').show();  
  4. });  


没有更多推荐了,返回首页