26个Jquery使用小技巧(jQuery tips, tricks & solutions)
前段时间发布了Jquery类库1.4版本，使用者也越来越多，为了方便大家对Jquery的使用，下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
具体如下：
1. 禁止右键点击
view plaincopy to clipboardprint?
1. $(document).ready(function(){
2. $(document).bind("contextmenu",function(e){
3. returnfalse;
4. });
5. });
view plaincopy to clipboardprint?
1. $(document).ready(function(){
2. $("input.text1").val("Enteryoursearchtexthere");
3. textFill($('input.text1'));
4. });
5.
6. functiontextFill(input){//inputfocustextfunction
7. varoriginalvalue=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. }
view plaincopy to clipboardprint?
1. $(document).ready(function(){
2. //Example1:Everylinkwillopeninanewwindow
3. $('a[href^="http://"]').attr("target","_blank");
4.
5. //Example2:Linkswiththerel="external"attributewillonlyopeninanewwindow
6. $('a[@rel$='external']').click(function(){
7. this.target="_blank";
8. });
9. });
10. //howtouse
11. <Ahref="http://www.opensourcehunter.com"rel=external>openlink</A>
4. 检测浏览器
注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。
view plaincopy to clipboardprint?
1. $(document).ready(function(){
2. //TargetFirefox2andabove
3. if($.browser.mozilla&&$.browser.version>="1.8"){
4. //dosomething
5. }
6.
7. //TargetSafari
8. if($.browser.safari){
9. //dosomething
10. }
11.
12. //TargetChrome
13. if($.browser.chrome){
14. //dosomething
15. }
16.
17. //TargetCamino
18. if($.browser.camino){
19. //dosomething
20. }
21.
22. //TargetOpera
23. if($.browser.opera){
24. //dosomething
25. }
26.
27. //TargetIE6andbelow
28. if($.browser.msie&&$.browser.version<=6){
29. //dosomething
30. }
31.
32. //TargetanythingaboveIE6
33. if($.browser.msie&&$.browser.version>6){
34. //dosomething
35. }
36. });
5. 预加载图片
view plaincopy to clipboardprint?
1. $(document).ready(function(){
2. jQuery.preloadImages=function()
3. {
4. for(vari=0;i").attr("src",arguments[i]);
5. }
6. };
7. //howtouse
8. $.preloadImages("image1.jpg");
9. });
6. 页面样式切换
view plaincopy to clipboardprint?
1. $(document).ready(function(){
2. $("a.Styleswitcher").click(function(){
3. //swicththeLINKRELattributewiththevalueinARELattribute
4. $('link[rel=stylesheet]').attr('href',$(this).attr('rel'));
5. });
6. //h
评论