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 개체는 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 객체란 무엇인가요?

---jQuery를 통해 DOM 객체를 Wrapping하여 생성한 객체입니다. jQuery 개체는 jQuery에 고유하며 jQuery에서 메서드를 사용할 수 있습니다.

예:

$("#test").html()은 ID가 test인 요소에서 html 코드를 가져오는 것을 의미합니다. 그 중 html()은 jQuery의 메소드입니다.

이 코드는 DOM을 사용하여 코드를 구현하는 것과 같습니다.

document.getElementById("id").innerHTML;

하지만 jQuery 객체는 래퍼입니다. DOM 객체 다음에 생성되지만 jQuery는 DOM 객체의 어떤 메소드도 사용할 수 없습니다. 마찬가지로 DOM 객체도 jQuery의 메소드를 사용할 수 없습니다. 예: $("#test").innerHTML, document.getElementById("id").html() 및 기타 작성 방법이 잘못되었습니다.

또 한 가지 주목해야 할 점은 #id를 선택자로 사용하면 jQuery 객체와 document.getElementById("id")로 얻은 DOM 객체가 동일하지 않다는 점입니다. 아래 둘 사이의 변환을 참조하세요.

jQuery는 다르지만 서로 연관되어 있으므로 jQuery 개체와 DOM 개체도 서로 변환할 수 있습니다. 두 가지를 변환하기 전에 먼저 규칙을 만듭니다. jQuery 객체를 얻은 경우 다음과 같이 변수 앞에 $를 추가합니다. var $variab = jQuery 객체를 얻은 경우 다음과 같습니다. : var variab = DOM object; 이 규칙은 설명과 구별의 편의를 위한 것일 뿐 실제 사용에서는 규정되지 않습니다.

jQuery 객체를 DOM 객체로 변환:

두 가지 변환 방법은 jQuery 객체를 DOM 객체로 변환합니다: [index] 및 .get(index);

(1 )jQuery object는 데이터 객체이며, 해당 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 객체의 경우 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 중국어 웹사이트에 주목하세요!