今天在寫碼貓這個很可愛的部落格上看到這篇蠻實用的文章，為了怕老人病發作，看一看就忘了，特地來給它記下來。
其實都是程式碼居多…
10個實用的jQuery小程式
原文: 10 awesome jQuery snippets
預先載入圖片
這個其實很好用，很多所謂網頁加速的技巧，也都用預先載入的原理。原理很簡單，我們只要create出img元素，並指定它的src屬性，瀏覽器就會幫我們把圖片載入，然後就會存在cache裡，不管它有沒有出現在HTML文件上。這樣之後要顯示圖片就會從cache抓，不需要再辛苦連線慢慢下載。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
(function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } })(jQuery) |
→ Source: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
另開視窗的連結
下面這段小程式會針對有rel=”external”屬性的連結，使它點下去另開視窗。重點只在於function裡面的那個this.target=”_blank”，jQuery的selector我們可以改成其他任意方法，例如具有某個class的a元素: $(‘a[class=”link”]’)
|
1 2 3 4 5 6 7 8 |
$('a[@rel$='external']').click(function(){ this.target = "_blank"; }); /* Usage: <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> */ |
→ Source: http://snipplr.com/view/315/-jquery–target-blank-links/
如果JavaScript有開啟，就把<body>加上class
這也算是一個偵測JavaScript有沒有開啟的技巧，簡單又方便，而且只要寫一行。
|
1 |
$('body').addClass('hasJS'); |
→ Source: http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets/
捲動畫面到某個錨點
這種特效很常看到，利用jQuery很輕鬆就可以辦到。
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $(“a.topLink”).click(function() { $(“html, body”).animate({ scrollTop: $($(this).attr(“href”)).offset().top + “px” }, { duration: 500, easing: “swing” }); return false; }); }); |
→ Source: http://snipplr.com/view.php?codeview&id=26739
滑鼠移入時淡入或淡出
也是一個很常見的特效，下面這段小程式會在頁面一開始載入時，先將所有圖片刷淡，然後滑鼠游標移過時將透明度opacity設為100%(完全不透明)，移出後再刷淡。
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads $(".thumbs img").hover(function(){ $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover },function(){ $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout }); }); |
→ Source: http://snipplr.com/view/18606/
直欄設成相等高度
我們在做網站排版的時候，有時候會想要把所有的直欄(column)弄成一樣高，就像以前用table排版那樣。下面這段程式會找出高度最大的那個直欄，然後把全部直欄設成相同高度。
|
1 2 3 4 5 |
var max_height = 0; $("div.col").each(function(){ if ($(this).height() > max_height) { max_height = $(this).height(); } }); $("div.col").height(max_height); |
→ Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
讓舊式瀏覽器也使用HTML5標籤
HTML5現在是很熱門的網頁標準，但是以前舊式瀏覽器(例如萬惡的IE6)並不認得HTML5的新標籤。下面這段程式利用createElement自己手動把HTML5標籤create出來:
|
1 2 3 4 5 6 7 |
(function(){ if (!/*@cc_on!@*/0) return; 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]) } })(); |
比較好的作法是把上面這段寫入獨立的.js檔，再利用IE版本判斷語法來載入:
|
1 2 3 |
<!-- [if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
→ Source: http://remysharp.com/2009/01/07/html5-enabling-script/
偵測瀏覽器是否支援某個CSS3屬性
下面這個function可以幫助我們偵測瀏覽器是否支援某個CSS3屬性，這個範例是檢查border-radius，當然你可以換成其他的屬性。但是要注意，傳入參數要把橫槓(-)拿掉，例如傳入borderRadius
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true; prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); while(len--) { if ( vendors[len] + prop in div.style ) { // browser supports box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true; } } return false; }; })(); if ( supports('textShadow') ) { document.documentElement.className += ' textShadow'; } |
→ Source: http://snipplr.com/view/44079
取得URL參數
要取得URL參數也是超級簡單，其實魔法就在那個正規式而已…
|
1 2 3 4 5 |
$.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return results[1] || 0; } |
→ Source: http://snipplr.com/view/26662
防止Enter鍵送出表單
一般瀏覽器預設按Enter是會送出表單的，但是現在像有些論壇甚至Facebook和Plurk等微網誌，輸入訊息時Enter是用來換行的，我們不希望它submit，所以這要怎樣防止按Enter鍵送出表單呢，用jQuery就可以輕鬆辦到，主要就是查出Enter鍵的KeyCode是13，然後在表單收到keypress事件時把它return false就好啦!
|
1 2 3 4 5 |
$("#form").keypress(function(e) { if (e.which == 13) { return false; } }); |
→ Source: http://snipplr.com/view/10943/disable-enter-via-jquery/