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

最近のプロジェクトの要件は、Baidu Maps に関連するアプリケーションを開発することです。js または jq で要素のノードと属性を操作するため、必要な要素と属性情報を抽出する必要があります。以下に、JavaScript で HTML 文字列を jquery dom オブジェクトに変換する方法を紹介します。必要な方は、以下のとおりです。

var text="<p 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;/>"
        + "</p>";

1.テキスト文字列変数を Jquery オブジェクトに変換します。

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

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

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

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

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

var element= $(text).get(0) //element就是一个dom对象
　　var jqueryobj=$(element);//jqueryobj就是一个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);
}

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

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

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

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

このコードは、DOMを使用してコードを実装するのと同等です:

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

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

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 オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。 $(DOM object)

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

js を介して HTML の元のコンテンツを変更する方法

以上がJavaScriptでHTML文字列をjquery domオブジェクトに変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。