html转换jquery,将html字符串转化为jquery对象

昨天想写一个chrome爬虫插件,我用jq试了一下,情况是这样的:

var baseUrl = "http://www.example.com/";

function startFetch() {

$.get(baseUrl, function (data) {

var str = $('

$('#log').html(str);

});

}

$(function () {

$("#startFetch").bind("click", startFetch);

});

一开始发现,$.get返回的数据是一个完整的html代码,就像这样:

Document

我直接用$(data)得到的是一个dom节点集合,而不是一个jq对象,stackoverflow上也有人问到这种情况,综合几种情况,我采用了$('

在用jq实现之后,我又用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);

}

以下是我完整的整个插件的结构:

|-js

|-popup.js

|-icon16.png

|-icon48.png

|-icon128.png

|-manifest.json

|-popup.html

完整代码如下:

//popup.html

Document

#log {

width: 200px;

line-height: 20px;

}

获取账号密码

获取中......

//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版

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值