7个有用的jQuery代码片段分享

这篇文章主要介绍了7个有用的jQuery技巧分享,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下

jQuery是一款轻量级的JavaScript库，是最流行的客户端HTML脚本之一，它在WEB设计师和开发者中非常的有名，并且有非常多有用的插件和技术帮助WEB开发人员开发出有创意和漂亮的WEB页面。

今天我们为jQuery用户分享一些小技巧，这些技巧将帮助你提示你网站布局和应用的创意性和功能性。

一、在新窗口打开链接

用下面的代码，你点击链接即可在新窗口打开：

1. $(document).ready(function() { 
2. //select all anchor tags that have http in the href 
3. //and apply the target=_blank 
4. $("a[href^='http']").attr('target','_blank'); 
5. }); 

二、设置等高的列

应用下面的代码，可以使得你的WEB应用每一列高度都想等：

1. <div class="equalHeight" style="border:1px solid"> 
2. <p>First Line</p> 
3. <p>Second Line</p> 
4. <p>Third Line</p> 
5. </div> 
6. <div class="equalHeight" style="border:1px solid"> 
7. <p>Column Two</p> 
8. </div> 
9. <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> 
10. <script> 
11. $(document).ready(function() { 
12. equalHeight('.equalHeight'); 
13. }); 
14. //global variable, this will store the highest height value 
15. var maxHeight = 0; 
16. function equalHeight(col) { 
17. //Get all the element with class = col 
18. col = $(col); 
19. //Loop all the col 
20. col.each(function() { 
21. //Store the highest value 
22. if ($(this).height() > maxHeight) { 
23. maxHeight = $(this).height(); 
24. } 
25. }); 
26. //Set the height 
27. col.height(maxHeight); 
28. } 
29. </script> 

三、jQuery预加载图像

这个小技巧可以提升页面加载图片的速度：

1. jQuery.preloadImagesInWebPage = function() { 
2. for (var ctr = 0; ctr & lt; arguments.length; ctr++) { 
3. jQuery("").attr("src", arguments[ctr]); 
4. } 
5. } 
6. // 使用方法： 
7. $.preloadImages("image1.gif", "image2.gif", "image3.gif"); 
8. // 检查图片是否被加载 
9. $('#imageObject').attr('src', 'image1.gif').load(function() { 
10. alert('The image has been loaded…'); 
11. }); 

四、禁用鼠标右键

1. $(document).ready(function() { 
2. //catch the right-click context menu 
3. $(document).bind("contextmenu", function(e) { 
4. //warning prompt - optional 
5. alert("No right-clicking!"); 
6. //delete the default context menu 
7. return false; 
8. }); 
9. }); 

五、设定计时器

1. $(document).ready(function() { 
2. window.setTimeout(function() { 
3. // some code 
4. }, 500); 
5. }); 

六、计算子元素的个数

1. <div id="foo"> 
2. <div id="bar"></div> 
3. <div id="baz"> 
4. <div id="biz"></div> 
5. <span><span></span></span> 
6. </div> 
7. </div> 
8. <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> 
9. <script type="text/javascript"> 
10. //jQuery code to count child elements $("#foo > div").size() 
11. alert($("#foo > div").size()) 
12. </script> 

七、把元素定位到页面中间

1. <div id="foo" style="width:200px;height: 200px;background: #ccc;"></div> 
2. <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> 
3. <script type="text/javascript"> 
4. jQuery.fn.center = function() { 
5. this.css("position", "absolute"); 
6. this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px"); 
7. this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px"); 
8. return this; 
9. } 
10. //Use the above function as: 
11. $('#foo').center(); 
12. </script>