xml地图|网站地图|网站标签 [设为首页] [加入收藏]

脚本收藏网站会员信息到本地,非常不错的

一、脚本功能介绍

正常情况下,如果你在会员搜索结果页通过相片看好某个会员(所谓眼缘好的会员),想快速记录下这个会员的信息并不是一件容易的事情,你也许会在会员相片上单击右键,然后把这个会员的主页地址先记下来,一个页面如果有较多看好的会员想收藏的话,你还得重复上面的操作。默认搜索结果页显示效果如下图:

betway 1

安装我写的Greasemonkey脚本后,搜索结果页就会发生一点改变,“给我写信”按钮会变成“收藏”复选框,效果如下图,注意红框标识与前面图片的变化对比:

betway 2

现在假设你想收藏第一排右边两位美女信息的话,你就点击“收藏”复选框(不想收藏就再次点击取消选择即可),这样在页脚翻页位置的文本框里就会生成你选中会员信息的HTML,并且默认处于选中状态,你右键复制它,如下图:

betway 3

最后把复制的HTML代码粘贴到一个预定义样式的html页面的指定位置(比如把复制的LI标签代码粘贴到jiayuan.html文件的UL标签之间,以后新的收藏一直往后面堆就行了,最后这个jiayuan.html文件就是你收藏会员的记录文件),结果如下图:

betway 4

jiayuan.html模板文件代码如下,把它复制后用记事本另存为html后缀的文件即可。

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<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>
<!--把你复制的代码放到这里,然后保存预览即可看到效果-->
</ul>
</body>
</html>

今天在网上看到的一个根据ClassName获取Elements的脚本,在此记录一下,以便日后使用。

第一步,设计一下我想要的效果!
我用FW把以前作的相册效果(//www.jb51.net/blogview.asp?logID=628)改了改,设计一张简单的效果图!
betway 5
第二步,布局!

二、安装和使用脚本

要使用本脚本功能,你必须安装Firefox(火狐)浏览器,而且这个浏览器装上了Greasemonkey插件,然后在本地或网络能找到JiaYuan.user.js脚本文件(就是我写的Greasemonkey脚本,后面会提供代码),然后在本地拉这个JS脚本到浏览器窗口,或者通过网络地址访问这个JS脚本(JiaYuan.user.js),就会弹出脚本安装界面,如下图:
betway 6

成功安装浏览器和插件,以及脚本后,访问佳缘网会员搜索表单页:
提交一次搜索请求,在出来的结果页,如果不是照片显示模式,把它切换过来,确保看到的搜索结果页与本文一开始提供的界面那样,此时不出意外的话就可以看到“收藏”复选框了,接下来的操作参考“脚本功能介绍”。

温馨提示:想知道Greasemonkey插件是否安装成功,请查看浏览器【工具】是否有【Greasemonkey】选项,以及浏览状态栏右侧是否有“小猴子”图标,而且这个“小猴子”图标不是灰色的,如果都有则表明Greasemonkey插件成功安装,如下图:

betway 7

复制代码 代码如下:

复制代码 代码如下:

三、相关下载

(1)Firefox(火狐)浏览器:(本版本已集成Greasemonkey插件)

(2)Greasemonkey插件:

(3)保存佳缘会员信息脚本:

var getElementsByClassName = function(searchClass, node, tag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(searchClass)
} else {
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while (--i >= 0) {
patterns.push(new RegExp("(^|\s)" classes[i] "(\s|$)"));
}
var j = elements.length;
while (--j >= 0) {
current = elements[j];
match = false;
for (var k = 0, kl = patterns.length; k < kl; k ) {
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}

<div id="imgBox">
<ul>
<li><a href="#"><img alt="this is 001" src="" /></a></li>
<li><a href="#"><img alt="this is 001" src="" /></a></li>
<li><a href="#"><img alt="this is 001" src="" /></a></li>
<li><a href="#"><img alt="this is 001" src="" /></a></li>
<li><a href="#"><img alt="this is 001" src="" /></a></li>

四、脚本预览

Greasemonkey脚本都是用JavaScript语言写的,要想写出优秀的Greasemonkey应用,你必需熟悉JavaScript编程,了解JavaScript DOM编程,以及会分析HTML代码结构。如果你想更多地了解Greasemonkey,请阅读《深入浅出 Greasemonkey》。下面本人把本应用脚本代码公布如下,希望对大家能起到抛砖引玉的作用。

复制代码 代码如下:

// ==UserScript==
// @name 保存会员信息
// @namespace
// @description 收集世纪佳缘交友网会员搜索结果页你喜欢的会员信息,并把它们保存成本地HTML文件,以方便日后查阅。
// @include
// ==/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 筛选标签名,可选参数,用于缩小查找范围
* @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;
}
/**
* 创建每个会员头像下的复选框
*/
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;
}
//插入复选框HTML
photoBoxs[a].getElementsByTagName('li')[3].innerHTML = '<label><input type="checkbox" name="love" value="' url '|'

  • face '|' name '|' about '" />收藏</label>< /span>';
    //注册复选框单击处理函数
    photoBoxs[a].getElementsByTagName('input')[0].addEventListener('click', jiaYuan.outputHtml, true);
    }
    }
    //创建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代码,在单击复选框时调用
    this.outputHtml = function()
    {
    var loveHtml = '';
    var loveCheckBoxs = document.getElementsByName('love');
    for (var i in loveCheckBoxs)
    {
    //只输出复选框打勾的会员信息
    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(); //让文本域代码处于选中状态,方便快速复制
    }
    //程序初始化公开方法
    this.init = function()
    {
    createCheckBox();
    createTextBox();
    }
    }
    //实例化一个类
    var jiaYuan = new clsJiaYuan();
    jiaYuan.init();

