将html字符串转化为jquery对象

jindong 发布于2019-08-19 17:37 / 3442人阅读

摘要：用这个实际不存在的节点来保存这个文档，然后返回的就是我要的对象的形式。在用实现之后，我又用重新写了一个，具体如下这里如果改用就会报错以下是我完整的整个插件的结构完整代码如下获取账号密码获取中更新获取免费账号并更新到本地的代码就是上面纯版

昨天想写一个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);
});

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

Document

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

").append(data)这个方案。用$("
")这个实际不存在的节点来保存这个html文档，然后append返回的就是我要的jq对象的形式。

在用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);
}

完整代码如下：

//popup.html






  
  Document
  
  



  
  获取中......

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

云服务器 GPU云服务器 php将数组转化对象转化为对象将语音转化为文字的软件 js将数据转化为json

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78697.html

JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

_Dreams 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

luck 2019-08-19 18:24 评论0 收藏0
基于Ajax技术的前后端Json数据交互方式实现

摘要：不过这种方式只能访问静态的页面，无法与后端数据库进行交互。既然用户需要通过前端实时与后端数据库进行交互，那么网页也需要动态的更新，如果每次更新一个数据都通过重新获取文件的方式来实现势必会导致网络负荷加重，页面加载迟缓。前言使用浏览器访问网站是日常生活中必不可少的一件事情，当我们在浏览器地址栏中输入网址后会看到网站的内容，那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程。 ...

fengxiuping 2019-08-01 18:20 评论0 收藏0
基于Ajax技术的前后端Json数据交互方式实现

摘要：不过这种方式只能访问静态的页面，无法与后端数据库进行交互。既然用户需要通过前端实时与后端数据库进行交互，那么网页也需要动态的更新，如果每次更新一个数据都通过重新获取文件的方式来实现势必会导致网络负荷加重，页面加载迟缓。前言使用浏览器访问网站是日常生活中必不可少的一件事情，当我们在浏览器地址栏中输入网址后会看到网站的内容，那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程。 ...

LdhAndroid 2019-08-21 18:39 评论0 收藏0
jQuery--1

摘要：网页中所有的结果绘制完毕后就执行，可能元素关联的东西并没有加载完。必须等待网页中所有的内容加载完毕后包括图片才能执行。对象就是通过包装对象后产生的对象。代码如下对象对象另一种方法是本身提供的，通过方法得到相应的对象。 $(document).ready(function{});//网页中所有的DOM结果绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。window.onload=...

roundstones 2019-08-22 17:24 评论0 收藏0