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代碼:
<p><b>文本</b>段 落<em>示</em>例</p>
實例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才是更適合寫爬蟲的語言。原因有如下三個方面:
一、任務:爬取用戶在Github上的repo信息
通過實例的方式學習爬蟲是最好的方法,先定一個小目標:爬取github repo信息。入口URL如下,我們只需要一直點擊next按鈕就能夠遍歷到用戶的所有repo。
https://github.com/{{username}}?tab=repositories
獲取repo之后,可以做什么?
二、爬蟲雙股劍: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。
整個項目用到的庫包括:
試用地址:
https://weiyinfu.cn/githubstatistic/search.html?
案例地址:https://github.com/weiyinfu/GithubStatistic
原文鏈接:https://zhuanlan.zhihu.com/p/53763115
*請認真填寫需求信息,我們會在24小時內與您取得聯系。