下面是网上其它的一些相关介绍,大家可以一起参考下。

</ul>
</div>

五、注意事项

1、在安装Greasemonkey插件到Firefox(火狐)浏览器的时候,请选择安装与浏览器版本对应的Greasemonkey插件。建议下载“增强便携版” Firefox浏览器,这种版本一般集成Greasemonkey插件。下载参考链接:

2、本文提供脚本可能会随着佳缘网的改版而失效,因为Greasemonkey脚本的工作是基于目标网站HTML操作的,如果你发现脚本失效请及时给我留言,让我修正。当然,如果你也会编写脚本的话,你还可以自己动手修改,修改方法可以参考这里,修改用户脚本:

3、据了解现在很多浏览器都支持Greasemonkey,比如Chrome、Opera,甚至IE,本脚本并没有在这些浏览器上测试过,如果你发现脚本在其它浏览器平台下有问题,也可以留言告诉我。

4、必须保证Greasemonkey插件处于激活状态,即浏览器右下角的“小猴子”图标不是灰色的,不然你即使安装了插件,也会得不到预期的效果。
作者:WebFlash
出处:

正常情况下,如果你在会员搜索结果页通过相片看好某个会员(所谓眼缘好的会员),想快速记录下这个会员的信息并不...

DOM中的getElementsByClassName解释如下:DOM API 中提供3种方法取元素(getElementById,getElementsByName,getElementsByTagName),经常编写CSS的人自然就会产生疑问,有没有根据样式类名取元素的方法,可惜,DOM1/2 里面都没有这样的方法,prototype 很早就扩展过DOM的方法,添加了 getElementsByClassName,从方法名上看,似乎非常正统,与前面3种方法名称也像,分析其代码,却发现还是通过 getElementsByTagName 来实现。这个方法称不上优雅,因为需要遍历所有的元素,探测元素是否包含目标样式类名,返回符合条件的元素数组。google了一下,却没有找到更优雅高效的替代方法。

这时可以看一下效果:

