Node.js使用request+cheerio进行数据采集

用node.js写了个自己的网站(www.wb233.cn),想在自己的网站首页展示自己在CSDN的博客名称,和跳转到相应的地址,所有就打算用爬虫来做,抓取网站上的博客名称和文章的url。
一、使用npm命令安装request和cheerio模块:

npm install request
nom install cheerio

二、request是模拟http请求的,当然也可以很完美的伪装成浏览器去爬数据。上代码:

var request = require('request');
var URL ='https://blog.csdn.net/wb_001';	//爬取网页地址
function dataRequest(dataUrl) {
    var logger = log4js.getLogger("dataCollection");
    request({
        url:dataUrl,
        method:'GET'
    },function (err,res,body) {
        if (err){
            logger.info('err:数据采集地址:'+dataUrl);
            logger.error('[ERROR] collection:'+err);
            return;
        }
        dataParse(body);
    })
}

在request方法回调中的body就是你根据url爬取的网页的所有html内容,接下来,就是解析这些内容,使用的cheerio,它的api这里就不解释了,可以去GitHub上找,她跟JQuery的使用方法一模一样,会使用JQuery的人肯定会用这个框架,这样就不用去写正则表达式了,省得写的自己都看不懂写的什么东西:

function dataParse(body) {
    var list = [];
    var logger = log4js.getLogger("dataParse");
    var $ = cheerio.load(body);
    var articles = $('.article-list h4 a').text();
    //查找所有.article-list h4 下的a节点的内容。
    $('.article-list h4 a').each(function (index,element) {
        var data = {};
        $(element).find(".article-type").remove();
        var text = ($(element).text().replace(/\ +/g,"")).replace(/[\r\n]/g,""); //去除空格以及回车换行
        var url = ($(element).attr('href').replace(/\ +/g,"")).replace(/[\r\n]/g,"");
        if (text.length>30){
            text = text.substring(0,35).concat('...')
        }
        data.href = url;
        data.text = text;
        list.push(data);
    });
}

二、分析爬出来的HTML代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="canonical" href="https://blog.csdn.net/wb_001"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="referrer" content="always">
    <meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="alternate" media="handheld" href="#" />
    <meta name="shenma-site-verification" content="5a59773ab8077d4a62bf469ab966a63b_1497598848">
        <script src="https://csdnimg.cn/release/phoenix/vendor/tingyun/tingyun-rum-blog.js"></script>

    <link href="https://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON">
    <title>【麦田de守望】高山仰止,景行行止。虽不能至,然心向往之。 - CSDN博客</title>

        
                    <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/list-370047c672.min.css">
            
        
          <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/themes/skin3-template/skin3-template-9b39979775.min.css">
        <script type="text/javascript">
        var username = "wb_001";
        var blog_address = "https://blog.csdn.net/wb_001";
        var static_host = "https://csdnimg.cn/release/phoenix/";
        var currentUserName = "";
        var isShowAds = true;
        var isOwner = false;
        var loginUrl = "http://passport.csdn.net/account/login?from=https://blog.csdn.net/wb_001"
        var blogUrl = "https://blog.csdn.net/";
        //页面皮肤样式
        var curSkin = "skin3-template";
        // 第四范式所需数据
        var articleTitles = "【麦田de守望】高山仰止,景行行止。虽不能至,然心向往之。";
        var articleID = "";

        var nickName = "MaiTian丶";
        var isCorporate = false;
    </script>
    <script type="text/javascript">
        // Traffic Stats of the entire Web site By baidu
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?6bcd52f51e9b3dce32bec4a3997715ac";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
        // Traffic Stats of the entire Web site By baidu end
    </script>
    <script src="https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="https://csdnimg.cn/rabbit/exposure-click/main-1.0.6.js"></script>
    <script src="//g.csdnimg.cn/fixed-sidebar/1.1.1/fixed-sidebar.js" type="text/javascript"></script>
    <!-- 新版上报 -->
    <script src="//g.csdnimg.cn/track/1.2.4/track.js" type="text/javascript"></script>
    <!-- 新版上报end -->
        <link rel="stylesheet" href="https://csdnimg.cn/public/sandalstrap/1.4/css/sandalstrap.min.css">
    <style>
        .MathJax, .MathJax_Message, .MathJax_Preview{
            display: none
        }
    </style>
