[jQuery] 10個實用的jQuery小程式

今天在寫碼貓這個很可愛的部落格上看到這篇蠻實用的文章,為了怕老人病發作,看一看就忘了,特地來給它記下來。

其實都是程式碼居多…

10個實用的jQuery小程式

原文: 10 awesome jQuery snippets

預先載入圖片
這個其實很好用,很多所謂網頁加速的技巧,也都用預先載入的原理。原理很簡單,我們只要create出img元素,並指定它的src屬性,瀏覽器就會幫我們把圖片載入,然後就會存在cache裡,不管它有沒有出現在HTML文件上。這樣之後要顯示圖片就會從cache抓,不需要再辛苦連線慢慢下載。

→ 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”]’)

→ Source: http://snipplr.com/view/315/-jquery–target-blank-links/

如果JavaScript有開啟,就把<body>加上class
這也算是一個偵測JavaScript有沒有開啟的技巧,簡單又方便,而且只要寫一行。

→ Source: http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets/

捲動畫面到某個錨點
這種特效很常看到,利用jQuery很輕鬆就可以辦到。

→ Source: http://snipplr.com/view.php?codeview&id=26739

滑鼠移入時淡入或淡出
也是一個很常見的特效,下面這段小程式會在頁面一開始載入時,先將所有圖片刷淡,然後滑鼠游標移過時將透明度opacity設為100%(完全不透明),移出後再刷淡。

→ Source: http://snipplr.com/view/18606/

直欄設成相等高度
我們在做網站排版的時候,有時候會想要把所有的直欄(column)弄成一樣高,就像以前用table排版那樣。下面這段程式會找出高度最大的那個直欄,然後把全部直欄設成相同高度。

→ Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

讓舊式瀏覽器也使用HTML5標籤
HTML5現在是很熱門的網頁標準,但是以前舊式瀏覽器(例如萬惡的IE6)並不認得HTML5的新標籤。下面這段程式利用createElement自己手動把HTML5標籤create出來:

比較好的作法是把上面這段寫入獨立的.js檔,再利用IE版本判斷語法來載入:

→ Source: http://remysharp.com/2009/01/07/html5-enabling-script/

偵測瀏覽器是否支援某個CSS3屬性
下面這個function可以幫助我們偵測瀏覽器是否支援某個CSS3屬性,這個範例是檢查border-radius,當然你可以換成其他的屬性。但是要注意,傳入參數要把橫槓(-)拿掉,例如傳入borderRadius

→ Source: http://snipplr.com/view/44079

取得URL參數
要取得URL參數也是超級簡單,其實魔法就在那個正規式而已…

→ Source: http://snipplr.com/view/26662

防止Enter鍵送出表單
一般瀏覽器預設按Enter是會送出表單的,但是現在像有些論壇甚至Facebook和Plurk等微網誌,輸入訊息時Enter是用來換行的,我們不希望它submit,所以這要怎樣防止按Enter鍵送出表單呢,用jQuery就可以輕鬆辦到,主要就是查出Enter鍵的KeyCode是13,然後在表單收到keypress事件時把它return false就好啦!

→ Source: http://snipplr.com/view/10943/disable-enter-via-jquery/

發佈留言