前段时间发布了Jquery类库1.4版本，使用者也越来越多，为了方便大家对Jquery的使用，下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于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. }); |
