26 个 jQuery使用技巧

墨蓝 2022-05-15 04:21 162阅读 0赞

### [   ][Link 1] ###

分类： [ Script][Script] 2012-11-13 19:16  8923人阅读 [评论][Link 2](8) 收藏 [举报][Link 3]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $(document).ready(function()\{  
2.      $(document).bind("contextmenu",function(e)\{  
3.          return false;  
4.      \});  
5.  \});

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $(document).ready(function() \{  
2.    if ($('\#id').html()) \{  
3.     // do something  
4.     \}  
5.  \});

**13. 替换元素**（Replace a element）

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $(document).ready(function() \{  
2.     window.setTimeout(function() \{  
3.       // do something  
4.     \}, 1000);  
5.  \});

**15. 移除单词**（Remove a word）

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $(document).ready(function() \{  
2.     if ($('\#id').length) \{  
3.    // do something  
4.    \}  
5.  \});

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $(document).ready(function() \{  
2.     $("p").size();  
3.  \});

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $(document).ready(function() \{  
2.      jQuery.fx.off = true;  
3.  \});

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $(document).ready(function() \{  
2.     var $jq = jQuery.noConflict();  
3.     $jq('\#id').show();  
4.  \});

jquery 速查表：

![1352809413_6100.png][]

**参考推荐：**  
[jQuery][]  
[jQuery UI][]  
[14 days of jQuery][]  
[Learning jQuery][]  
[Cheatsheet jQuery 1.1.3][]  
[Improve your jQuery – 25 excellent tips][Improve your jQuery _ 25 excellent tips]

[Link 1]: http://blog.csdn.net/sunboy_2050/article/details/8179162
[Script]: http://blog.csdn.net/sunboy_2050/article/category/694817
[Link 2]: http://blog.csdn.net/sunboy_2050/article/details/8179162#comments
[Link 3]: http://blog.csdn.net/sunboy_2050/article/details/8179162#report
[view plain]: http://blog.csdn.net/sunboy_2050/article/details/8179162#
[1352809413_6100.png]: https://img-my.csdn.net/uploads/201211/13/1352809413_6100.png
[jQuery]: http://jquery.com/
[jQuery UI]: http://jqueryui.com/
[14 days of jQuery]: http://jquery14.com/
[Learning jQuery]: http://www.learningjquery.com/
[Cheatsheet jQuery 1.1.3]: http://www.javascripttoolbox.com/jquery/cheatsheet/
[Improve your jQuery _ 25 excellent tips]: http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 web前端35个jQuery小技巧！

废话不说直接代码，有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document)

约定不等于承诺〃/ 2022年08月22日 03:59/ 0 赞/ 173 阅读

相关 jQuery技巧

　iwms的讨论区用到了jQuery这个javascript开发框架，的确很方便，能节省不少开发时间。如果你还没用过jQuery，那一起来学习吧。一、简介 1.1

Myth丶恋晨/ 2022年08月13日 11:41/ 0 赞/ 141 阅读

相关 Douban的jquery使用技巧

[Douban的jquery使用技巧][Douban_jquery] Douban 是2.0 社区里面比较成功的一个产品, 里面ajax技术也做得不错, 把它的源码拿来研

逃离我推掉我的手/ 2022年08月12日 15:28/ 0 赞/ 149 阅读

相关 35 个 jQuery 小技巧

1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",

超、凢脫俗/ 2022年08月10日 04:49/ 0 赞/ 165 阅读

相关 jQuery使用技巧

禁止右键点击： $(document).ready(function(){ $(document).bind("contextmenu",function(

客官°小女子只卖身不卖艺/ 2022年08月02日 09:44/ 0 赞/ 137 阅读

相关 [分享]五个有用的jQuery技巧

导读：作为轻量级的JS库，jQuery随着JavaScrīpt脚本的大热而备受Web开发者亲睐。下文里技巧实现的效果虽然并不新鲜，但通过jQuery的封装，HTML实现了很大的

柔光的暖阳◎/ 2022年06月14日 05:18/ 0 赞/ 235 阅读

相关 jquery使用技巧总结

jquery使用技巧总结一、简介 1.1、概述随着WEB2.0及[ajax][]思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的

冷不防/ 2022年05月25日 23:53/ 0 赞/ 212 阅读

相关 26 个 jQuery使用技巧

[ ][Link 1] 分类： [ Script][Script] 2012-11-13 19:16 8923人阅读 [评论][Link 2](8) 收藏 [举报]

墨蓝/ 2022年05月15日 04:21/ 0 赞/ 163 阅读

相关打印26个字母

/ 打印26个字母 / public class PrintCharacters { public static void main(Str

雨点打透心脏的1/2处/ 2022年05月14日 22:49/ 0 赞/ 196 阅读

相关几个ubuntu使用技巧

1、切换pip安装源在pip安装命令后面添加下面命令即可 `-i https://pypi.tuna.tsinghua.edu.cn/simple` 如安装op

矫情吗；*/ 2022年01月20日 23:59/ 0 赞/ 251 阅读