常见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、 隐藏搜索文本框文字

01 $(document).ready(function() {
02 $("input.text1").val("Enter  your search text here");
03 textFill($('input.text1'));
04 });
05
06 function textFill(input){ //input  focus text function
07 var originalvalue = input.val();
08 input.focus( function(){
09 if( $.trim(input.val())  == originalvalue ){ input.val(''); }
10 });
11 input.blur( function(){
12 if( $.trim(input.val()) == ''  ){ input.val(originalvalue); }
13 });
14 }

3、 在 新窗口中打开链接

01 $(document).ready(function()  {
02 //Example 1: Every link will open in a new window
03 $('a[href^="<a href="http://%22]%27%29.attr%28%22target/">http://"]').attr("target</a>","_blank");
04
05 //Example 2: Links  with the rel="external" attribute will only open in a new window
06 $('a[@rel$='external']').click(function(){
07 this.target = "_blank";
08 });
09 });
10 //  how to use
11 <A href="<a href="http://www.opensourcehunter.com/">http://www.opensourcehunter.com</a>" rel=external>open link</A>

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

01 $(document).ready(function()  {
02 // Target Firefox 2 and above
03 if  ($.browser.mozilla && $.browser.version >= "1.8" ){
04 // do something
05 }
06
07 // Target  Safari
08 if( $.browser.safari ){
09 // 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 });

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、页面样式切换

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

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

01 $(document).ready(function() {
02 function equalHeight(group)  {
03 tallest = 0;
04 group.each(function()  {
05 thisHeight = $(this).height();
06 if(thisHeight > tallest) {
07 tallest =  thisHeight;
08 }
09 });
10 group.height(tallest);
11 }
12 // how to use
13 $(document).ready(function() {
14 equalHeight($(".left"));
15 equalHeight($(".right"));
16 });
17 });

8、 动态控制 页面字体大小用户可以改变页面字体大小

01 $(document).ready(function() {
02 // Reset the font  size(back to default)
03 var originalFontSize =  $('html').css('font-size');
04 $(".resetFont").click(function(){
05 $('html').css('font-size', originalFontSize);
06 });
07 // Increase the font size(bigger font0
08 $(".increaseFont").click(function(){
09 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、返回页面顶部功能

01 $(document).ready(function() {
02 $('a[href*=#]').click(function() {
03 if  (location.pathname.replace(/^///,'') ==  this.pathname.replace(/^///,'')
04 &&  location.hostname == this.hostname) {
05 var $target =  $(this.hash);
06 $target = $target.length &&  $target
07 || $('[name=' + this.hash.slice(1) +']');
08 if ($target.length) {
09 var targetOffset =  $target.offset().top;
10 $('html,body')
11 .animate({scrollTop: targetOffset}, 900);