jQuery 1.4实用技巧大放送

《jQuery 1.4实用技巧大放送》由会员分享，可在线阅读，更多相关《jQuery 1.4实用技巧大放送（11页珍藏版）》请在金锄头文库上搜索。

1、jQuery 1.4 实用技巧大放送jQuery 1.4 给开发者带来了很多值得兴奋的新特性，同时使用 jQuery 的人也越来越多，为了方便大家对 jQuery 的使用，下面列出了一些 jQuery 使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下：禁止右键点击1. $(document).ready(function() 2. $(document).bind(contextmenu,function(e) 3. return false; 4. ); 5. ); 隐藏搜索文本框文字1. $(document).ready(func

2、tion() 2. $(input.text1).val(Enter your search text here); 3. textFill($(input.text1); 4. ); 5. function textFill(input) /input focus text function 6. var originalvalue = input.val(); 7. input.focus( function() 8. 9. if( $.trim(input.val() = originalvalue ) input.val(); 10. ); 11. 12. input.blur( fu

3、nction() 13. if( $.trim(input.val() = ) input.val(originalvalue); 14. ); 15. 在新窗口中打开链接1. $(document).ready(function() 2. /Example 1: Every link will open in a new window 3. $(ahref=http:/).attr(target, _blank); 4. /Example 2: Links with the rel=external attribute will only open ina new window 5. $(a

4、rel$=external).click(function() 6. this.target = _blank; 7. ); 8. 9. ); 10. / how to use 11. open link 检测浏览器注: 在版本 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.

5、/ Target Safari 8. if( $.browser.safari ) 9. / do something 10. 11. / Target Chrome 12. if( $.browser.chrome) 13. / do something 14. 15. 16. / Target Camino 17. if( $.browser.camino) 18. / do something 19. 20. 21. / Target Opera 22. if( $.browser.opera) 23. / do something 24. 25. 26. / Target IE6 an

6、d below 27. if ($.browser.msie & $.browser.version 6) 33. / do something 34. 35. ); 预加载图片1. $(document).ready(function() 2. 3. jQuery.preloadImages = function() 4. 5. for(var i = 0; i).attr(src, argumentsi); 6. 7. 8. ; 9. / how to use 10. $.preloadImages(image1.jpg); 11. ); 页面样式切换1. $(document).read

7、y(function() 2. 3. $(a.Styleswitcher).click(function() 4. /swicth the LINK REL attribute with the value in A REL attribute 5. $(linkrel=stylesheet).attr(href , $(this).attr(rel); 6. 7. ); 8. 9. / how to use 10. / place this in your header 11. 12. 13. / the links 14. Default Theme 15. Red Theme 16. B

8、lue Theme 17. ); 列高度相同如果使用了两个 CSS 列，使用此种方式可以是两列的高度相同。1. $(document).ready(function() 2. function equalHeight(group) 3. tallest = 0; 4. group.each(function() 5. 6. thisHeight = $(this).height(); 7. 8. if(thisHeight tallest) 9. 10. tallest = thisHeight; 11. 12. 13. 14. ); 15. 16. group.height(tallest)

9、; 17. 18. / how to use 19. $(document).ready(function() 20. 21. equalHeight($(.left); 22. 23. equalHeight($(.right); 24. 25. ); 26. 27. ); 动态控制页面字体大小1. $(document).ready(function() 2. 3. / Reset the font size(back to default) 4. var originalFontSize = $(html).css(font-size); 5. 6. $(.resetFont).clic

10、k(function() 7. $(html).css(font-size, originalFontSize); 8. 9. ); 10. 11. / Increase the font size(bigger font0 12. $(.increaseFont).click(function() 13. 14. var currentFontSize = $(html).css(font-size); 15. var currentFontSizeNum = parseFloat(currentFontSize, 10); 16. var newFontSize = currentFont

11、SizeNum*1.2; 17. 18. $(html).css(font-size, newFontSize); 19. 20. return false; 21. 22. ); 23. 24. / Decrease the font size(smaller font) 25. $(.decreaseFont).click(function() 26. 27. var currentFontSize = $(html).css(font-size); 28. var currentFontSizeNum = parseFloat(currentFontSize, 10); 29. var

12、newFontSize = currentFontSizeNum*0.8; 30. 31. $(html).css(font-size, newFontSize); 32. return false; 33. ); 34. ); 返回页面顶部功能1. $(document).ready(function() 2. $(ahref*=#).click(function() 3. if (location.pathname.replace(/,) = this.pathname.replace(/,) 4. & location.hostname = this.hostname) 5. var $

13、target = $(this.hash); 6. $target = $target.length & $target 7. | $(name= + this.hash.slice(1) +); 8. if ($target.length) 9. 10. var targetOffset = $target.offset().top; 11. 12. $(html,body) 13. .animate(scrollTop: targetOffset, 900); 14. return false; 15. 16. 17. 18. ); 19. 20. / how to use 21. / place this where you want to scroll to 22. 23. 24. 25. / the link 26. go to top 27. ); 获得鼠标指针 XY 值1. $(document).ready(function()