dom 객체를 jquery 객체로 변환하는 방법-프런트엔드 Q&A-php.cn

dom 객체를 jquery 객체로 변환하는 방법

青灯夜游

풀어 주다： 2022-03-11 15:32:41

원래의

4698명이 탐색했습니다.

dom 개체를 jquery 개체로 변환하는 방법: "$()"를 사용하여 DOM 개체를 래핑하고 구문은 "$(DOM 개체)"입니다. 변환 후 jQuery에서 어떤 메서드든 사용할 수 있습니다.

dom 객체를 jquery 객체로 변환하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

DOM 객체

DOM(Document Object Model, Document Object Model), 각 DOM은 트리로 표현될 수 있습니다. 먼저 간단한 예를 살펴보겠습니다. 코드는 다음과 같습니다.

// ...省略其他代码
<h3>例子</h3>
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>
// ...省略其他代码

로그인 후 복사

는 위의 HTML 구조를 DOM 트리로 설명합니다.

dom 객체를 jquery 객체로 변환하는 방법

이 DOM 트리의 노드는 모두 DOM 요소 노드입니다. JS에서 getElementByTagName 또는 getElementById를 통해 요소 노드를 가져올 수 있습니다. 이렇게 얻은 DOM 요소가 DOM 객체입니다.

jQuery 객체

jQuery 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다.

jQuery 개체는 jQuery에 고유합니다. 객체가 jQuery 객체인 경우 jQuery의 메서드를 사용할 수 있습니다. DOM 객체의 어떤 메소드도 jQuery 객체에서 사용할 수 없으며, 동일한 DOM 객체가 jQuery의 메소드를 사용할 수 없습니다.

dom 객체를 jquery 객체로 변환하는 방법

DOM 객체의 경우 DOM 객체를 $()로 래핑하기만 하면 jQuery 객체를 얻을 수 있습니다. 메소드는 $(DOM 객체)입니다. 변환 후에는 jQuery에서 모든 메소드를 사용할 수 있습니다.

참고: 일반적으로 사용되는 jQuery 객체는 $() 함수를 통해 제조됩니다. $() 함수는 jQuery 객체의 제조 공장입니다.

jquery 코드는 다음과 같습니다.

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-1.10.2.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM对象
  var $cr = $(cr);   //jquery对象
  $cr.eq(0).("fuck"); //检测是否转换成功，可以用jquery方法 输出结果为第二个my改成了fuck
  $cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>

로그인 후 복사

변환 후에는 모든 jquery 메서드를 사용할 수 있습니다.

위 방법을 통해 jquery 객체와 DOM 객체 웹페이지 효과를 마음대로 서로 변환할 수 있습니다.

마지막으로 DOM 객체만 DOM 메서드를 사용할 수 있다는 점을 다시 강조합니다. jquery 객체는 DOM에서 메서드를 사용할 수 없지만 jquery 객체는 DOM 운영을 위한 보다 완전한 도구 세트를 제공합니다.

【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】

위 내용은 dom 객체를 jquery 객체로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!