jQuery 객체 및 DOM 요소

jQuery 객체 및 DOM 요소

jQuery object와 DOM element의 관계를 이해하고 싶습니다.

jQuery가 요소를 반환하면 다음과 같이 표시됩니다.[object Object]비상시에언제getElementByID표시되는 요소를 반환합니다.[object HTMLDivElement] 그게 정확히 무슨 뜻입니까?제 말은 둘 다 차이가 있는 물건인가요?

또한 jQuery object vs DOM element에서 작동할 수 있는 메소드는 무엇입니까?단일 jQuery 객체가 여러 DOM 요소를 나타낼 수 있습니까?

jQuery object와 DOM element의 관계를 이해하고 싶습니다.

jQuery 개체는 DOM 요소를 포함하는 배열과 유사한 개체입니다.jQuery 개체는 사용하는 선택기에 따라 여러 개의 DOM 요소를 포함할 수 있습니다.

또한 jQuery object vs DOM element에서 작동할 수 있는 메소드는 무엇입니까?단일 jQuery 객체가 여러 DOM 요소를 나타낼 수 있습니까?

는 가 합니다.Query 함수(전체 목록은 웹사이트에 있음)는 DOM 요소가 아닌 jQuery 객체에서 작동합니다.jQuery 함수 안의 DOM 요소에 접근할 수 있는 방법은.get()또는 원하는 인덱스에서 요소에 직접 액세스할 수 있습니다.

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

즉, 다음과 같은 결과를 얻을 수 있습니다.

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

jQuery 개체에 대한 자세한 내용은 설명서를 참조하십시오.다음에 대한 문서도 확인합니다.

jQuery를 사용하여 DOM 요소를 가져오면 jQuery 개체가 요소에 대한 참조를 포함합니다.네이티브 기능을 사용할 때는.getElementById, jQuery 객체 내에 포함되지 않은 요소에 대한 참조를 직접 가져옵니다.

jQuery 개체는 여러 개의 DOM 요소를 포함할 수 있는 배열과 같은 개체입니다.

var jQueryCollection = $("div"); //Contains all div elements in DOM

위의 행은 jQuery 없이 수행할 수 있습니다.

var normalCollection = document.getElementsByTagName("div");

는 , jQuery 입니다와 선택지를 할 때 할 입니다. 당신이 단순한 셀렉터를 통과할 때 말입니다.div. jQuery 컬렉션 내의 실제 요소에 액세스할 수 있는 방법은get방법:

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

jQuery 객체 안에 요소 또는 요소 집합이 있을 때는 jQuery API에서 사용할 수 있는 메소드를 사용할 수 있지만 원시 요소가 있을 때는 네이티브 자바스크립트 메소드만 사용할 수 있습니다.

저는 지난 달에 jQuery와 겨우 게임을 시작했는데, 마음속에 비슷한 질문이 떠올랐습니다.지금까지 받은 답변은 모두 정확하지만, 매우 정확한 답변은 다음과 같습니다.

함수에 있다고 가정하고 호출 요소를 참조하기 위해 다음 중 하나를 사용할 수 있습니다.this, 아니면$(this); 하지만 무엇이 다를까요?알고보니, 당신이 사용할 때$(this), 당신은 포장중입니다.thisjQuery 객체 안에 있습니다.객체가 jQuery 객체가 되면 그 위에 있는 모든 jQuery 함수를 사용할 수 있다는 장점이 있습니다.

아주 강력해요, 심지어 요소들을 끈으로 표현할 수도 있기 때문에var s = '<div>hello <a href='#'>world</a></div><span>!</span>', 문자 그대로 $($)로 포장하는 것만으로 jQuery 객체 안에 있습니다.$(s)할 수 이제 jQuery로 모든 요소를 조작할 수 있습니다.

의 jQuery입니다.Functions반환 값을 가지지 않고 오히려 전류를 반환합니다.jQuery Object혹은 다른jQuery Object.

---

그렇게,

console.log("(!!) jquery >> " + $("#id") ) ; 

돌아올 것입니다[object Object], 예를 들면jQuery Object셀렉터를 평가한 결과인 컬렉션을 유지합니다.String("#id")에 대항하여Document,

하는 동안에,

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

돌아올 것입니다[object HTMLDivElement](또는 사실은)[object Object]IE) 왜냐하면/반품 값이 a이기 때문입니다.div Element.

---

또한 jQuery object vs DOM element에서 작동할 수 있는 메소드는 무엇입니까? (1) 하나의 jQuery object가 여러 개의 DOM element를 나타낼 수 있습니까? (2

(1) 구성원 호스트가 있습니다.Function 된 sinjQuery와 Objects. imo에서 가장 좋은 방법은 jQuery API 문서에서 관련된 것을 검색하는 것입니다.Function특정 태스크가 있으면(예: 선택)Node또는 그들을 조종합니다).

• jQuery 설명서

,jQuery Object여러 DOM 목록을 유지할 수 있습니다.Element 개가 . 여러개가 있습니다Functions: 등)jQuery.find아니면jQuery.each이 자동 캐싱 동작을 기반으로 구축됩니다.

그것은 당신의 브라우저가 영리할 뿐입니다.둘 다 물체이지만 DOME 요소는 특별한 물체입니다.jQuery는 자바스크립트 객체에 DOMElements를 랩핑합니다.

더 많은 디버그 정보를 얻고 싶다면 Firebug for Firefox 및 Chrome의 내장 인스펙터(Firebug와 매우 유사함)와 같은 디버깅 도구를 살펴보는 것이 좋습니다.

언급한 것 외에 jQuery-object에서 설명에 따라 jQuery 객체를 가져온 이유에 대해 추가하고 싶습니다.

• 호환성.

요소 메소드 구현은 브라우저 벤더와 버전에 따라 다릅니다.

예를 들어 집합innerHTML대부분의 Internet Explorer 버전에서는 element가 작동하지 않을 수 있습니다.

이너셋팅가능jQuery 방식의 HTML과 jQuery는 브라우저의 차이점을 숨길 수 있도록 도와줄 것입니다.

// Setting the inner HTML with jQuery.

var target = document.getElementById( "target" );

$( target ).html( "<td>Hello <b>World</b>!</td>" );

• 편리

jQuery는 원활한 개발자 경험을 위해 jQuery 객체에 바인딩된 메소드 목록을 제공합니다. http://api.jquery.com/ 에서 일부 확인하십시오.웹사이트는 또한 일반적인 DOM 조작을 제공합니다. 저장된 요소를 삽입하는 방법을 알아보겠습니다.newElementtarget요소가 쌍방향입니다.

DOM 방식,

// Inserting a new element after another with the native DOM API.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

target.parentNode.insertBefore( newElement, target.nextSibling );

jQuery 방식,

// Inserting a new element after another with jQuery.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

$( target ).after( newElement );

이것이 보충제이기를 바랍니다.

언급URL : https://stackoverflow.com/questions/6974582/jquery-object-and-dom-element