现在的位置: 首页 > 综合 > 正文

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

2011年03月16日 ⁄ 综合 ⁄ 共 1975字 ⁄ 字号 评论关闭

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

具体如下:

1. 禁止右键点击

view plaincopy to clipboardprint?

1.       $(document).ready(function(){   

2.           $(document).bind("contextmenu",function(e){   

3.               return false;   

4.           });   

5.       });  

2. 隐藏搜索文本框文字

view plaincopy to clipboardprint?

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. 在新窗口中打开链接

view plaincopy to clipboardprint?

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 变量。

view plaincopy to clipboardprint?

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   

【上篇】
【下篇】

抱歉!评论已关闭.