jQuery HTML代码/文本

tml([val|fn]) 返回值:String

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。

如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

function(index, html) Function

此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的内容。

jQuery 代码:

$('p').html();

设置所有 p 元素的内容

jQuery 代码:

$("p").html("Hello <b>world</b>!");

使用函数来设置所有匹配元素的内容。

jQuery 代码:

$("p").html(function(index,n){
    return "这个 p 元素的 index 是：" + n;
});

text([val|fn]) 返回值:String

val String 用于设定HTML内容的值

function(index, html) Function 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的文本内容。

jQuery 代码:

$('p').text();

设置所有 p 元素的文本内容

jQuery 代码:

$("p").text("Hello world!");

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

$("p").text(function(index,n){
    return "这个 p 元素的 index 是：" + n;
});
$("#test").html();

意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("test").innerHTML;

直接获取、编辑内容

在jQuery中，主要是通过html()和text()两种方法来获取和编辑页面内容的。其中html()相当于获取节点的innerHTML属性，

添加参数html(text)时,则为设置innerHTML;而text()则用来获取元素的纯文本，text(content)为设置纯文本。

实例1:

jQuery代码:

$(function(){
    var sString = $("p:first").text(); //获取纯文本
    $("p:last").html(sString);
});

HTML代码:

<p><b>文本</b>段 落<em>示</em>例</p>
<p></p>

实例2:

jQuery代码:

$(function(){
    $("p").click(function(){
        var sHtmlStr = $(this).html(); //获取innerHTML
        $(this).text(sHtmlStr); //将代码做为纯文本传入
    });
});

HTML代码:

实例3：获取选择框的文本

$("#id").find("option:selected").text(); //获取Select选择的text文本
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$function(){
    $('#OK').bind('click', function () {
    alert($("#id").find("option:selected").text());
    });
}
</script>
</head>
<body>
<select id="select">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
</select>
<button id="OK">
获取为本</button>
</body>
</html>

$().html(); //获得节点包含的信息

$().html(信息); //设置节点包含的内容

$().text(); //获得节点包含的"文本字符串信息"内容

$().text(信息); //设置节点包含的内容(有html标签就把"><"符号变为符号实体)

注意: DOM操作必须保住DOM节点必须存在, 当然也包括使用css样式display:none隐藏的DOM节点, 否则会导致js语法错误;

Query创建Dom元素

代码如下：

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2 "http://www.w3.org/TR/html4/loose.dtd">3 <html>4 <head>5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">6 <title>jQuery创建Dom元素 - Liehuo.Net</title>78 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>9 <script language="javascript" type="text/javascript">10 $(function(){11 var oNewp = $("<p>我测试成功了</P>");12 oNewp.insertAfter("#target");13 });14 </script>151617 </head>1819 <body>20 <p id="target">21 网络学院 www.wfuyu.com 22 </p>23 </body>24 </html>25

需要注意的几点：

$(fuction(){

})此句就相当于window.onload函数，缺一不可。

总结：时刻要细心。

比Python，JavaScript才是更适合写爬虫的语言。原因有如下三个方面：

JavaScript异步IO机制适用于爬虫这种IO密集型任务。JavaScript中的回调非常自然，使用异步网络请求能够充分利用CPU。
JavaScript中的jQuery毫无疑问是最强悍的HTML解析工具，使用JavaScript写爬虫能够减少学习负担和记忆负担。虽然Python中有PyQuery，但终究还是比不上jQuery自然。
爬取结果多为JSON，JavaScript是最适合处理JSON的语言。

一、任务：爬取用户在Github上的repo信息

通过实例的方式学习爬虫是最好的方法，先定一个小目标：爬取github repo信息。入口URL如下，我们只需要一直点击next按钮就能够遍历到用户的所有repo。

https://github.com/{{username}}?tab=repositories

获取repo之后，可以做什么？

统计用户最常使用的语言，统计用户语言使用分布情况统计用户所获取的star数，fork数

二、爬虫双股剑：axios和jQuery

axios是JavaScript中很常用的异步网络请求库，相比jQuery，它更轻量、更专业。既能够用于浏览器端，也可以用于Node。它的语法风格是promise形式的。在本任务中，只需要了解如下用法就足够了：

