這篇文章主要介紹了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>