26个Jquery使用小技巧jQuery tips trickssolutions.docx

1、26个Jquery使用小技巧jQuery tips tricks solutions26个Jquery使用小技巧(jQuery tips, tricks & solutions)前段时间发布了Jquery类库1.4版本，使用者也越来越多，为了方便大家对Jquery的使用，下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Go

2、ogle主机上的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.te

3、xt1).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(

4、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. $(ahref=http:/).attr(target, _blank); 4. 5. /Example 2: Links with the rel=external attribute will only open in a n

5、ew window 6. $(arel$=external).click(function() 7. this.target = _blank; 8. ); 9. ); 10. / how to use 11. open link 4. 检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。view plaincopy to clipboardprint?1. $(document).ready(function() 2. / Target Firefox 2 and above 3. if ($.browser.mozilla & $.brows

6、er.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.ope

7、ra) 24. / do something 25. 26. 27. / Target IE6 and below 28. if ($.browser.msie & $.browser.version 6) 34. / do something 35. 36. ); 5. 预加载图片view plaincopy to clipboardprint?1. $(document).ready(function() 2. jQuery.preloadImages = function() 3. 4. for(var i = 0; i).attr(src, argumentsi); 5. 6. ; 7

8、. / how to use 8. $.preloadImages(image1.jpg); 9. ); 6. 页面样式切换view plaincopy to clipboardprint?1. $(document).ready(function() 2. $(a.Styleswitcher).click(function() 3. /swicth the LINK REL attribute with the value in A REL attribute 4. $(linkrel=stylesheet).attr(href , $(this).attr(rel); 5. ); 6. /

9、 how to use 7. / place this in your header 8. 9. / the links 10. Default Theme 11. Red Theme 12. Blue Theme 13. ); 7. 列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。view plaincopy to clipboardprint?1. $(document).ready(function() 2. function equalHeight(group) 3. tallest = 0; 4. group.each(function() 5. thisHeig

10、ht = $(this).height(); 6. if(thisHeight tallest) 7. tallest = thisHeight; 8. 9. ); 10. group.height(tallest); 11. 12. / how to use 13. $(document).ready(function() 14. equalHeight($(.left); 15. equalHeight($(.right); 16. ); 17. ); 8. 动态控制页面字体大小用户可以改变页面字体大小view plaincopy to clipboardprint?1. $(docume

11、nt).ready(function() 2. / Reset the font size(back to default) 3. var originalFontSize = $(html).css(font-size); 4. $(.resetFont).click(function() 5. $(html).css(font-size, originalFontSize); 6. ); 7. / Increase the font size(bigger font0 8. $(.increaseFont).click(function() 9. var currentFontSize =

12、 $(html).css(font-size); 10. var currentFontSizeNum = parseFloat(currentFontSize, 10); 11. var newFontSize = currentFontSizeNum*1.2; 12. $(html).css(font-size, newFontSize); 13. return false; 14. ); 15. / Decrease the font size(smaller font) 16. $(.decreaseFont).click(function() 17. var currentFontS

13、ize = $(html).css(font-size); 18. var currentFontSizeNum = parseFloat(currentFontSize, 10); 19. var newFontSize = currentFontSizeNum*0.8; 20. $(html).css(font-size, newFontSize); 21. return false; 22. ); 23. ); 9. 返回页面顶部功能view plaincopy to clipboardprint?1. $(document).ready(function() 2. $(ahref*=#

14、).click(function() 3. if (location.pathname.replace(/,) = this.pathname.replace(/,) 4. & location.hostname = this.hostname) 5. var $target = $(this.hash); 6. $target = $target.length & $target 7. | $(name= + this.hash.slice(1) +); 8. if ($target.length) 9. var targetOffset = $target.offset().top; 10

15、. $(html,body) 11. .animate(scrollTop: targetOffset, 900); 12. return false; 13. 14. 15. ); 16. / how to use 17. / place this where you want to scroll to 18. 19. / the link 20. go to top 21. ); 11.获得鼠标指针值view plaincopy to clipboardprint?1. $(document).ready(function() 2. $().mousemove(function(e) 3.

16、 /display the x and y axis values inside the div with the id XY 4. $(#XY).html(X Axis : + e.pageX + | Y Axis + e.pageY); 5. ); 6. / how to use 7. 8. 9. ); 12. 验证元素是否为空view plaincopy to clipboardprint?1. $(document).ready(function() 2. if ($(#id).html() 3. / do something 4. 5. ); 13. 替换元素view plainco

17、py to clipboardprint?1. $(document).ready(function() 2. $(#id).replaceWith( 3. I have been replaced 4. 5. ); 6. ); 14. jQuery延时加载功能view plaincopy to clipboardprint?1. $(document).ready(function() 2. window.setTimeout(function() 3. / do something 4. , 1000); 5. ); 15. 移除单词功能view plaincopy to clipboar

18、dprint?1. $(document).ready(function() 2. var el = $(#id); 3. el.html(el.html().replace(/word/ig, ); 4. ); 16. 验证元素是否存在于对象集合中view plaincopy to clipboardprint?1. $(document).ready(function() 2. if ($(#id).length) 3. / do something 4. 5. ); 17. 使整个可点击view plaincopy to clipboardprint?1. $(document).rea

19、dy(function() 2. $(div).click(function() 3. /get the url from href attribute and launch the url 4. window.location=$(this).find(a).attr(href); return false; 5. ); 6. / how to use 7. home 8. 9. ); 18.ID与Class之间转换当改变Window大小时，在ID与Class之间切换view plaincopy to clipboardprint?1. $(document).ready(function(

20、) 2. function checkWindowSize() 3. if ( $(window).width() 1200 ) 4. $(body).addClass(large); 5. 6. else 7. $(body).removeClass(large); 8. 9. 10. $(window).resize(checkWindowSize); 11. ); 19. 克隆对象view plaincopy to clipboardprint?1. $(document).ready(function() 2. var cloned = $(#id).clone(); 3. / how

21、 to use 4. 5. 6. ); 20. 使元素居屏幕中间位置view plaincopy to clipboardprint?1. $(document).ready(function() 2. jQuery.fn.center = function () 3. this.css(position,absolute); 4. this.css(top, ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + px); 5. this.css(left, ( $(window).width() - this.w

22、idth() ) / 2+$(window).scrollLeft() + px); 6. return this; 7. 8. $(#id).center(); 9. ); 21. 写自己的选择器view plaincopy to clipboardprint?1. $(document).ready(function() 2. $.extend($.expr:, 3. moreThen1000px: function(a) 4. return $(a).width() 1000; 5. 6. ); 7. $(.box:moreThen1000px).click(function() 8.

23、/ creating a simple js alert box 9. alert(The element that you have clicked is over 1000 pixels wide); 10. ); 11. ); 22. 统计元素个数view plaincopy to clipboardprint?1. $(document).ready(function() 2. $(p).size(); 3. ); 23. 使用自己的 Bulletsview plaincopy to clipboardprint?1. $(document).ready(function() 2. $

24、(ul).addClass(Replaced); 3. $(ul li).prepend( ); 4. / how to use 5. ul.Replaced list-style : none; 6. ); 24. 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.view plaincopy to clipboardprint?1. /Example 1 2. SCRIPT src= 3. 4. google.load(jquery, 1.2.6); 5. go

25、ogle.setOnLoadCallback(function() 6. / do something 7. ); 8. 9. 10. / Example 2:(the best and fastest way) 11. 25. 禁用Jquery（动画）效果view plaincopy to clipboardprint?1. $(document).ready(function() 2. jQuery.fx.off = true; 3. ); 26. 与其他Javascript类库冲突解决方案view plaincopy to clipboardprint?1. $(document).ready(function() 2. var $jq = jQuery.noConflict(); 3. $jq(#id).show(); 4. ); 英文地址：