复制代码 代码如下:

  • betway 8
  • betway 9
  • betway 10
  • betway 11
  • betway 12
  • betway 13
  • betway 14
  • betway 15
  • betway 16
  • betway 17
  • betway 18
  • betway 19
  • betway 20
  • betway 21
  • betway 22
  • betway 23
  • betway 24
  • betway 25
  • betway 26
  • betway 27
  • betway 28
  • betway 29
  • betway 30
  • betway 31
  • betway 32
  • betway 33
  • betway 34
  • betway 35
  • betway 36
  • betway 37

function getElementsByClassName(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i ){
if ((" " j.className " ").indexOf(" " className " ")!=-1){
result.push(j);
}
}
return result;
}

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

既然有getElementsByClassName,一样可以有 getElementsByAttribute(如:getElementsByValue、getElementsByStyle、getElementsByType)

第三步,设计一下Javascript;

复制代码 代码如下:

复制代码 代码如下:

document.getElementsByClassName = function(className,oBox) {
//适用于获取某个HTML区块内部含有某一特定className的所有HTML元素
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii ) {
var child = children[ii];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j ) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}

<script>
ScrollImg = function(imgBoxId){
this.imgBoxId = imgBoxId; //拿到图片最外边的DIV的ID;
this.table = this.createTable(); //创建了一个一行三列的表格
this.setSpan(); //把图片上的ALT文件放在图片的后边
this.setOnclick(); //加点击事件和把内容放在表格中
this.$(this.imgBoxId).appendChild(this.table) //完成全部
}

document.getElementsByType = function(sTypeValue,oBox) {
//适用于获取某个HTML区块内部同属于某一特定type的所有HTML元素,如:input,script,link等等
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii ) {
if (children[ii].type == sTypeValue) {
elements.push(children[ii]);
}
}
return elements;
}

ScrollImg.prototype = {
$:function(objId){
return document.getElementById(objId);
},
$$:function(n){
return document.createElement(n);
},
createTable:function(){
var table = this.$$('table');
var tr = this.$$('tr');
for(var k=0; k<3; k ) tr.appendChild(this.$$('td'));
var tbody = this.$$('tbody');
tbody.appendChild(tr);
table.appendChild(tbody);
return table;
},
setSpan:function(){
var links = this.$(this.imgBoxId).getElementsByTagName('a');
for(var k=0; k<links.length; k ){
var span = this.$$('span');
span.appendChild(document.createTextNode(links[k].getElementsByTagName('img')[0].alt));
links[k].appendChild(span);
}
return;
},
setOnclick:function (){
var imgArray = ['left', ,'right'];
var tds = this.table.getElementsByTagName('td');
for(var k=0; k<tds.length; k ){
tds[k].setAttribute('vAlign', 'center');
if(k == 1){
var div = this.$$('div');
var ul = this.$(this.imgBoxId).getElementsByTagName('ul')[0];
div.appendChild(ul);
tds[k].appendChild(div);
continue
}

function $() {
var elements = new Array();
for (var ii = 0; ii < arguments.length; ii ) {
var element = arguments[ii];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

var img = this.$$('img');
img.setAttribute('src', '//www.jb51.net/attachments/month_0902/' imgArray[k] '.gif');
img.setAttribute('alt', imgArray[k]);
img.style.cursor = 'pointer';
img.onclick = function (){
var imgBox = this.parentNode.parentNode.getElementsByTagName('div')[0];
var ns = imgBox.scrollLeft;
var tkey = 500;
if(this.alt == 'left'){
var left = setInterval(function(){
imgBox.scrollLeft = imgBox.scrollLeft - (tkey * 0.1);
tkey = tkey * 0.9;
if(tkey < 2) clearInterval(left);
},50);
} else {
var right = setInterval(function (){
imgBox.scrollLeft = imgBox.scrollLeft (tkey * 0.1);
tkey = tkey * 0.9;
if(tkey < 2) clearInterval(right);
},50);
}
return;
}
tds[k].appendChild(img);
betway,}
return;
}
}

$Cls = function (s,o){
return document.getElementsByClassName(s,o);
};

var test = new ScrollImg('imgBox');
</script>

$Type = function (s,o){
return document.getElementsByType(s,o);
};

这个时候再看一下效果!

$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);
};

