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代碼/文本

您的項目需求