</head>
<!-- nodata 第三栏接口无数据时样式不变 -->
<body class="nodata " > 
    <link rel="stylesheet" href="https://csdnimg.cn/public/common/toolbar/content_toolbar_css/content_toolbar.css">
    <script id="toolbar-tpl-scriptId" src="https://csdnimg.cn/public/common/toolbar/js/content_toolbar.js" type="text/javascript" domain="https://blog.csdn.net/"></script>
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/vendor/pagination/paging.css">
<header>
	<div class="container d-flex clearfix" style="background-image: ">
		<div class="title-box">
			<h1 class="title-blog">
				<a href="https://blog.csdn.net/wb_001">麦田de守望</a>
			</h1>
			<p class="description">高山仰止,景行行止。虽不能至,然心向往之。</p>
		</div>
		<div class="opt-box d-flex justify-content-end">
			<a class="btn btn-sm" href="https://blog.csdn.net/wb_001/rss/list">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#csdnc-rss"></use>
					</svg>RSS订阅</a>
					</div>
	</div>
	</header>
<script src="https://dup.baidustatic.com/js/ds.js"></script>
<div class="container clearfix pt0" id="mainBox">
    <main>
      <div class="filter-box d-flex align-items-center">
      <form action="/wb_001" id=seeOriginal>
    <label class="chk-box" for="chkOriginal">
      <input onchange="this.checked ? document.getElementById('seeOriginal').submit() : location.href = 'https://blog.csdn.net/wb_001'" type="checkbox" name="t" value="1"  id="chkOriginal">只看原创</label></form>
    <dl class="filter-sort-box d-flex align-items-center">
    <dt>排序:</dt>
    <dd><a href="javascript:void(0);" class="btn-filter-sort active" target="_self">默认</a></dd>
    <dd><a href="https://blog.csdn.net/wb_001?orderby=UpdateTime" class="btn-filter-sort " target="_self">按更新时间</a></dd>
    <dd><a href="https://blog.csdn.net/wb_001?orderby=ViewCount" class="btn-filter-sort " target="_self">按访问量</a></dd>
  </dl>
</div>



<div class="article-list">
    
    <div class="article-item-box csdn-tracking-statistics" style="display: none;" data-articleid="82762601">
        <h4 class="">
            <a href="https://blog.csdn.net/yoyo_liyy/article/details/82762601" target="_blank">
            <span class="article-type type-1">原</span>帝都的凛冬</a>
        </h4>
        <p class="content">
            <a href="https://blog.csdn.net/yoyo_liyy/article/details/82762601" target="_blank">
                各种AI、人工智能、大数据如秋日凉爽的风,杳然erzhi;区块链的风头得到短暂的下降。

                此次山竹台风造成了多少伤亡和破坏?人民的生命和财产遭受重大损失
            </a>
        </p>
        <div class="info-box d-flex align-content-center">
            <p>
                <span class="date">2018-12-11 09:59:48</span>
            </p>
            <p>
                <span class="read-num">阅读数:13</span>
            </p>
            <p>
                <span class="read-num">评论数:2</span>
            </p>
        </div>
    </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="84856264">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/84856264" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Node.js连接Redis数据库以及封装      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/84856264" target="_blank">
        很久没有写Node.js代码了,最近更新了自己的网站(www.wb233.cn),对之前的重新写了一遍升级了2.0版本。在网站中有这样一个功能,禁止一个IP频繁去发送留言,这里就用到了Redis,使用Redis存储IP和当前写入数据库的时间。这里直接上代码,不详细介绍Redis了。Redis的连接...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-12-06 15:28:12</span>
      </p>
      <p>
        <span class="read-num">阅读数:30</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="83652386">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/83652386" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android实现多语言国际化并适配Android7.0以上      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/83652386" target="_blank">
        一、Android国际化的例子有很多,但是都是老的,有的在Android7.0以上是没办法实现多语言。这个例子的需求是这样的:App每次启动都去读取手机本地设置的语音环境,如果是中文,不管简体繁体,都显示中文,其他的语言则显示英文。还有一种需求就是在App里面设置固定的语音,这里的话,参考这位传送...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-11-02 11:12:21</span>
      </p>
      <p>
        <span class="read-num">阅读数:357</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="83583463">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/83583463" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Java中对static和final关键字认识      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/83583463" target="_blank">
        一、static关键字:
1、static方法:
a、static方法一般称作静态方法,由于静态方法不依赖于任何对象就可以进行访问,因此对于静态方法来说,是没有this的,因为它不依附于任何对象,既然都没有对象,就谈不上this了。
并且由于这个特性,在静态方法中不能访问类的非静态成员变量和非静态...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-10-31 14:27:10</span>
      </p>
      <p>
        <span class="read-num">阅读数:12</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="83508180">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/83508180" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android保存List数据到本地并解决com.google.gson.internal.LinkedTreeMap cannot be cast to异常      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/83508180" target="_blank">
        一、在项目中是要将一个List对象保存到本地,在很多博客上有这个解决方法:保存到SharedPreferences中,我们知道SharedPreferences只能保存基本数据类型,我们要保存List对象的时候,需要将List转化成json数据,在保存。
