轉換jQuery代碼到本地JavaScript

我是否我的jQuery代碼轉換成JavaScript版本。我有兩頁：page.html和side.html page.html從side.html文檔中取得div id和內容。它工作得很好，但我更喜歡不使用我的項目jQuery。如何將我的代碼修改爲原生Javascript？轉換jQuery代碼到本地JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Useless</title> 
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script> 
</head> 
<body> 
    Hello 
    <script type="text/javascript"> 
     jQuery.ajax({ 
       url: "side.html", 
       success: function(result) { 
       var html = jQuery('<div>').html(result); 
        alert(html.find("div#a").attr("id")); 
        alert(html.find("div#a").html()); 
        alert(html.find("div#b").attr("id")); 
        alert(html.find("div#b").html()); 
      }, 
     }); 
    </script> 
</body> 
</html>

我寫這篇文章的代碼，但它不工作:(

var html = new XMLHttpRequest(); 
html.open("POST","side.html", true); 
success: function(result) { 
var html = ('<div>').html(result); 
    alert(html.find("div#a").attr("id")); 
    alert(html.find("div#a").html()); 
    alert(html.find("div#b").attr("id")); 
    alert(html.find("div#b").html()); 
}

來源

2017-03-15 Herelo

jQuery是用JavaScript編寫的。我認爲你的意思是你想用* vanilla * JavaScript重寫你的代碼。 – gyre

只需看看jquery .ajax並刪除不想使用的代碼即可。 – Jules

是的，我想用香草只改寫我的代碼Javascript – Herelo

從你的嘗試，看來你可能會想到的是，jQuery和原生API的幾乎是一樣的，他們是沒有，所以需要相當多的更多的變化。

注意，在下面的代碼中的註釋。另外請注意，我刪除了alert調用和使用console.log代替，所以一定要打開開發者控制檯。

// Create and open the XHR object 
var xhr = new XMLHttpRequest(); 
xhr.open("POST","side.html", true); 

// Attach an event handler that fires when the requested content has loaded 
xhr.addEventListener("load", function(result) { 
    var d = document.createElement('div'); // Create a new element 
    d.innerHTML = xhr.responseText;  // Add the response text 

    var a = d.querySelector("#a"); // Fetch the `a` element 
    var b = d.querySelector("#b"); // Fetch the `b` element 

    console.log(a.id, a.innerHTML); // Display the id and content of each 
    console.log(b.id, b.innerHTML); 
}); 

xhr.send();

這是很常見的有公用事業小集合，以減少冗餘代碼。這裏沒有多少需要，但總的來說，具有縮短DOM選擇和創建方法功能的函數並不是一個壞主意。

來源

2017-03-15 23:03:08

謝謝。但開發者控制檯是空 – Herelo

@Herelo：我忘了加上'xhr.send（）'結尾。 – 2017-03-15 23:17:14

它的工作原理！非常感謝。 – Herelo

轉換jQuery代碼到本地JavaScript

回答

相關問題