26 个 jQuery使用技巧

最新推荐文章于 2017-01-09 14:20:00 发布
最新推荐文章于 2017-01-09 14:20:00 发布
阅读量381 收藏
点赞数
分类专栏： js学习

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.



1. 禁用右键点击 （Disable right-click）

[javascript]  view plain copy print ?
  1. $(document).ready(function(){  
  2.     $(document).bind("contextmenu",function(e){  
  3.         return false;  
  4.     });  
  5. });  


2. 禁用搜索文本框（Disappearing search field text）

[javascript]  view plain copy print ?
  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. 新窗口打开链接（Opening links in a new window）

[javascript]  view plain copy print ?
  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. 检测浏览器（Detect browser）

[javascript]  view plain copy print ?
  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. 预加载图片（Preloading images）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2. jQuery.preloadImages = function()  
  3. {  
  4.   for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);  
  5.   }  
  6. }  
  7. // how to use  
  8. $.preloadImages("image1.jpg");  
  9. });  
  10. </arguments.length;>  


6. 样式筛选（CSS Style switcher）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.     $("a.Styleswitcher").click(function() {  
  3.         //swicth the LINK REL attribute with the value in A REL attribute  
  4.         $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  
  5.     });  
  6. // how to use  
  7. // place this in your header  
  8. <link rel="stylesheet" href="default.css" type="text/css">  
  9. // the links  
  10. <a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>  
  11. <a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>  
  12. <a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>  
  13. });  


7. 列高度相同（Columns of equal height）

[javascript]  view plain copy print ?
  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. 字体大小调整（Font resizing）

[javascript]  view plain copy print ?
  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. 返回页面顶部（Smooth(animated) page scroll）

[javascript]  view plain copy print ?
  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 name="top"></a>  
  19. // the link  
  20. <a href="#top">go to top</a>  
  21. });  



11. 获取鼠标的xy坐标（Get the mouse cursor x and y axis）

[javascript]  view plain copy print ?
  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 id="XY"></div>  
  8.   
  9. });  



12. 验证元素是否为空（Verify if an Element is empty）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.   if ($('#id').html()) {  
  3.    // do something  
  4.    }  
  5. });  

13. 替换元素（Replace a element）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.    $('#id').replaceWith('  
  3. <div>I have been replaced</div>  
  4.   
  5. ');  
  6. });  

14. 延迟加载（jQuery timer callback functions）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.    window.setTimeout(function() {  
  3.      // do something  
  4.    }, 1000);  
  5. });  

15. 移除单词（Remove a word）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.    var el = $('#id');  
  3.    el.html(el.html().replace(/word/ig, ""));  
  4. });  

16. 验证元素是否存在（Verify that an element exists in jQuery）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.    if ($('#id').length) {  
  3.   // do something  
  4.   }  
  5. });  

17. 使整个DIV可点击（Make the entire DIV clickable）

[javascript]  view plain copy print ?
  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. <div><a href="index.html">home</a></div>  
  8.   
  9. });  

18. id和class切换（Switch between classes or id’s when resizing the window）

[javascript]  view plain copy print ?
  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. 克隆对象（Clone a object）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.    var cloned = $('#id').clone();  
  3. // how to use  
  4. <div id="id"></div>  
  5.   
  6. });  


20. 使元素居中屏幕（Center an element on the screen）

[javascript]  view plain copy print ?
  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. 自定义选择器（Write our own selector）

[javascript]  view plain copy print ?
  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. 统计元素个数（Count a element）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.    $("p").size();  
  3. });  


23. 自定义Bullets（Use Your Own Bullets）

[javascript]  view plain copy print ?
  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 jQuery for you）

[javascript]  view plain copy print ?
  1. //Example 1  
  2. <script src="http://www.google.com/jsapi"></script>  
  3. <script type="text/javascript">  
  4. google.load("jquery", "1.2.6");  
  5. google.setOnLoadCallback(function() {  
  6.     // do something  
  7. });  
  8. </script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>  
  9.   
  10.  // Example 2:(the best and fastest way)  
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  


25. 禁用jQuery动画（Disable jQuery animations）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.     jQuery.fx.off = true;  
  3. });  


26. 防止不兼容冲突（No conflict-mode）

[javascript]  view plain copy print ?
  1. $(document).ready(function() {  
  2.    var $jq = jQuery.noConflict();  
  3.    $jq('#id').show();  
  4. });  


jquery 速查表：

少年音
关注
专栏目录
小说《疯狂的程序员》~经典语录
Struggle For Network Security
04-25 1398
1.要么做第一个，要么做最好的一个。2.什么是鸡肋课？就是每个人都在自己课表的这门课旁边标注一个“可旷”或者“选修”。3.什么程序优化啊，都抵不上有钱，有钱就是最好的优化。说什么“效率就是金钱”，其实“金钱就是效率”。4.中国人和外国人很大不同就在于外国人总想热衷于第一时间把自己的新发现公布出来以此向广大人民群众展示自己的水平。中国人往往喜欢把自己的新发现阴在心里，自己偷偷垄断享用。唯恐被
jquery 小技巧
人工智能
11-16 565
1. 禁用右键点击（Disable right-click） [javascript] view plaincopyprint? $(document).ready(function(){      $(document).bind("contextmenu",function(e){          return false;      });  });
26 个 JQuery 使用小技巧(jQuery tips, tricks & solutions)(zz)
weixin_34050005的博客
03-17 159
The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips,...
前端常用技巧整理
weixin_30237281的博客
01-09 132
1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; });});2. 隐藏搜索文本框文字Hide when clicked in the search field, the value.(example can be f...
疯狂的程序员--绝影
dengmaobang1626的博客
04-09 420
　　该博客转自新浪博客，作者：疯狂之桥 网址： http://blog.sina.cn/dpool/blog/s/blog_a46817ff010157cf.html?vt=4 　　今天看到绝影的CSDN博客由于种种原因被关闭了，心中有种说不出的感觉....感谢在我还是大二的时候遇到了《疯狂的程序员》 　　（已下是转自内容） 　　朋友介绍说看看《疯狂的程序员》这本书吧！说实话，自从...
jQuery使用技巧
菜鸟葫芦娃
01-02 2183
jquery使用技巧
26个Jquery使用技巧（值得收藏）
ykblog.github.io
01-02 1422
下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery
jquery使用技巧总结
03-17
本文将深入探讨jQuery的使用技巧，帮助开发者提升效率，更好地驾驭这个强大的工具。 1. **选择器的高效运用** jQuery的选择器功能强大，能快速定位DOM元素。例如，`$("#id")`用于选取ID为指定值的元素，`$(".class...
Jquery使用小技巧汇总
11-22
【jQuery使用小技巧汇总】 jQuery 是一个非常强大的 JavaScript 库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。以下是一些实用的jQuery小技巧，帮助你提高开发效率和用户体验。 1. **禁止右键点击** ...
matplotlib-3.6.3-cp39-cp39-linux_armv7l.whl
最新发布
11-18
matplotlib-3.6.3-cp39-cp39-linux_armv7l.whl
numpy-2.0.1-cp39-cp39-linux_armv7l.whl
11-18
numpy-2.0.1-cp39-cp39-linux_armv7l.whl
jQuery实用技巧大全：26个高效操作示例
"这篇文章主要汇总了26个jQuery使用的小技巧，涵盖了各种实用的功能，如禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、浏览器检测、图片预加载、页面样式切换等。适合需要提升jQuery技能的开发者参考学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值