摘要:本文讲解了将html字符串转化为jquery对象的方法,希望阅读本篇文章以后大家有所收获,学会如何将html字符串转化为jquery对象,帮助大家HTML+CSS入门。
var baseUrl = "//www.example.com/"; function startFetch() { $.get(baseUrl, function (data) { var str = $('<div></div>').append(data).find('#id').html(); $('#log').html(str); }); } $(function () { $("#startFetch").bind("click", startFetch); });
一开始发现,$.get返回的数据是一个完整的html代码,就像这样:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title></head><body></body></html>
直接用$(data)得到的是一个dom节点集合,而不是一个jq对象,stackoverflow上也有人问到这种情况,综合几种情况,我采用了$('<div></div>').append(data)这个方案。用$('<div></div>')这个实际不存在的节点来保存这个html文档,然后append返回的就是我要的jq对象的形式。
在用jq实现之后,又用js重新写了一个,具体如下:
var baseUrl = "//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 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #log { width: 200px; line-height: 20px; } </style> <script type="text/javascript" src="js/popup.js"></script></head> <body> <button id="startFetch">获取账号密码</button> <div id="log">获取中......</div></body> </html> //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版
本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端HTML/CSS频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号