jQuery 객체와 DOM 객체 변환 방법에 대한 자세한 설명_jquery

본 글은 jQuery 객체와 DOM 객체 간의 변환 방식을 예시를 통해 분석한 것입니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

dom 개체로 변환된 jQuery 개체

jQuery 객체만이 jQuery 클래스 라이브러리의 다양한 기능을 호출할 수 있습니다. 마찬가지로 dom 객체의 일부 속성과 메서드는 jQuery에서 호출할 수 없지만 기본적으로 jQuery 클래스 라이브러리에서 제공하는 함수에는 모든 dom 작업이 포함됩니다. 때로는 특히 jQuery를 처음 접하고 jQuery의 모든 기능을 기억할 수 없는 경우 개발을 위해 jQuery 선택기와 원래 DOM 기능을 오랫동안 사용하게 됩니다. 따라서 두 개체의 변환이 필요합니다.

jQuery 객체의 인덱스는 dom 객체를 저장하므로, 인덱스를 통해 jQuery 객체를 dom 객체로 변환할 수 있습니다(실제로는 jQuery 객체에 저장된 dom 객체를 얻습니다).

$("#myphoto")[0];

인덱스를 통해 dom 객체를 반환한 후 dom 객체의 src 속성을 가져오는 등 dom 객체의 다양한 메서드와 속성을 사용할 수 있습니다.

alert($("#myphoto")[0].src);

jQuery 객체의 각 요소를 반복하려면 일반적으로 Each() 함수를 사용합니다.

echo(callback);

Callback()은 콜백 함수이며 이 함수의 this도 dom 요소를 가리킵니다.

$("#myphoto").each(function(i){
     this,src="test"+i+".jpg";
});

게으른 사람들을 위한 작은 팁입니다. 다른 jQuery 함수에서 이것이 jQuery 객체인지 this 객체인지 기억하고 싶지 않다면 "this" 메소드를 사용하여 둘 다 jQuery 객체로 변환할 수 있습니다. 개체는 이미 jQuery 개체입니다. 잘못될 수도 없습니다.

Dom 객체를 jQuery 객체로 변환

dom 개체를 얻은 경우 "jQuery(elements)" 함수를 사용하여 이를 jQuery 개체로 변환할 수 있습니다.

var img=document.getElementById("myphoto");
jQuery(img).css("border","solid 2px #FF0000");

위 코드에서 img는 dom을 사용하여 얻은 dom 객체입니다. jQuery 객체로 변환한 후 jQuery 객체의 css() 메서드를 사용하여 스타일을 변경할 수 있습니다.

jQuery 내부에 다음 구현이 있으므로 "jQuery" 대신 "$"를 사용할 수 있습니다.

jQuery=window.jQuery=window.$

"$" 문자는 JavaScript에서 변수 이름으로 사용될 수 있으며 접두사로 나타날 수 있습니다. 그러나 일부 다른 라이브러리나 프로그램에서는 이미 "$"를 변수 이름으로 사용하고 있을 수 있습니다.

jQuery(img).css("border","solid 2px #FF0000");
$(img). css("border","solid 2px #FF0000");

위의 두 진술은 동일합니다.

"jQuery(elements)" 함수의 elements 매개변수는 jQuery 객체일 수도 있습니다. 이번에는 jQuery 객체를 변환하는 것이 의미가 없지만, 객체는 jQuery 객체이거나 dom 객체이므로 다시 변환할 수 있습니다. 변환을 위해 이 함수를 호출하면 이 객체가 jQuery 객체여야 합니다.

더 많은 jquery 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다. "jQuery의 DOM 노드 운영 방법 요약", "일반적인 jquery 운영 기술 요약 ", "JQuery 일반 이벤트 사용법 및 기술 요약", "jQuery 작업 json 데이터 기술 요약", "jQuery xml 작업 xml 기술 요약" 및 "jQuery 확장 기술 요약》

이 기사가 Jquery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.