Jquery常用技巧收集整理篇

比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下：
禁止右键点击:

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

隐藏搜索文本框文:

$(document).ready(function() {$("input.text1").val("Enter your search text here");textFill($('input.text1'));});function textFill(input){ //input focus text functionvar originalvalue = input.val();input.focus( function(){if( $.trim(input.val()) == originalvalue ){ input.val(''); }});input.blur( function(){if( $.trim(input.val()) == '' ){ input.val(originalvalue); }});} 

在新窗口中打开链接:

$(document).ready(function() {//Example 1: Every link will open in a new window$('a[href^="http://"]').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="http://www.opensourcehunter.com" rel=external>open link</A> 

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

$(document).ready(function() {// Target Firefox 2 and aboveif ($.browser.mozilla && $.browser.version >= "1.8" ){// do something}// Target Safariif( $.browser.safari ){// do something}// Target Chromeif( $.browser.chrome){// do something}// Target Caminoif( $.browser.camino){// do something}// Target Operaif( $.browser.opera){// do something}// Target IE6 and belowif ($.browser.msie && $.browser.version <= 6 ){// do something}// Target anything above IE6if ($.browser.msie && $.browser.version > 6){// do something}}); 

预加载图片:

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

页面样式切换:

$(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 href="default.css" type=text/css rel=stylesheet>// 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>}); 

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

$(document).ready(function() {function equalHeight(group) {tallest = 0;group.each(function() {thisHeight = $(this).height();if(thisHeight > tallest) {tallest = thisHeight;}});group.height(tallest);}// how to use$(document).ready(function() {equalHeight($(".left"));equalHeight($(".right"));});}); 

验证元素是否为空
 

$(document).ready(function() {if ($('#id').html()) {// do something}}); 

替换元素

$(document).ready(function() {$('#id').replaceWith('<DIV>I have been replaced</DIV>);});