常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)

本文列出jquery一些应用小技巧，比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。

禁止右键点击

$(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 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); }   
 });   
}

在新窗口中打开链接

$(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   
open link

检测浏览器注: 在版本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   
}   
});

预加载图片

$(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   
    
// the links   
 Default Theme   
 Red Theme   
 Blue Theme   
});

列高度相同如果使用了两个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() {   
// Reset the font size(back to default)   
  var originalFontSize = $('html').css('font-size');   
  $(".resetFont").click(function(){   
  $('html').css('font-size', originalFontSize);   
 });   

// Increase the font size(bigger font0   
$(".increaseFont").click(function(){   
  var currentFontSize = $('html').css('font-size');   
  var currentFontSizeNum = parseFloat(currentFontSize, 10);   
  var newFontSize = currentFontSizeNum*1.2;   
  $('html').css('font-size', newFontSize);   
  return false;   
});   

// Decrease the font size(smaller font)   
$(".decreaseFont").click(function(){   
 var currentFontSize = $('html').css('font-size');   
 var currentFontSizeNum = parseFloat(currentFontSize, 10);   
 var newFontSize = currentFontSizeNum*0.8;   
 $('html').css('font-size', newFontSize);   
 return false;   
});