[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.)
練習分析它，並自己動手修改看看！