HTML+CSS入门如何将html字符串转化为jquery对象-职坐标

HTML+CSS入门如何将html字符串转化为jquery对象

沉沙 2018-05-29 来源：阅读 1615 评论 0

摘要：本文讲解了将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);
}

//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频道！

前端需要掌握的技术 web前端技术有哪些 web前端开发基础知识

本文由 @沉沙发布于职坐标。未经许可，禁止转载。