www.zishu.cn

$Name = function (s){ //通过name的方式只能针对整个document而言,不能为其限定范围
return document.getElementsByName(s);
};

  • betway 38
  • betway 39
  • betway 40
  • betway 41
  • betway 42
  • betway 43
  • betway 44
  • betway 45
  • betway 46
  • betway 47
  • betway 48
  • betway 49
  • betway 50
  • betway 51
  • betway 52
  • betway 53
  • betway 54
  • betway 55
  • betway 56
  • betway 57
  • betway 58
  • betway 59
  • betway 60
  • betway 61
  • betway 62
  • betway 63
  • betway 64
  • betway 65
  • betway 66
  • betway 67

您可能感兴趣的文章:

  • JavaScript ES6的新特性使用新方法定义Class
  • js中设置元素class的三种方法小结
  • JavaScript更改class和id的方法
  • 用原生JS获取CLASS对象(很简单实用)
  • js获取class的所有元素
  • 原生js实现查找/添加/删除/指定元素的class
  • js实现addClass,removeClass,hasClass的函数代码
  • js获取某元素的class里面的css属性值代码
  • js判断样式className同时增加class或删除class
  • JavaScript ES6中CLASS的使用详解

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

第四步,写CSS来完成计划时的样子!

复制代码 代码如下:

<style>
/*重设所有的标属基本的属性,在实际中最好不要用*来写,性能不太好,作例子就算了*/
*{ margin:0; padding:0; list-style:none;}
/*设置一个网页的基本属性*/
body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;}
/*重设写有图片的属性,最主要是解决浏览器的空格BUG*/
img{ border:0; display:block;vertical-align:middle}

/*最外边的DIV的边框和背景色简单设置一下*/
#imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;}
/*这个DIV在布局时是没有的,是我用JAVASCRIPT创建的,我把他的宽度写死,溢出的内容全部隐藏*/
#imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden}
/*这里是父子全加了浮动,以浮制浮,解决自动适应的问题,并让图片横向排列*/
#imgBox,#imgBox ul,#imgBox li{ float:left;}
/*这里其它应该让JAVASCRIPT去计算宽度,就可以实现图片无限加减,都会自适应,我这里偷了个懒,直接写死了*/
#imgBox ul{ width:4100px;}

/*下边这些就是写了一下链接和效果,没什么*/
#imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none}
#imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF}
#imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;}
#imgBox a:hover span{ background:#000; color:#fff}
</style>

好了,全部完成,看一下最后的效果吧!

www.zishu.cn

  • betway 68
  • betway 69
  • betway 70
  • betway 71
  • betway 72
  • betway 73
  • betway 74
  • betway 75
  • betway 76
  • betway 77
  • betway 78
  • betway 79
  • betway 80
  • betway 81
  • betway 82
  • betway 83
  • betway 84
  • betway 85
  • betway 86
  • betway 87
  • betway 88
  • betway 89
  • betway 90
  • betway 91
  • betway 92
  • betway 93
  • betway 94
  • betway 95
  • betway 96
  • betway 97

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

  • javascript 图片滑动切换代码
  • wap手机图片滑动切换特效无css3元素js脚本编写
  • JavaScript实现图片DIV竖向滑动的方法
  • js实现支持手机滑动切换的轮播图片效果实例
  • javascript制作的滑动图片菜单
  • javascript图片滑动效果实现
  • JavaScript实现图片滑动切换的代码示例分享
  • JS DOM实现鼠标滑动图片效果
  • 基于javascript实现图片滑动效果

本文由必威发布于Web前端,转载请注明出处:脚本收藏网站会员信息到本地,非常不错的