jQueryコードをJavascriptバージョンに変換する場合、jQueryコードをネイティブJavascript

に変換してください。私はpage.htmlとside.htmlという2つのページを持っています。 page.htmlはside.htmlドキュメントのdiv idとcontentを取ります。非常にうまく動作しますが、自分のプロジェクトにjQueryを使用しないことをお勧めします。コードをネイティブJavascriptに変更する方法はありますか？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で書かれています。 *バニラ* 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（）'を追加するのを忘れました。 –

それは動作します！どうもありがとうございます。 – Herelo

jQueryコードをJavascriptバージョンに変換する場合、jQueryコードをネイティブJavascript

答えて

関連する問題