> 웹 프론트엔드 > JS 튜토리얼 > jQuery 객체 및 DOM 객체 사용 지침_jquery

jQuery 객체 및 DOM 객체 사용 지침_jquery

WBOY
풀어 주다: 2016-05-16 18:24:40
원래의
866명이 탐색했습니다.
1. jQuery 객체와 DOM 객체
jQuery를 처음 배울 때는 어떤 것이 jQuery 객체인지, 어떤 것이 DOM 객체인지 분간하기 어려운 경우가 많기 때문에 jQuery 객체와 DOM 객체를 이해하는 데 집중해야 합니다. DOM 객체와 이들 간의 관계
DOM 객체는 전통적인 방법(javascript)을 사용하여 얻은 객체이고, jQuery 객체는 jQuery 클래스 라이브러리의 선택기를 사용하여 얻은 객체입니다. >
var domObj = document.getElementById("id") // DOM 객체
var $obj = $( "#id"); //jQuery 객체;


jQuery 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다. . 객체가 jQuery 객체인 경우 jQuery의 메소드를 사용할 수 있습니다. 예를 들면 다음과 같습니다.
$("#foo").html() //ID가 foo인 요소에서 html 코드를 가져옵니다. html()은 jQuery 전용 메서드입니다.
위 코드는
document.getElementById("foo").innerHTML과 동일합니다.

참고: DOM 객체의 모든 메서드는 사용할 수 없습니다. jQuery 객체에서.
예를 들어 $("#id").innerHTML 및 $("#id").checked는 $("#id").html() 및 $("# id")를 사용할 수 있습니다. 대신 .attr("확인됨")을 사용하세요. 마찬가지로 DOM 객체는 jQuery 메서드를 사용할 수 없습니다. jQuery를 배울 때 올바른 개념을 정립하고 jQuery 객체와 DOM 객체의 차이점을 구별해야 합니다. 그러면 jQuery를 배우기가 훨씬 쉬워집니다.


2. jQuery 객체와 DOM 객체 간의 변환

위의 첫 번째 항목에서 언급했듯이 jquery 객체와 dom 객체는 다릅니다! 예를 들어, jquery 객체는 dom 메서드를 사용할 수 없고 dom 객체는 jquery 메서드를 사용할 수 없습니다. 그렇다면 jquery가 원하는 메서드를 캡슐화하지 않으면 어떻게 해야 할까요?
이때 jquer 객체를 dom 객체로 변환할 수 있습니다

jquery 객체를 dom 객체로 변환
jquery는 jquery 객체를 dom 객체로 변환하는 두 가지 방법, 즉 [index ] 및 get(인덱스). 어떤 사람들은 왜 첨자가 사용되는지 궁금해할 수 있습니다. 예, jquery 객체는 배열 객체입니다.
다음 코드에서는 jquery 객체를 dom 객체로 변환한 다음 dom 객체 메서드를 사용하는 방법을 보여줍니다.


var $cr=$("#cr") //jquery object
var cr = $cr[0]; //DOM 객체는 다음과 같이 작성할 수도 있습니다. var cr=$cr.get(0)
alert(cr.checked); //이 확인란이 선택되어 있는지 확인하세요.


dom 객체를 jquery 객체로 변환
dom 객체의 경우 jquery 객체를 얻으려면 dom 객체를 $()로 래핑하기만 하면 됩니다.


var cr=document.getElementById("cr "); //dom 객체
var $cr = $(cr); //jquery 객체로 변환


변환 후에는 jquery에서 어떤 메소드든 사용할 수 있습니다.

위 방법을 통해 jquery 객체와 dom 객체를 서로 임의로 변환할 수 있습니다. DOM 운영을 위한 더 완전한 도구 세트인 jquery의 dom 운영은 이후 기사에서 자세히 설명됩니다.


ps: 일반적으로 사용되는 jquery 객체는 모두 $() 함수를 통해 생성됩니다. $() 함수는 jquery 객체의 제조 공장입니다.
제안: 가져온 객체가 jquery 객체인 경우 변수 앞에 $를 추가하면 어느 것이 jquery 객체인지 더 쉽게 식별할 수 있습니다. :
var $variable = jquery object;
dom 객체를 얻으면 다음과 같이 정의됩니다.
var 변수 = dom 객체
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