2012-09-06 3 views
72

저는 JQuery 초보자이며 일부 코드에서 몇 가지 예를 살펴 보았습니다.

$(document.body)$('body')

사람이 두 사이에 어떤 차이가 말해 주시겠습니까?

+1

하나는 더 빠르지 만 한 페이지에서 몇 번이라도 호출되지 않는다고 생각하면 두 페이지의 차이는 매우 작습니다. –

+0

'$ (body)'는'.on ('click'...'이벤트)에서는 작동하지 않지만'$ (document.body)'와'$ (document)'는 모두 작동합니다 – rybo111

+3

위의 문장은 거짓이며 또한 성능에 약간의 차이가 있습니다. $ (document.body)에 약 10 %의 유리합니다. 비교를 보려면 https://www.sitepoint.com/jquery-body-on-document-on/ – Sigismund

답변

5

어쨌든 차이는 없어야합니다. 첫 번째는 좀 더 성능이 뛰어나지 만 사소한 것 같습니다. (정말로 걱정할 필요는 없습니다.) $('body') jQuery를이 <body> 요소에 대한 참조를 얻을 것이다하는 선택 인 반면

모두

당신은 jQuery를 객체

7

$(document.body)body에 대한 참조를 얻기 위해 글로벌 참조 document을 사용하고있는 <body> 태그를 포장 document

눈에 띄는 차이가 없으며 성능 차이가 눈에 띄지 않습니다.

+4

'$ (document.body)'는 https : //www.sitepoint와 같이이 기사에 따르면 상당히 빠릅니다.com/jquery-body-on-document-on/ –

53

그들은 동일한 요소를 참조합니다. 차이점은 document.body이라고 말하면 요소를 jQuery에 직접 전달한다는 것입니다. 또는 문자열 'body'을 전달할 때 jQuery selector engine은 참조하는 요소를 알아 내기 위해 문자열을 해석해야합니다.

실제로는 작업이 완료됩니다.

자세한 내용은 설명서의 jQuery function에 대한 추가 정보를 참조하십시오.

+0

첫 번째 문이 완전히 올바르지 않습니다. 그것들은 같은 요소를 참조 할 수도 있습니다. 보통 심지어. 하지만 항상 그런 것은 아닙니다. 아래 내 대답을 참조하십시오. – jvenema

3

Outputwise 모두 ​​동등합니다. 두 번째 표현식은 DOM 루트에서 top down lookup을 거치지 만. JQuery가 랩핑 (wrap over) 할 수 있도록 document.body 오브젝트를 이미 가지고 있다면 추가적인 오버 헤드를 피할 수있다. http://api.jquery.com/jQuery/ #Selector Context

6

여기에있는 답변은 실제로 완전이 아닙니다. 닫기지만 가장자리가 있습니다.

차이점은 실제로 $ ('body')는 태그 이름으로 요소를 선택하지만 document.body는 문서에서 직접 개체를 참조한다는 것입니다.

즉, 악의적 인 스크립트가 document.body 요소를 덮어 쓰면 $ ('body')는 여전히 작동하지만 $ (document.body)는 작동하지 않습니다. 그래서 그들은 정의에 의해 동등하지 않습니다.

문서 개체의 덮어 쓴 본문 요소에 해당하는 다른 가장자리 사례 (IE에서 전역 id'ed 요소와 같은)가있는 것으로 추측하고 동일한 상황이 적용됩니다.