[JS]Bookmarklet搭配jQuery，強大的書籤小工具！ (以FF11測試)

讓我們來仔細的研究這個藏在書籤列上好用的功能...。

介紹

將一些常用的工作放在書籤列上，方便取用而且簡單明瞭，這就是Bookmarklet！如果你有用過崩壞の天空の城，必定就知道它的方便之處。一般來說，Bookmarklet在瀏覽器中，以書籤的形式儲存，點選時，瀏覽器會執行這個書籤內的程式碼，並且直接作用在當前的網頁上。(這也是為什麼我們可以騙過網頁上的「讚」按鈕，或是將YouTube中的影片截下來)

Bookmarklet 的架構

嘗試修改一下Bookmarklet上的網址，你會發現它其實是JavaScript (下簡稱JS)！不過，我們不是在HTML中加入<script>...</script>標籤，因此要先告訴瀏覽器它是JS。所以網址開頭是

javascript:

然後我們將要執行的內容包裝成匿名函數，接在後面即可。然後再用括號包住，使成為一個function物件，之後再呼叫這個物件，像是

javascript:function()     /*錯誤宣告*/
javascript:(function())()     /*正確宣告。這是一個物件，因此函數可以匿名*/

這樣子這個函數會在定義完後立刻被執行。

因此基本的框架會長得像是這樣：

javascript:( function(){ /*你要執行的東西放這裡*/ } )()

然後放在任何一個書籤的網址欄上。在這裡我把它寫成連結，把粗體字部分拖進書籤列之後試著點點看吧。

操作頁面

這個方面需要具有JS的相關經驗，稍嫌煩瑣，在這裡只是簡單介紹一下。在JS中要插入文字、圖片、CSS、Script等等，可以透過document這個物件中的函數達成。像是

document.getElementById('物件的id')[0].appendChild(物件);
或是
document.HTML的Tag路徑.appendChild(s);

使用jQuery

至於更進階的技巧較為複雜，所幸透過jQuery這個函式庫可以簡化許多(當然，這也是要學過JS才會這麼認為)。如果網頁中並沒有引入jQuery，就必須仿照上面的語法，匯入Script：

try{
/*先測試有沒有jQuery，沒有將產生錯誤而被捕捉*/
jQuery();
alert('此網頁已經支援jQuery了！');
}catch(e){
/*偵測到不支援，匯入*/
s=document.createElement('script');
s.type='text/javascript';
s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(s);
alert('未支援jQuery，已經匯入成功。');
}

接著就可以拿它來做事情了。但是這樣子之後還不能立即使用！因為jQuery的載入需要一點時間，因此必須利用setTimeout這個函數來等待瀏覽器處理。

 setTimeout( function(){ /*要稍後執行的程式碼*/ } , 等待時間);

等待時間以毫秒(ms,1/1000秒)計算。

jQuery的框架？ 

先整理一下，到目前為止的框架是下面這樣：

javascript:(function(){try{jQuery();}catch(e){s=document.createElement('script');s.type='text/javascript';s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(s);} setTimeout(function(){$(".bd").css("text-shadow","navy 1px 1px 5px");},100)} )()

綠色部分是匯入jQuery的部分，藍色部分是要執行程式碼的部分。
接著就可以開始使用了。jQuery常用 $ 來簡單代表這個物件，最普遍的用法就是

$(selector). 方法...

如果符合selector的標籤不只一個，那麼全部都會套用進去，而不需用迴圈一個物件一個物件去改，這就是它其中一個特色，例如，下面這一段會讓網頁中的所有連結變紅色：(在之後的範例有)

$("a").css("color","red");

還可以連續使用，讓程式更清楚易懂，例如

 $("a").css("color","red").css("font-family","標楷體").css("font-size","150%");

實作

這篇文章所敘述的內容主要適合對JS的語法稍有概念者。不過限於篇幅，不太能徹底的將用法說明清楚。那麼，這裡就補上一點範例，以方便讀者學習測試用。

怎麼找到我要修改的地方？

在Firefox 10以後，增加了「檢測元件」功能，只要在你要檢測的元件上選擇這個選項，螢幕底下就會出現其在HTML中的位置，相當好用。

至於Firebug則更為方便，不過這是Plugin，在此便不介紹了。

 Ex1. 把Yahoo!奇摩網頁中框內文字加上陰影 -> *示範連結1*

javascript:(function(){try{jQuery();}catch(e){s=document.createElement('script');s.type='text/javascript';s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(s);}setTimeout(function(){$(".bd").css("text-shadow","navy 1px 1px 5px");},100)})()

執行結果：

  Ex2. 把FB上動態時報的前10條抓下來！-> *示範連結2*

javascript:(function(){try{jQuery();}catch(e){s=document.createElement('script');s.type='text/javascript';s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(s);}setTimeout(function(){ $(".tlTxFe").each(function(i){if(i<10)alert("第"+(i+1)+"條動態是：\n"+$(this).text())}) },10)})()

**一定要在動態時報的頁面上操作才有用！**

 Ex3. 逐次更換圖片的陰影 (IE無效) -> *示範連結3*

javascript:(function(){try{jQuery();}catch(e){s=document.createElement('script');s.type='text/javascript';s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(s);}setTimeout(function(){ $("img")
.css("-moz-transition","box-shadow 400ms ease-out")
.css("-webkit-transition","box-shadow 400ms ease-out").css("-o-transition","box-shadow 400ms ease-out").toggle(
function(){$(this).css("box-shadow","5px 5px 10px rgba(255,0,0,0.5)")},
function(){$(this).css("box-shadow","5px 5px 10px rgba(0,255,0,0.5)")},function(){$(this).css("box-shadow","5px 5px 10px rgba(0,0,255,0.5)")}) },10)})()

**這程式碼有點長，稍為分行。不過只要知道它是可以連續使用就可以了。套用在Google之後，點點看它的圖片！**

結語

好像是該結束的時候...還沒有完！如果對JQuery有興趣...不妨看看http://api.jquery.com/browser/，體驗一下jQuery操作網頁的樂趣...多點巧思，Bookmarklet也可以DIY，成為好用的小工具！


完