二、网络上的方法:
1、保存方法:
pub...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-10-29 16:34:11</span>
      </p>
      <p>
        <span class="read-num">阅读数:316</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="83507460">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/83507460" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android使用Collections.sort()对List&lt;T&gt;进行排序      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/83507460" target="_blank">
        一、想到排序大家肯定会想到什么冒泡排序这些基本算法,但是这个用起来不是那么的方便简单,今天给大家介绍一个java类,Collections。这个一个非常使用的数据结构。
二、在Collections中,有Collections.sort方法:看源码:
public static &amp;amp;...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-10-29 16:08:47</span>
      </p>
      <p>
        <span class="read-num">阅读数:347</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="82910449">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/82910449" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android使用自定义ListView+ScrollView实现股票界面上下左右滑动      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/82910449" target="_blank">
        最近公司做股票相关软件,界面需求是这样的,横向无限长,可以横向滚动,而且最左侧的那一竖栏要定住,网上找了写例子,都太复杂,这里来一个简单的。上图:
  
一、图片有点瑕疵,不要在意细节。QAQ!自定义ScrollView,是先View的联动,需要重写onScrollChanged方法,然后对外暴露...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-09-30 15:48:35</span>
      </p>
      <p>
        <span class="read-num">阅读数:131</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="82387728">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/82387728" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android使用Rxjava+Retrofit+OkHttp+RxLifecycle+MVP搭建项目框架      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/82387728" target="_blank">
        之前写过一个类似的框架搭建,但是遗留下了一个问题就是,Rxjava中的订阅何如与项目中的Activity和Fragment如何绑定生命周期,避免内存泄漏以及抛出一些异常问题,这里使用了RxLifecycle。不多说,上代码。(该例子中使用的Rxjava,RxLifecycle都是2.0以下的,2....      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-09-04 17:52:46</span>
      </p>
      <p>
        <span class="read-num">阅读数:129</span>
      </p>
      <p>
        <span class="read-num">评论数:1</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="81975645">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/81975645" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android使用AOP做登录拦截      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/81975645" target="_blank">
        一、常见App中有两大类,一类是需要通过登录才能进入的App,另一类是不用登录,但是使用相关功能过程中需要登录后才能操作。那么第二类我们常见的做法就是,每次点击按钮的时候去用逻辑判断来实现,这样大大的增加了工作量。那么这篇文章将要改变你之前的做法,只需要一个注解,就可以解决。

二、这里使用的是A...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-08-23 10:13:12</span>
      </p>
      <p>
        <span class="read-num">阅读数:373</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="79068395">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/79068395" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Node.js在Windows server 2012上解决Port 80 requires elevated privileges 问题      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/79068395" target="_blank">
        一、今日在在重启腾讯云服务的时候,手贱点了一下强制重启,然后重启之后就发现自己的node服务无法启动了,在执行 node www 命令之后node.js抛出异常:Port 80 requires elevated privileges。出现这个异常的原因是启动了IIS!IIS会占用80端口!什么是...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-01-15 20:27:06</span>
      </p>
      <p>
        <span class="read-num">阅读数:611</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="79026038">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/79026038" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Node.js+Express配置拦截器实现登录拦截      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/79026038" target="_blank">
        在有登录的项目中,需要配置拦截器器,以防止别人在未登录的状态想去操作你的系统,在node.js中中间件Express其实就是一个拦截器,通过配置可以实现登录拦截      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-01-10 17:06:54</span>
      </p>
      <p>
        <span class="read-num">阅读数:1395</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="79000522">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/79000522" target="_blank">
        <span class="article-type type-1">
            原        </span>
        解决nodejs mysql Error: Connection lost The server closed the connection的两种方法      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/79000522" target="_blank">
        最近在学习node.js是发现在MySQL连接时出现问题,当过几个小时没有访问的MySQL的时候,MySQL自动断开连接,这个问题的原因是MySQL有一个wait_time当超过这个时间的时候连接会丢失,当你再去请求MySQL的时候会连接不上MySQL服务。先在整理一下解决这两个问题的方法:

一...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2018-01-08 10:54:50</span>
      </p>
      <p>
        <span class="read-num">阅读数:2565</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="78604394">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/78604394" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android用NoHttp+MVP构建项目框架      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/78604394" target="_blank">
        最近使用了NoHttp+MVP写了一个项目,NoHttp是一个网络框架,个人觉得是我用过最好用的网络请求框架,没有之一,嗯,对!(NoHttp开源地址) 严大神之作。MVP,大家都再熟悉不过了,优点就是高度解耦和能有效避免内存泄漏。      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2017-11-22 15:38:58</span>
      </p>
      <p>
        <span class="read-num">阅读数:215</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="78561227">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/78561227" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android科大讯飞语音按队列播报      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/78561227" target="_blank">
        在Android开发中,语音播报经常使用,但是,在使用过程中会发现,如果语音来源过于块,频率过高,在前一条没有播放完的情况下会执行第二条播放,本篇文章用来解决这个问题。      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2017-11-17 14:47:26</span>
      </p>
      <p>
        <span class="read-num">阅读数:705</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="76922779">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/76922779" target="_blank">
        <span class="article-type type-1">
            原        </span>
        RxJava+Retrofit+OkHttp3+Dagger2+MVP构建Android项目简单例子      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/76922779" target="_blank">
        RxJava+Retrofit+OkHttp3+Dagger2+MVP,最新刚接触这个框架,然后从别人那学来的用上了,写成了一个简单的demo,准备自己的下一个项目用这框架开发      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2017-08-08 17:56:41</span>
      </p>
      <p>
        <span class="read-num">阅读数:5100</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="76473403">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/76473403" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Androidstudio项目更换gradle版本      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/76473403" target="_blank">
        现在项目中一直用的是gradle2.14.1版本,发现在项目中引入了.so文件后编译项目的时候会报40多个错误,但是项目依然能够正常运行,这让我很头疼。所以一直在寻找更新gradle版本的方法,发现好多方法都是不行的,现在将我的方法分享给大家      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2017-07-31 22:20:23</span>
      </p>
      <p>
        <span class="read-num">阅读数:15322</span>
      </p>
      <p>
        <span class="read-num">评论数:1</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="68483560">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/68483560" target="_blank">
        <span class="article-type type-1">
            原        </span>
        AndroidStudio重新share代码和上传到svn新地址      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/68483560" target="_blank">
        一、最近公司代码大整理,需要废除之前的svn代码服务器,把所有的代码规范整理上传到新的svn服务器上,而大家都知道studio上传代码前有一个share步骤,然后再是import。而我也试了网上的一些方法,发现都是不行的,现在将我的方法整理出来给大家。1、网上贴出的第一个方法:右击工程选择“sub...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2017-03-30 10:02:35</span>
      </p>
      <p>
        <span class="read-num">阅读数:3049</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="53925766">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/53925766" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android Fragment中使用hide/show出现页面重叠、穿透现象      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/53925766" target="_blank">
        Android Fragment中使用hide/show出现页面重叠、在小米手机上,点击这三个Fragment的时候出现能隐约的看到已经被隐藏的Fragment。还有,在华为手机上,当一个activity奔溃以后重新返回后出现界面严重穿透重叠问题      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2016-12-29 11:42:33</span>
      </p>
      <p>
        <span class="read-num">阅读数:3727</span>
      </p>
      <p>
        <span class="read-num">评论数:1</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="52524646">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/52524646" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android集成微信支付,实战,跳坑。      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/52524646" target="_blank">
        之前开发的项目都有微信支付,所以对微信支付比较熟悉,现在对微信支付的集成进行详解: 
首先,去微信开发平台下载相关文档,SDK,微信开发者平台地址:https://open.weixin.qq.com/。      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2016-09-13 11:55:39</span>
      </p>
      <p>
        <span class="read-num">阅读数:921</span>
      </p>
      <p>
        <span class="read-num">评论数:0</span>
      </p>
    </div>
      </div>
  <div class="article-item-box csdn-tracking-statistics" data-articleid="52515530">
        <h4 class="">
        <a href="https://blog.csdn.net/wb_001/article/details/52515530" target="_blank">
        <span class="article-type type-1">
            原        </span>
        Android支付宝支付集成,同时支持无客户端H5支付      </a>
    </h4>
    <p class="content">
      <a href="https://blog.csdn.net/wb_001/article/details/52515530" target="_blank">
        支付宝支付在app项目中非常常见,现在把集成步骤提出了,虽然非常简单,但是,希望对第一次集成支付的同学有帮助。 
要集成别人的东西,第一步当然是去看他的开发文档,支付宝支付以前是在支付宝开发者平台,现在改成了蚂蚁金服开放平台https://open.alipay.com/platform/home...      </a>
    </p>
    <div class="info-box d-flex align-content-center">
      <p>
        <span class="date">2016-09-12 17:40:05</span>
      </p>
      <p>
        <span class="read-num">阅读数:7640</span>
      </p>
      <p>
        <span class="read-num">评论数:4</span>
      </p>
    </div>
      </div>
</div>
    </main>
   
</div>


</body>
</html>

我要的是class=‘article-list’元素下的h4标签下的a标签,这样就类似一个列表,所有使用each去循环取出a标签下的text和href属性,看我解析的代码是不是特别像JQuery代码?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值