將html字符串轉化為jquery對象

jindong 發布于2019-08-19 17:37 / 3110人閱讀

摘要：用這個實際不存在的節點來保存這個文檔，然后返回的就是我要的對象的形式。在用實現之后，我又用重新寫了一個，具體如下這里如果改用就會報錯以下是我完整的整個插件的結構完整代碼如下獲取賬號密碼獲取中更新獲取免費賬號并更新到本地的代碼就是上面純版

昨天想寫一個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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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