|
|
一、腳本功能介紹
正常情況下，如果你在會員搜索結(jié)果頁通過相片看好某個會員（所謂眼緣好的會員），想快速記錄下這個會員的信息并不是一件容易的事情，你也許會在會員相片上單擊右鍵，然后把這個會員的主頁地址先記下來，一個頁面如果有較多看好的會員想收藏的話，你還得重復(fù)上面的操作。默認搜索結(jié)果頁顯示效果如下圖：
安裝我寫的Greasemonkey腳本后，搜索結(jié)果頁就會發(fā)生一點改變，“給我寫信”按鈕會變成“收藏”復(fù)選框，效果如下圖，注意紅框標識與前面圖片的變化對比：
現(xiàn)在假設(shè)你想收藏第一排右邊兩位美女信息的話，你就點擊“收藏”復(fù)選框（不想收藏就再次點擊取消選擇即可），這樣在頁腳翻頁位置的文本框里就會生成你選中會員信息的HTML，并且默認處于選中狀態(tài)，你右鍵復(fù)制它，如下圖：
最后把復(fù)制的HTML代碼粘貼到一個預(yù)定義樣式的html頁面的指定位置（比如把復(fù)制的LI標簽代碼粘貼到j(luò)iayuan.html文件的UL標簽之間，以后新的收藏一直往后面堆就行了，最后這個jiayuan.html文件就是你收藏會員的記錄文件），結(jié)果如下圖：
jiayuan.html模板文件代碼如下，把它復(fù)制后用記事本另存為html后綴的文件即可。
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>佳緣會員收藏</title>
<style type="text/css">
* {margin:0; padding:0}
li {list-style:none}
body {font-size:12px; line-height:1.5em; padding:20px}
li {width:130px; height:200px; float:left; text-align:center}
li img {border:3px solid #F4F6F9}
li strong {display:block; color:#0043B7}
</style>
</head>
<body>
<ul>
<!--把你復(fù)制的代碼放到這里，然后保存預(yù)覽即可看到效果-->
</ul>
</body>
</html>
二、安裝和使用腳本
要使用本腳本功能，你必須安裝Firefox（火狐）瀏覽器，而且這個瀏覽器裝上了Greasemonkey插件，然后在本地或網(wǎng)絡(luò)能找到JiaYuan.user.js腳本文件（就是我寫的Greasemonkey腳本，后面會提供代碼），然后在本地拉這個JS腳本到瀏覽器窗口，或者通過網(wǎng)絡(luò)地址訪問這個JS腳本（JiaYuan.user.js），就會彈出腳本安裝界面，如下圖：
成功安裝瀏覽器和插件，以及腳本后，訪問佳緣網(wǎng)會員搜索表單頁：http://search.jiayuan.com，
提交一次搜索請求，在出來的結(jié)果頁，如果不是照片顯示模式，把它切換過來，確保看到的搜索結(jié)果頁與本文一開始提供的界面那樣，此時不出意外的話就可以看到“收藏”復(fù)選框了，接下來的操作參考“腳本功能介紹”。
溫馨提示：想知道Greasemonkey插件是否安裝成功，請查看瀏覽器【工具】是否有【Greasemonkey】選項，以及瀏覽狀態(tài)欄右側(cè)是否有“小猴子”圖標，而且這個“小猴子”圖標不是灰色的，如果都有則表明Greasemonkey插件成功安裝，如下圖：
三、相關(guān)下載
（1）Firefox（火狐）瀏覽器：（本版本已集成Greasemonkey插件）
（2）Greasemonkey插件：http://releases.mozilla.org/pub/mozilla.org/addons/748/greasemonkey-0.8.20080609.0-fx.xpi（訪問即安裝）
（3）保存佳緣會員信息腳本：http://snsapps.googlecode.com/svn/trunk/JiaYuan.user.js（訪問即安裝）
四、腳本預(yù)覽
Greasemonkey腳本都是用JavaScript語言寫的，要想寫出優(yōu)秀的Greasemonkey應(yīng)用，你必需熟悉JavaScript編程，了解JavaScript DOM編程，以及會分析HTML代碼結(jié)構(gòu)。如果你想更多地了解Greasemonkey，請閱讀《深入淺出 Greasemonkey》。下面本人把本應(yīng)用腳本代碼公布如下，希望對大家能起到拋磚引玉的作用。
復(fù)制代碼 代碼如下:
// ==UserScript==
// @name 保存會員信息
// @namespace http://www.ucoolweb.com
// @description 收集世紀佳緣交友網(wǎng)會員搜索結(jié)果頁你喜歡的會員信息，并把它們保存成本地HTML文件，以方便日后查閱。
// @include http://search.jiayuan.com/result.php*m=1*
// ==/UserScript==
/**
* 定義一個類
*/
function clsJiaYuan()
{
/**
* 定義getElementById快捷方式
* @param {String} objId DOM ID
* @return {DOM}
*/
var $ = function(objId)
{
return document.getElementById(objId);
}
/**
* 定義getElementsByTagName快捷方式
* @param {String} tagName 標簽名
* @return {Array} DOM Array
*/
var $$ = function(tagName)
{
return document.getElementsByTagName(tagName);
}
/*
if (window.HTMLElement)
{
HTMLElement.prototype.$=$;
HTMLElement.prototype.$$=$$;
}
*/
/**
* 按樣式名查找DOM對象
* @param {String} className 要查找的樣式名，即標簽的class屬性值
* @param {String} tagName 篩選標簽名，可選參數(shù)，用于縮小查找范圍
* @return {Array} DOM Array
*/
var getElementsByClassName = function(className, tagName)
{
var selector = tagName || '*';
var allDom = $$(selector);
var domList = [];
for (var i in allDom)
{
if (allDom[i].className == className)
{
domList[domList.length] = allDom[i];
}
}
return domList;
}
/**
* 創(chuàng)建每個會員頭像下的復(fù)選框
*/
var createCheckBox = function()
{
var photoBoxs = getElementsByClassName('searh_photobox', 'div');
for (var a in photoBoxs)
{
var infoList = photoBoxs[a].getElementsByTagName('a');
//提取會員信息
var url = infoList[0].href;
var face = infoList[0].getElementsByTagName('img')[0].src;
var name = infoList[0].getElementsByTagName('img')[0].alt;
//處理高級會員信息HTML
if (infoList.length == 4)
{
var about = infoList[2].innerHTML;
}
else
{
var about = infoList[3].innerHTML;
}
//插入復(fù)選框HTML
photoBoxs[a].getElementsByTagName('li')[3].innerHTML = '<label><input type="checkbox" name="love" value="' + url + '|' + face + '|' + name + '|' + about + '" />收藏</label>< /span>';
//注冊復(fù)選框單擊處理函數(shù)
photoBoxs[a].getElementsByTagName('input')[0].addEventListener('click', jiaYuan.outputHtml, true);
}
}
//創(chuàng)建HTML代碼輸出文本域
var createTextBox = function()
{
var loveCodeDom = document.createElement('textarea');
loveCodeDom.id = 'loveCode';
loveCodeDom.rows = 5;
var pageBox = getElementsByClassName('pageclass', 'div')[1];
pageBox.appendChild(loveCodeDom);
$('loveCode').style.width = '640px';
$('loveCode').style.margin = '10px';
}
//輸出或更新選擇會員HTML代碼，在單擊復(fù)選框時調(diào)用
this.outputHtml = function()
{
var loveHtml = '';
var loveCheckBoxs = document.getElementsByName('love');
for (var i in loveCheckBoxs)
{
//只輸出復(fù)選框打勾的會員信息
if (loveCheckBoxs[i].checked)
{
var infoList = loveCheckBoxs[i].value.split('|');
var liHtml = '<li><a href="' + infoList[0] + '" target="_blank"><img src="' + infoList[1] + '" /></a><strong>' + infoList[2] + '</strong><span>' + infoList[3] + '</span></li>';
loveHtml += liHtml;
}
}
$('loveCode').value = loveHtml;
$('loveCode').select(); //讓文本域代碼處于選中狀態(tài)，方便快速復(fù)制
}
//程序初始化公開方法
this.init = function()
{
createCheckBox();
createTextBox();
}
}
//實例化一個類
var jiaYuan = new clsJiaYuan();
jiaYuan.init();
五、注意事項
1、在安裝Greasemonkey插件到Firefox（火狐）瀏覽器的時候，請選擇安裝與瀏覽器版本對應(yīng)的Greasemonkey插件。建議下載“增強便攜版” Firefox瀏覽器，這種版本一般集成Greasemonkey插件。下載參考鏈接：http://www.jb51.NET/softs/21957.html
2、本文提供腳本可能會隨著佳緣網(wǎng)的改版而失效，因為Greasemonkey腳本的工作是基于目標網(wǎng)站HTML操作的，如果你發(fā)現(xiàn)腳本失效請及時給我留言，讓我修正。當然，如果你也會編寫腳本的話，你還可以自己動手修改，修改方法可以參考這里，修改用戶腳本：http://www.firefox.NET.cn/dig/helloworld/editing.html
3、據(jù)了解現(xiàn)在很多瀏覽器都支持Greasemonkey，比如Chrome、Opera，甚至IE，本腳本并沒有在這些瀏覽器上測試過，如果你發(fā)現(xiàn)腳本在其它瀏覽器平臺下有問題，也可以留言告訴我。
4、必須保證Greasemonkey插件處于激活狀態(tài)，即瀏覽器右下角的“小猴子”圖標不是灰色的，不然你即使安裝了插件，也會得不到預(yù)期的效果。
作者：WebFlash
出處：http://webflash.cnblogs.com
JavaScript技術(shù)：用Greasemonkey 腳本收藏網(wǎng)站會員信息到本地，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
