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

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

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

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

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

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

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

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

これは、$(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 オブジェクトは使用できません。また、Jquery オブジェクトでは DOM オブジェクトの GetElementById() を使用できません。したがって、必要に応じて相互変換を行うことができる。

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 test を持つ要素内の HTML コードを取得します。このうち、html()はjQuery

のメソッドです。

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

document.getElementById("id").innerHTML;

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

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

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

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

2 つの変換メソッドは、jQuery オブジェクトを DOM オブジェクトに変換します: [index] と .get(index);

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

例:

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 オブジェクト)

例:

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

変換後は、任意の jQuery メソッドを使用できます。

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