axios.get(url).then((resp) => {
 请求成功，处理resp.data中的html数据
}).catch((err) => {
 请求失败，错误处理
})

请求之后需要处理回复结果，处理回复结果的库当然是用jQuery。实际上，我们有更好的选择：cheerio。

在node下，使用jQuery，需要使用jsdom库模拟一个window对象，这种方法效率较低，四个字形容就是：笨重稳妥。

如下代码使用jQuery解析haha.html文件

fs = require("fs")
jquery=require('jquery')
jsdom=require('jsdom') //fs.readFileSync()返回结果是一个buffer，相当于byte[] 
html = fs.readFileSync('haha.html').toString('utf8') 
dom= new jsdom.JSDOM(html) 
$=jquery(dom.window) console.log($('h1'))

cheerio只实现了jQuery中的DOM部分，相当于jQuery的一个子集。cheerio的语法和jQuery完全一致，在使用cheerio时，几乎感觉不到它和jQuery的差异。在解析HTML方面，毫无疑问，cheerio是更好的选择。如下代码使用cheerio解析haha.html文件。

cheerio=require('cheerio')
html=require('fs').readFileSync("haha.html").toString('utf8')
$=cheerio.load(html)
console.log($('h1'))

只需20余行，便可实现简单的github爬虫，此爬虫只爬取了一页repo列表。

var axios = require("axios")
var cheerio = require("cheerio")
axios.get("https://github.com/weiyinfu?tab=repositories").then(resp => {
 var $ = cheerio.load(resp.data)
 var lis = $("#user-repositories-list li")
 var repos = []
 for (var i = 0; i < lis.length; i++) {
 var li = lis.eq(i)
 var repo = {
 repoName: li.find("h3").text().trim(),
 repoUrl: li.find("h3 a").attr("href").trim(),
 repoDesc: li.find("p").text().trim(),
 language: li.find("[itemprop=programmingLanguage]").text().trim(),
 star: li.find(".muted-link.mr-3").eq(0).text().trim(),
 fork: li.find(".muted-link.mr-3").eq(1).text().trim(),
 forkedFrom: li.find(".f6.text-gray.mb-1 a").text().trim()
 }
 repos.push(repo)
 }
 console.log(repos)
})

三、更丰富的功能

爬虫不是目的，而是达成目的的一种手段。获取数据也不是目的，从数据中提取统计信息并呈现给人才是最终目的。

在github爬虫的基础上，我们可以扩展出更加丰富的功能：使用echarts等图表展示结果。

要想让更多人使用此爬虫工具获取自己的github统计信息，就需要将做成一个网站的形式，通过搜索页面输入用户名，启动爬虫立即爬取github信息，然后使用echarts进行统计展示。网站肯定也要用js作为后端，这样才能和js爬虫无缝衔接，不然还要考虑跨语言调用。js后端有两大web框架express和koa，二者API非常相似，并无优劣之分，但express更加流行。

如上设计有一处用户体验不佳的地方：当启动爬虫爬取github信息时，用户可能需要等待好几秒，这个过程不能让用户干等着。一种解决思路是：让用户看到爬虫爬取的进度或者爬取过程。可以通过websocket向用户推送爬取过程信息并在前端进行展示。展示时，使用类似控制台的界面进行展示。

如何存储爬取到的数据呢？使用MongoDB或者文件都可以，最好实现两种存储方式，让系统的存储方式变得可配置。使用MongoDB时，用到js中的连接池框架generic-pool。

整个项目用到的库包括：

express：后端框架
cheerio+axios：爬虫
ws：websocket展示爬取过程
webpack：打包工具
less：样式语言
echarts：图表展示
vue：模板渲染
jquery：DOM操作
mongodb：存储数据
generic-pool：数据库连接池

试用地址：

https://weiyinfu.cn/githubstatistic/search.html

案例地址：https://github.com/weiyinfu/GithubStatistic

原文链接：https://zhuanlan.zhihu.com/p/53763115

在线咨询

上一篇：带翻转特效的会员登录注册html页面源码
下一篇：关于html缓存的思考

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

jQuery HTML代码/文本

您的项目需求