文档章节

Ajax抓取页面将html转为dom对象并且获取对象内部的元素

大笨牛一只
 大笨牛一只
发布于 2015/11/30 22:51
字数 251
阅读 248
收藏 8
点赞 0
评论 0

html转dom,使用Jquery的一个方法$.parseHTML()可以轻松的实现。

首先我本地虚拟了一个www.test.com的主机环境:

新建一个index.html的网页,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			type: 'GET',
			dataType: 'text',
			url: 'http://www.test.com/baidu.html',
			success: function(res){
				console.log(res);
				var dom = $.parseHTML(res);
				var html = '';
				$(dom).find('#u1 a').each(function(i,item){
					html += '<p>'+$(item).text()+'</p>';
				});
				$('.news').html(html);
			},
			error: function(){
				console.log('网页抓取失败');
			}
		});
	});
</script>
</head>
<body>
    <div class="news"></div>
</body>
</html>

并在相同目录新建一个baidu.html的文件,从百度首页拷贝源码进去。

浏览器打开www.test.com/index.html,可以看到百度首页的导航已经被输出到网页上:

糯米

新闻

hao123

地图

视频

贴吧

登录

设置

更多产品



© 著作权归作者所有

共有 人打赏支持
大笨牛一只
粉丝 4
博文 29
码字总数 9188
作品 0
广州
个人站长
前端框架开发指南

Dom是一款专门针对移动端的JS库,集成了大部分常用DOM操作API,你不需要学习任何新的东西,其用法和jQuery几乎是一样的。 创建一个Dom对象很简单只需通过 $ 对象即可 $(selector, [context])...

369yun ⋅ 2016/03/24 ⋅ 0

01-老马jQuery教程-jQuery入口函数及选择器

前言 这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu.com/s5508922.html 1.什么是jQuery? 1.1 ...

aicoder ⋅ 2017/11/24 ⋅ 0

Java程序员从笨鸟到菜鸟之(八十七)跟我学jquery(三)jquery动态创建元素和常用函数示例

在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解...

长平狐 ⋅ 2012/11/12 ⋅ 0

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目,因为该公...

阮一峰 ⋅ 2015/03/31 ⋅ 0

跟我学jquery(三)jquery动态创建元素和常用函数示例 .

在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解...

挨踢人生 ⋅ 2012/07/27 ⋅ 0

前端基础---jquery

1、jQuery简介 [1] jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team。 [2] jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——W...

迟到的栋子 ⋅ 2017/10/26 ⋅ 0

2015年最热门前端框架React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目,因为该公...

数通畅联 ⋅ 2015/11/23 ⋅ 0

Python自动化开发学习24-Django中(AJAX)

讲师的博客地址:http://www.cnblogs.com/wupeiqi/articles/5703697.html 。号称是AJAX全套 原生Ajax Ajax主要就是使用 XmlHttpRequest 对象来完成请求的操作,该对象在主流浏览器中均存在(...

骑士救兵 ⋅ 05/18 ⋅ 0

六、jQuery与Ajax的应用

Ajax全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现,揭开了无刷新...

Winnie007 ⋅ 2015/11/21 ⋅ 0

jquery的一些用法 有用的用法。

AJAX 框架 用Asp.net ajax 还是 Jquery? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NETAJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery,众多的 $g...

雪中漫步 ⋅ 2010/03/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

监控各项服务

比如有三个服务, 为了减少故障时间,增加监控任务,使用linux的 crontab 实现. 步骤: 1,每个服务写一个ping接口 监控如下内容: 1,HouseServer 是否正常运行,所以需要增加一个ping的接口 ; http...

黄威 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

nodejs __proto__跟prototype

前言 nodejs中完全没有class的这个概念,这点跟PHP,JAVA等面向对象的语言很不一样,没有class跟object的区分,那么nodejs是怎么样实现继承的呢? 对象 对象是由属性跟方法组成的一个东西,就...

Ai5tbb ⋅ 昨天 ⋅ 0

Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库

Q: Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库 A: 执行以下2条命令解决: apt-get install php-mysql service apache2 restart php -m 执行后会多以下4个模块: mysqli mysqlnd...

SamXIAO ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部