jQuery 非常强大且简单，只需要简单的学习就可以实现许多实用酷炫的 Javascript 特效，下面是在互联网上收集的35个 jQuery 小技巧（代码片段）。

1. 禁止右键点击

$(document).ready(function(){     $(document).bind("contextmenu",function(e){             return false;     }); });

2. 隐藏搜索文本框文字

Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(document).ready(function() { $("input.text1").val("Enter your search text here");    textFill($('input.text1')); });      function textFill(input){ //input focus text function      var originalvalue = input.val();      input.focus( function(){                if( $.trim(input.val()) == originalvalue ){ input.val(''); }      });      input.blur( function(){                if( $.trim(input.val()) == '' ){ input.val(originalvalue); }      }); }

3. 在新窗口中打开链接

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid. $(document).ready(function() {    //Example 1: Every link will open in a new window    $('a[href^=""]').attr("target", "_blank");     //Example 2: Links with the rel="external" attribute will only open in a new window    $('a[@rel$='external']').click(function(){          this.target = "_blank";    }); });// how to use <a href="" rel=external>open link</a>

4. 检测浏览器

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

$(document).ready(function() { // Target Firefox 2 and above if ($.browser.mozilla && $.browser.version >= "1.8" ){     // do something } // Target Safari if( $.browser.safari ){     // do something } // Target Chrome if( $.browser.chrome){     // do something } // Target Camino if( $.browser.camino){     // do something } // Target Opera if( $.browser.opera){     // do something } // Target IE6 and below if ($.browser.msie && $.browser.version <= 6 ){     // do something } // Target anything above IE6 if ($.browser.msie && $.browser.version > 6){     // do something } });

5. 预加载图片

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() { jQuery.preloadImages = function() {   for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);   } } // how to use $.preloadImages("image1.jpg"); });

6. 页面样式切换

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

7. 列高度相同