26个Jquery使用小技巧(jQuery tips, tricks & solutions)

前段时间发布了Jquery类库1.4版本,使用者也越来越多,为了方便大家对Jquery的使用,下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的XY值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
具体如下:
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.   <A href="http://www.opensourcehunter.com" rel=external>open link</A>  
4. 检测浏览器
在版本jQuery 1.4中,$.support 替换掉了$.browser 变量。
1.       $(document).ready(function() {   
2.       // Target Firefox 2 and above   
3.       if ($.browser.mozilla && $.browser.version >= "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 <= 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.       });  

由于文章字数限制 其他内容请到http://www.cnblogs.com/ywqu/archive/2010/03/01/1675355.html 查看。










本文转自 灵动生活 51CTO博客,原文链接:http://blog.51cto.com/smartlife/279231,如需转载请自行联系原作者

上一篇:在Linux中打印函数调用堆栈【原创】


下一篇:第一次react-native项目实践要点总结 good