本文給大家匯總介紹了10個非常實用，也非常簡單的jquery特效，基本上項目中都可以用到，推薦給大家，有需要的小伙伴可以參考下。

1.圖片預加載

1. (function($) { 
2. var cache = []; 
3. // Arguments are image paths relative to the current page. 
4. $.preLoadImages = function() { 
5. var args_len = arguments.length; 
6. for (var i = args_len; i--;) { 
7. var cacheImage = document.createElement('img'); 
8. cacheImage.src = arguments[i]; 
9. cache.push(cacheImage); 
10. } 
11. } 
12.  
13. jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); 

2. 在新窗口打開鏈接 (target=”blank”)

1. $('a[@rel$='external']').click(function(){ 
2. this.target = "_blank"; 
3. }); 
4.  
5. /* 
6. Usage: 
7. <a href="http://www.catswhocode.com" rel="external">catswhocode.com</a> 
8. */ 

3.當支持 JavaScript 時為 body 增加 class

/* 該代碼只有1行，但是最簡單的用來檢測瀏覽器是否支持 JavaScript 的方法，如果支持 JavaScript 就在 body 元素增加一個 hasJS 的 class */

1. $('body').addClass('hasJS'); 

4.平滑滾動頁面到某個錨點

1. $(document).ready(function() { 
2. $("a.topLink").click(function() { 
3. $("html, body").animate({ 
4. scrollTop: $($(this).attr("href")).offset().top + "px" 
5. }, { 
6. duration: 500, 
7. easing: "swing" 
8. }); 
9. return false; 
10. }); 
11. }); 

5. 鼠標滑動時的漸入和漸出

1. $(document).ready(function(){ 
2. $(".thumbs img").fadeTo("slow", 0.6);  
3. // This sets the opacity of the thumbs to fade down to 60% when the page loads 
4.  
5. $(".thumbs img").hover(function(){ 
6. $(this).fadeTo("slow", 1.0);  
7. // This should set the opacity to 100% on hover 
8. },function(){ 
9. $(this).fadeTo("slow", 0.6);  
10. // This should set the opacity back to 60% on mouseout 
11. }); 
12. }); 

6. 制作等高的列

1. var max_height = 0; 
2. $("div.col").each(function(){ 
3. if ($(this).height() > max_height) { max_height = $(this).height(); } 
4. }); 
5. $("div.col").height(max_height); 

7. 在一些老的瀏覽器上啟用 HTML5 的支持

1. (function(){ 
2. if(!/*@cc_on!@*/0) 
3. return; 
4. var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])} 
5. })() 

//然后在head中引入該js

8.測試瀏覽器是否支持某些 CSS3 屬性

1. var supports = (function() { 
2. var div = document.createElement('div'), 
3. vendors = 'Khtml Ms O Moz Webkit'.split(' '), 
4. len = vendors.length; 
5.  
6. return function(prop) { 
7. if ( prop in div.style ) return true; 
8.  
9. prop = prop.replace(/^[a-z]/, function(val) { 
10. return val.toUpperCase(); 
11. }); 
12.  
13. while(len--) { 
14. if ( vendors[len] + prop in div.style ) { 
15. // browser supports box-shadow. Do what you need. 
16. // Or use a bang (!) to test if the browser doesn't. 
17. return true; 
18. } 
19. } 
20. return false; 
21. }; 
22. })(); 
23.  
24. if ( supports('textShadow') ) { 
25. document.documentElement.className += ' textShadow'; 

9. 獲取 URL 中傳遞的參數

1. $.urlParam = function(name){ 
2. var results = new RegExp('[//?&]' + name + '=([^&#]*)').exec(window.location.href); 
3. if (!results) { return 0; } 
4. return results[1] || 0; 
5. } 

10. 禁用表單的回車鍵提交

1. $("#form").keypress(function(e) { 
2. if (e.which == 13) { 
3. return false; 
4. } 
5. });