jquery 객체와 DOM 객체 사이의 모든 변환_jquery
- WBOY원래의
- 2016-05-16 15:14:401174검색
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 객체를 얻으면 변수 앞에 $를 추가하세요. 예를 들어
var $varible = jquery 객체
DOM 객체를 얻으면 다음과 같이 정의됩니다.
var 변수 = DOM 객체
1. jquery 객체를 DOM 객체로 변환:
Jquery 객체는 DOM에서 메소드를 사용할 수 없지만, jquery 객체가 제공하는 메소드에 익숙하지 않거나 jquery가 캡슐화하려는 메소드가 없는 경우에는 DOM 객체, 즉 [index] 및 get[을 사용해야 합니다. 색인].
(1) jquery 객체는 배열 객체이며, [index] 메소드를 통해 해당 DOM 객체를 얻을 수 있습니다.
jquery 코드는 다음과 같습니다
<body>
<p>my</p>
<p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
var $cr = $("p"); //jquery对象
var cr = $cr[1]; //dom对象
var ct = $cr.get(0) //第二种转换为DOM对象的方式
cr.innerHTML = "you" //检测是否转换成功，可以用DOM方法 输出结果为第二个my改成了you
ct.innerHTML = 'fuck' //输出结果第一个my改成了fuck
</script>
</body>
(2).DOM 객체를 jquery 객체로 변환:
DOM 객체의 경우 DOM 객체를 $()로 래핑하기만 하면 jquery 객체를 얻을 수 있습니다. 메소드는 $(DOM 객체)입니다.
jquery 코드는 다음과 같습니다.
<body>
<p>my</p>
<p>my</p>
<script src="jquery-2.1.4.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 작동을 위한 보다 완전한 도구 세트를 제공합니다.
모두가 이 기사를 좋아하길 바랍니다.