OTHER PAGES

WELCOME

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

2012年4月26日 星期四

[JS]Bookmarklet實戰!Facebook自動戳回去!

承上篇[JS]Bookmarklet搭配jQuery,強大的書籤小工具!,我們終於可以開始實戰了!這次要實現的功能是,當使用者停在「戳戳樂」的頁面時,只要按一下這個Bookmarklet按鈕,就可以完成戳回所有人的按鈕。讓我們一起來看看要如何完成吧!


** 注意:以下的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(){程式碼放這裡},100)} )()

 

觀察頁面元素,選擇合適的Selector!

 好,讓我們打開Facebook的戳戳樂頁面,在「戳回去」的按鈕連結上,按右鍵選擇「檢測元素」,畫面會呈現如下圖所示:

莫急莫驚慌!讓我們研究一下這個連結有什麼特性可以辨識。
 

我們將可以用的特質(attribute)分析如下:
  • a <標籤名稱> 表示這是連結。
  • class="uiIconText":CSS Class 名稱,但是不確定有沒有其他連結跟它用一樣的class。
  • ajaxify="/ajax/pokes/..."網址。似乎是表示按下它之後的動作,而且也有"poke"之類的字眼。
  • rel, href ... :看來沒啥用。
 接著我們可以藉此設計出它的selector:(*=表示「包含下面資料」) 
a[ajaxify*='/ajax/pokes']

 

撰寫程式碼...完成!

說了這麼多,接著我們就可以開始寫出最基本的程式碼!
先把功能所需要的程式碼補齊:
首先,我們需要一個jQuery物件,用「逐個執行」的方式運作。這時,可以用each方法!
第二,我們要怎麼模擬使用者「按」連結的動作呢?可以使用click方法!

問題就這樣,很簡單吧!我們這樣寫:


$("a[ajaxify*='/ajax/pokes']").each(
function (index, domElement){
this.click();
}
);
之後刪掉換行符號,把它塞到框架裡就大功告成了!

 

於是最後的程式碼是...?

最後一步就留給你做!我把完成的程式封裝成連結:自動戳回去(簡單版)

 

習題

這個非常簡單的練習,其實還有很多可改進的地方,需要一點小技巧。這裡的習題,讀者可以自行上網查詢所需資料來完成。
  1. 戳回去之後,彈出一個警示窗顯示回戳了多少人。
    提示:用alert("文字");
  2. 改變一下程式,只要視窗開著,就每隔120秒戳回去一次。
    提示:用setInterval()取代setTimeout()就可以重複執行!

 

旗艦版

其實...我自己也做了一個給自己用喔!
把它分享出來吧!自動戳回去(by Andy~* 20120426rev.)
練習分析它,並自己動手修改看看!
張貼留言