OTHER PAGES

WELCOME

Move your mouse onto the image to see the bravo CSS3 Transition!

2012年3月23日 星期五

[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,成為好用的小工具!


張貼留言