摘要:用這個實際不存在的節(jié)點來保存這個文檔,然后返回的就是我要的對象的形式。在用實現(xiàn)之后,我又用重新寫了一個,具體如下這里如果改用就會報錯以下是我完整的整個插件的結(jié)構(gòu)完整代碼如下獲取賬號密碼獲取中更新獲取免費賬號并更新到本地的代碼就是上面純版
昨天想寫一個chrome爬蟲插件,我用jq試了一下,情況是這樣的:
var baseUrl = "http://www.example.com/"; function startFetch() { $.get(baseUrl, function (data) { var str = $("").append(data).find("#id").html(); $("#log").html(str); }); } $(function () { $("#startFetch").bind("click", startFetch); });
一開始發(fā)現(xiàn),$.get返回的數(shù)據(jù)是一個完整的html代碼,就像這樣:
Document
我直接用$(data)得到的是一個dom節(jié)點集合,而不是一個jq對象,stackoverflow上也有人問到這種情況,綜合幾種情況,我采用了$("").append(data)這個方案。用$("")這個實際不存在的節(jié)點來保存這個html文檔,然后append返回的就是我要的jq對象的形式。
在用jq實現(xiàn)之后,我又用js重新寫了一個,具體如下:
var baseUrl = "http://www.example.com/"; var get = request.bind(this, "GET"); function startFetch() { get(baseUrl, function (data) { var newDiv, str; newDiv = document.createElement("div"); newDiv.innerHTML = data; //這里如果改用appendChild就會報錯 str = newDiv.querySelectorAll("selector")[1].innerHTML; document.getElementById("log").innerHTML = str; }); } window.onload = function () { document.getElementById("startFetch").addEventListener("click", startFetch); }; function request(type, url, opts, callback) { var xhr = new XMLHttpRequest(); if (typeof opts === "function") { callback = opts; opts = null; } xhr.open(type, url); var fd = new FormData(); if (type === "POST" && opts) { for (var key in opts) { fd.append(key, JSON.stringify(opts[key])); } } xhr.onload = function () { callback(xhr.response); }; xhr.send(opts ? fd : null); }
以下是我完整的整個插件的結(jié)構(gòu):
|-js
|-popup.js
|-icon16.png
|-icon48.png
|-icon128.png
|-manifest.json
|-popup.html
完整代碼如下:
//popup.htmlDocument 獲取中......
//manifest.json { "manifest_version": 2, "name": "更新ss", "description": "獲取免費賬號并更新到本地", "version": "1.0", "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "browser_action": { "default_icon": "icon128.png", "default_popup": "popup.html" }, "permissions": [ "activeTab", "webRequest", "webNavigation", "webRequestBlocking", "proxy", "*://*/*" ] }
popup.js的代碼就是上面純js版
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/78697.html
摘要:具有相同的父元素,并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度,是大于零。元素的或被認為是可見的,因為他們?nèi)匀徽加每臻g布局。 jQuery對象轉(zhuǎn)化成DOM對象 ? ? jQuery庫本質(zhì)上還是JavaScript代碼,它只是對JavaScript語言進行包裝處理,為了是提供更好更方便快捷的DOM處理與開發(fā)常見中經(jīng)常使用的功能。我們可以用jQuery...
摘要:具有相同的父元素,并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素??梢娫氐膶挾然蚋叨龋谴笥诹?。元素的或被認為是可見的,因為他們?nèi)匀徽加每臻g布局。 jQuery對象轉(zhuǎn)化成DOM對象 ? ? jQuery庫本質(zhì)上還是JavaScript代碼,它只是對JavaScript語言進行包裝處理,為了是提供更好更方便快捷的DOM處理與開發(fā)常見中經(jīng)常使用的功能。我們可以用jQuery...
摘要:不過這種方式只能訪問靜態(tài)的頁面,無法與后端數(shù)據(jù)庫進行交互。既然用戶需要通過前端實時與后端數(shù)據(jù)庫進行交互,那么網(wǎng)頁也需要動態(tài)的更新,如果每次更新一個數(shù)據(jù)都通過重新獲取文件的方式來實現(xiàn)勢必會導(dǎo)致網(wǎng)絡(luò)負荷加重,頁面加載遲緩。 前言 使用瀏覽器訪問網(wǎng)站是日常生活中必不可少的一件事情,當(dāng)我們在瀏覽器地址欄中輸入網(wǎng)址后會看到網(wǎng)站的內(nèi)容,那么這個過程中發(fā)生了什么?下面簡單介紹下瀏覽器訪問網(wǎng)站過程。 ...
摘要:不過這種方式只能訪問靜態(tài)的頁面,無法與后端數(shù)據(jù)庫進行交互。既然用戶需要通過前端實時與后端數(shù)據(jù)庫進行交互,那么網(wǎng)頁也需要動態(tài)的更新,如果每次更新一個數(shù)據(jù)都通過重新獲取文件的方式來實現(xiàn)勢必會導(dǎo)致網(wǎng)絡(luò)負荷加重,頁面加載遲緩。 前言 使用瀏覽器訪問網(wǎng)站是日常生活中必不可少的一件事情,當(dāng)我們在瀏覽器地址欄中輸入網(wǎng)址后會看到網(wǎng)站的內(nèi)容,那么這個過程中發(fā)生了什么?下面簡單介紹下瀏覽器訪問網(wǎng)站過程。 ...
摘要:網(wǎng)頁中所有的結(jié)果繪制完畢后就執(zhí)行,可能元素關(guān)聯(lián)的東西并沒有加載完。必須等待網(wǎng)頁中所有的內(nèi)容加載完畢后包括圖片才能執(zhí)行。對象就是通過包裝對象后產(chǎn)生的對象。代碼如下對象對象另一種方法是本身提供的,通過方法得到相應(yīng)的對象。 $(document).ready(function{});//網(wǎng)頁中所有的DOM結(jié)果繪制完畢后就執(zhí)行,可能DOM元素關(guān)聯(lián)的東西并沒有加載完。window.onload=...
閱讀 3178·2021-10-08 10:04
閱讀 1127·2021-09-30 09:48
閱讀 3498·2021-09-22 10:53
閱讀 1717·2021-09-10 11:22
閱讀 1729·2021-09-06 15:00
閱讀 2183·2019-08-30 15:56
閱讀 740·2019-08-30 15:53
閱讀 2318·2019-08-30 13:04