常见26个jquery运用技巧详

常见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. 隐藏搜索文本框文字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.   open link 4. 检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。1.       $(document).ready(function() {  2.       // Target Firefox 2 and above  3.       if ($.browser.mozilla && $.browser.version &gt;= "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 &lt;= 6 ){  29.       // do something  30.   }  31.    32.   // Target anything above IE6  33.   if ($.browser.msie && $.browser.version &gt; 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.         9.       // the links  10.   Default Theme  11.   Red Theme  12.   Blue Theme  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 &gt; 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.     19.   // the link  20.   go to top  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.        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.      I have been replaced 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.      home  8.        9.       }); 18.ID与Class之间转换当改变Window大小时，在ID与Class之间切换1.       $(document).ready(function() {  2.          function checkWindowSize() {  3.           if ( $(window).width() &gt; 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.        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() &gt; 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. 使用自己的 Bullets1.       $(document).ready(function() {  2.          $("ul").addClass("Replaced");  3.          $("ul &gt; 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.         3.         9.        10.    // Example 2:(the best and fastest way)  11.     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运用技巧详

热点推荐
