当前位置: 王朝网络 >> 学院 >> 第三、浏览器滚动条的onscroll事件

第三、浏览器滚动条的onscroll事件

王朝学院·作者佚名 2016-08-27

最近听得较多的跳槽、面试之类的，相信很多园友也开始蠢蠢欲动了，有的甚至早已经开始了。最近我也在琢磨着换工作的事。说得俗套点，人在外面不就为了那么点工资么。现在找工作大部分都是通过在网上投简历，然后等电话通知面试的。然，现在的招聘网站也是比较多。一个一个的在各大网站切换的流量招聘信息实属麻烦。之前看到过一篇博文。《找工作神器，提取各大网站有效的招聘信息（前程无忧、智联招聘、猎聘网）》感觉这想法挺好的。把各大网站信息集中起来浏览，第一省了来回切换，第二还不容易重复投简历。本想拿来用用的，无奈没有提供源码下载，且是客户端版本。于是就只能自己动手，丰衣足食了~。(网站就是强大，可以大家一起分享●０●^_^)

合并查询本来就是为了简单方便，所以也就没有弄很复杂了，一个页面搞定。如果同学们有什么好的想法，可以建议建议。

效果图：就一个简单的关键字输入框、工作地点的选择和信息来源网站。

其实看上去很简单，实现起来也很简单。~~代码不多，难度也很小。很多时候需要的技术不是很多，想法更重要。

不想往下看的可以直接用用演示地址 ,同学们求工作给推荐推荐，上海浦东 .net。私密我，或Q我。

第一、分析url进入招聘网站的时候url大串大串的，我们需要用的的就三个。搜索关键字、地址和页码。

智联招聘：http://sou.zhaopin.com/jobs/searchresult.ashx?jl=地址&kw=关键字&p=页码

jl=地址

kw=关键字

p=页码

然后地址的话直接中文地址就ok了

猎聘网：http://www.liepin.com/zhaopin/?key=关键字&dqs=地址&curPage=页码

key=关键字

dqs=地址

curPage=页码

地址有一个对应的编号

("北京", "010");

("上海", "020");

("广州", "050020");...等等也是在猎聘网选择地址的地方右键审查元素可以看到，如下：

前程无忧：http://search.51job.com/jobsearch/search_result.php?jobarea=地址&keyWord=关键字&curr_page=页码

jobarea=地址 [和猎聘一样的查找方法]

keyword=关键字

curr_page=页码

第二、用到了HtmlAgilityPack.DLL HTML解析组件在之前我发过的博客转发小工具有提过HtmlAgilityPack。这里再简单的说说用法。

caseZhaopinType.猎聘网:varhtmlWeb =newHtmlWeb();

htmlWeb.OverrideEncoding= Encoding.GetEncoding("UTF-8");

HtmlAgilityPack.HtmlDocument response=htmlWeb.Load(url);#regionMyRegionvarulS = response.DocumentNode.SelectNodes("//*[@id='sojob']/div[2]/div/div/ul/li");foreach(variteminulS)

{varxpath =item.XPath;stringtitleName, infourl, company, city, date, salary, salary_em, source;

titleName= item.SelectSingleNode(xpath +"/a").Attributes["title"].Value;

infourl= item.SelectSingleNode(xpath +"/a").Attributes["href"].Value;

company= item.SelectSingleNode(xpath +"/a/dl/dt[@class='company']").InnerText;

city= item.SelectSingleNode(xpath +"/a/dl/dt[@class='city']/span").InnerText;

date= item.SelectSingleNode(xpath +"/a/dl/dt[@class='date']/span").InnerText;

salary= item.SelectSingleNode(xpath +"/a/dl/dt[@class='salary']/span").InnerText;

salary_em= item.SelectSingleNode(xpath +"/a/dl/dt[@class='salary']/em").InnerText;

source="猎聘网";

zpInfoList.Add(newZhaopinInfo()

{

city=city,

company=company,

date=date,

info_url=infourl,

salary=salary,

salary_em=salary_em,

titleName=titleName,

source=source

});

}#endregion

break;

1.设置访问url页面的编码 htmlWeb.OverrideEncoding = Encoding.GetEncoding("UTF-8");

设置编码为UTF-8,具体看对应页面采用的编码。

2.元素路径下的元素集合var ulS = response.DocumentNode.SelectNodes("//*[@id='sojob']/div[2]/div/div/ul/li");

SelectNodes方法里面的这串字符串怎么来？

右键审查元素 Copy XPath 就ok了。不过如果js有动态修改document树的话那么这个路径就不准了，需要自己微调下。

3、取标签的属性值 Attributes如：取a标签的title值。

titleName = item.SelectSingleNode(xpath + "/a").Attributes["title"].Value;

4.取标签的中间的文本InnerTextcompany = item.SelectSingleNode(xpath + "/a/dl/dt[@class='company']").InnerText;

5.过滤选择特定的id 或 classXPath 中标签名后面加上中括号和@ 如："/a/dl/dt[@class='company']"

第三、浏览器滚动条的onscroll事件js获取滚动条距离浏览器顶部,底部的高度,兼容ie和Firefox

取窗口可视范围的高度[浏览器可见区域高度]//取窗口可视范围的高度[浏览器可见区域高度]getClientHeight:function() {varclientHeight = 0;if(document.body.clientHeight &&document.documentElement.clientHeight) {varclientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ?document.body.clientHeight : document.documentElement.clientHeight;

}else{varclientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ?document.body.clientHeight : document.documentElement.clientHeight;

}returnclientHeight;

}

取窗口滚动条高度[滚动条距离顶部的高度]getScrollTop:function() {varscrollTop = 0;if(document.documentElement &&document.documentElement.scrollTop) {

scrollTop=document.documentElement.scrollTop;

}elseif(document.body) {

scrollTop=document.body.scrollTop;

}returnscrollTop;

}

取文档内容实际高度getScrollHeight:function() {returnMath.max(document.body.scrollHeight, document.documentElement.scrollHeight);

}

滚动条距离底部的高度getScrollbheight:function() {returnthis.getScrollHeight() -this.getScrollTop() -this.getClientHeight(); }

取滚动条距离底部的高度，当滚动条到最底部的时候，通过Ajax异步请求后台，加载下一页数据，这样就可以免了翻页的麻烦了。