JavaScriptでHTML文字列をjquery domオブジェクトに変換する方法

元の HTML 文字列は次のとおりです:

var text="<div id=&#39;overLay&#39; style=&#39;width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;&#39;>"
        + "<img style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39; width=&#39;43px&#39; height=&#39;43px&#39;/>"
        + "</div>";

1. Jquery ライブラリを使用して、テキスト文字列変数を Jquery オブジェクトに変換します。

Jquery コードは次のとおりです:

alert($(text).html());

$(text) は Jquery オブジェクトに変換されたテキスト文字列で、最後に Jquery オブジェクトの html() を使用して HTML コンテンツを文字列の形式で出力します。結果は以下の通りです:

<img style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39; width=&#39;43px&#39; height=&#39;43px&#39;/>

$(text)Jquery オブジェクトが最も外側の html 要素 div を表していることがわかります。

2. JqueryオブジェクトとDOMオブジェクトを相互に変換します。

コードは次のとおりです:

var element= $(text).get(0) //element就是一个dom对象
　　var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

注: DOM オブジェクトと Jquery オブジェクトの違い

私の理解では、Jquery オブジェクトと DOM オブジェクトはカプセル化された HTML 要素であり、HTML 要素ノード上で動作し、プログラミングを容易にします。たとえば、Jquery オブジェクトの html() メソッドは DOM オブジェクトで使用できず、DOM オブジェクトの GetElementById() メソッドは Jquery オブジェクトで使用できません。したがって、必要に応じて相互変換を行うことができる。

3. jsコードを使用して、テキスト文字列変数をDOMオブジェクトに変換します。

jsコードは以下の通りです:

/*字符串转dom对象*/
function loadXMLString(txt)
{
  try //Internet Explorer
   {
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async="false";
     xmlDoc.loadXML(txt);
     //alert('IE');
     return(xmlDoc);
   }
  catch(e)
   {
     try //Firefox, Mozilla, Opera, etc.
      {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
       //alert('FMO');
        return(xmlDoc);
      }
     catch(e) {alert(e.message)}
   }
  return(null);
}

テキスト文字列をDOMオブジェクトに変換するjsコードはブラウザ関連なので。 。 。 。 。 。分けて書きます。

このようにして、HTML文字列からJqueryオブジェクトやDOMオブジェクトへの変換が実現されます。

jQueryオブジェクトとdomオブジェクトの相互変換方法の紹介

jQueryを学び始めた当初は、どれがjQueryオブジェクトでどれがDOMオブジェクトなのか分からないかもしれません。 DOM オブジェクトに関しては、あまり多くの説明がありません。jQuery とその 2 つの変換に焦点を当てましょう。

jQuery オブジェクトとは何ですか?

---DOMオブジェクトをjQueryでラップして生成したオブジェクトです。 jQuery オブジェクトは jQuery に固有であり、jQuery のメソッドを使用できます。

例:

$("#test").html() は、ID テストを持つ要素内の HTML コードを取得することを意味します。このうち、html()はjQueryのメソッドです

このコードは

document.getElementById("id").innerHTML;
DOMオブジェクトをラップした後にjQueryオブジェクトが生成されますが、DOMを使用してコードを実装するのと同等です。 , jQueryは使用できません DOMオブジェクトのメソッドはどれも使用できません、同様にDOMオブジェクトもjQuery内のメソッドを使用するとエラーが報告されます。例: $("#test").innerHTML、document.getElementById("id").html() などの記述方法が間違っています。

もう 1 つの注意点は、#id をセレクターとして使用して取得される jQuery オブジェクトと document.getElementById("id") で取得される DOM オブジェクトは同等ではないということです。以下の 2 つの間の変換を参照してください。

jQuery は異なるものですが関連しているため、jQuery オブジェクトと DOM オブジェクトを相互に変換することもできます。 2 つを変換する前に、まず規則を作成します。jQuery オブジェクトを取得する場合は、次のように変数の前に $ を追加します。 var $variab = jQuery object; DOM オブジェクトを取得する場合は、次と同じです。通常 : var variab = DOM object; この規則は説明と区別の便宜のためだけであり、実際の使用では規定されていません。

jQuery オブジェクトから DOM オブジェクトへ:

jQuery オブジェクトを DOM オブジェクトに変換する 2 つの変換方法: [index] と .get(index);

(1) jQuery オブジェクトはデータ オブジェクトであり、渡すことができます。 [index] ] メソッドを使用して、対応する DOM オブジェクトを取得します。

例:

var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

(2) jQuery自体は、.get(index)メソッドを通じて、対応するDOMオブジェクトを取得できます

例:

var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOMオブジェクトをjQueryオブジェクトに変換します:

すでに DOM オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。 $(DOM object)

例:

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

変換後は、jQuery メソッドを自由に使用できます。

上記のメソッドを通じて、jQueryオブジェクトとDOMオブジェクトを自由に相互に変換できます。もう一度強調しておく必要があるのは、DOM 内のメソッドを使用できるのは DOM オブジェクトのみであり、jQuery オブジェクトは DOM 内のメソッドを使用できないということです。

JavaScript の HTML 文字列を jquery dom オブジェクトに変換する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。