95598网站服务建设,轻芒小程序wordpress,比较专业的app开发公司,seo的优化方案26个Jquery使用小技巧(jQuery tips, tricks solutions) 前段时间发布了Jquery类库1.4版本#xff0c;使用者也越来越多#xff0c;为了方便大家对Jquery的使用#xff0c;下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接… 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. 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 relexternal 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 hrefhttp://www.opensourcehunter.com relexternalopen 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 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. }); 5. 预加载图片 view plaincopy to clipboardprint? 1. $(document).ready(function() { 2. jQuery.preloadImages function() 3. { 4. for(var i 0; i).attr(src, arguments[i]); 5. } 6. }; 7. // 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. $(link[relstylesheet]).attr(href , $(this).attr(rel)); 5. }); 6. // how to use 7. // place this in your header 8. LINK hrefdefault.css typetext/css relstylesheet 9. // the links 10. A classStyleswitcher href# reldefault.cssDefault Theme/A 11. A classStyleswitcher href# relred.cssRed Theme/A 12. A classStyleswitcher href# relblue.cssBlue Theme/A 13. }); 7. 列高度相同 如果使用了两个CSS列使用此种方式可以是两列的高度相同。 view plaincopy to clipboardprint? 1. $(document).ready(function() { 2. function equalHeight(group) { 3. tallest 0; 4. group.each(function() { 5. thisHeight $(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. $(document).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 $(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 currentFontSize $(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. $(a[href*#]).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. $(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. A nametop/A 19. // the link 20. A href#topgo to top/A 21. }); 11.获得鼠标指针值 view plaincopy to clipboardprint? 1. $(document).ready(function() { 2. $().mousemove(function(e){ 3. //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. DIV idXY/DIV 8. 9. }); 12. 验证元素是否为空 view plaincopy to clipboardprint? 1. $(document).ready(function() { 2. if ($(#id).html()) { 3. // do something 4. } 5. }); 13. 替换元素 view plaincopy to clipboardprint? 1. $(document).ready(function() { 2. $(#id).replaceWith( 3. DIVI have been replaced/DIV 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 clipboardprint? 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).ready(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. DIVA hrefindex.htmlhome/A/DIV 8. 9. }); 18.ID与Class之间转换 当改变Window大小时在ID与Class之间切换 view plaincopy to clipboardprint? 1. $(document).ready(function() { 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 to use 4. DIV idid/DIV 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.width() ) / 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. // 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. 使用自己的 Bullets view plaincopy to clipboardprint? 1. $(document).ready(function() { 2. $(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 srchttp://www.google.com/jsapi/SCRIPT 3. SCRIPT typetext/javascript 4. google.load(jquery, 1.2.6); 5. google.setOnLoadCallback(function() { 6. // do something 7. }); 8. /SCRIPTSCRIPT srchttp://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js typetext/javascript/SCRIPT 9. 10. // Example 2:(the best and fastest way) 11. SCRIPT srchttp://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js typetext/javascript/SCRIPT 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. }); 英文地址http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/ 转载于:https://www.cnblogs.com/OSoft/archive/2010/03/01/1675570.html
