$(문서.본문)과 $('본문')의 차이
저는 jQuery 초보자인데 몇가지 코드 예시를 살펴보다가 다음을 발견했습니다.
$(document.body)그리고.$('body')
이 둘 사이에 다른 점이 있습니까?
그들은 같은 요소를 언급합니다. 차이점은 당신이 말할 때document.body요소를 jQuery에 직접 전달합니다.또는 문자열을 전달할 때'body', jQuery selector 엔진은 문자열을 해석하여 참조하는 요소를 파악해야 합니다.
실제로는 둘 중 하나가 일을 끝낼 것입니다.
관심이 있으시다면 jQuery 기능에 대한 자세한 내용이 설명서에 나와 있습니다.
여기 있는 답들은 사실 완전히 정확하지는 않습니다.가깝긴 한데, 가장자리 케이스가 있네요.
다른 점은 $'body'는 실제로 태그 이름으로 요소를 선택하는 반면, 문서라는 점입니다.본문은 문서의 직접 개체를 참조합니다.
즉, 사용자(또는 악성 스크립트)가 문서를 덮어쓰는 경우를 의미합니다.body element (body!) $('body')는 계속 작동하지만 $(body.body)는 작동하지 않습니다.그래서 정의상 그들은 동등하지 않습니다.
문서 개체에 덮어쓰기된 본문 요소를 트리거하는 다른 에지 케이스(IE의 전역적으로 식별된 요소 등)가 있다고 추측해 보겠습니다. 그리고 같은 상황이 적용됩니다.
브라우저에서 테스트할 때 타이밍 차이가 꽤 많이 나는 것을 발견했습니다.
다음 스크립트를 사용했습니다.
경고: 이 기능을 실행하면 브라우저가 약간 정지되고 심지어 충돌할 수도 있습니다.
var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
$("body");
}
console.timeEnd('selector');
i = n;
console.time('element');
while (i --> 0){
$(document.body);
}
console.timeEnd('element');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>천만번의 상호작용을 했고, 그 결과가 나왔습니다(Chrome 65).
선택기 : 19591.97509765625ms
요소 : 4947.8759765625ms
요소를 직접 통과시키는 것은 셀렉터를 통과하는 것보다 약 4배 빠릅니다.
$(document.body)글로벌 레퍼런스를 사용하고 있습니다.document에 대한 언급을 얻다body,반면에.$('body')는 jQuery가 참조할 선택기입니다.<body>에 있는 요소document.
눈에 보이는 큰 차이도 없고, 눈에 띄는 성능 향상도 없습니다.
첫 번째가 조금 더 성능이 좋은 것일 수도 있지만 사소한 것이라고 생각합니다(이에 대해 걱정하지 않으셔도 됩니다).
둘 다와 함께.<body>jQuery 개체에 태그를 지정합니다.
출력 기준으로 둘 다 동등합니다.두 번째 표현식은 DOM 루트에서 하향식 조회를 거칩니다.문서가 이미 있는 경우 추가 오버헤드를 피할 수도 있습니다.JQuery가 감싸기 위해 손에 든 본문 오브젝트.http://api.jquery.com/jQuery/ #Selector Context 참조
오늘은 https://developer.chrome.com/docs/extensions/mv3/getstarted/ 에서 크롬 확장 예제를 만들기 위해 노력하는 중입니다.
바꾸려고 했습니다.
document.body.style.backgroundColor = color;
와 함께
$("body").css("background-color", "black");
물론 HTML 파일에 이것을 추가했다고 말해야 합니다.
<script src="script/jquery-3.6.0.min.js"></script>
결과적으로 그것은 작동하지 않습니다.확장명의 목적인 페이지의 배경색은 변경되지 않습니다.
하지만 jQuery는 여전히 확장 팝업에서 요소를 변경/조작할 수 있습니다.
$(document)문서에 한다만에다만한ye에s.$('body')본문과 문서에 대한 언급.
이 작업을 수행할 때:
$('body').on('log', () => {
console.log('log body');
});
$(document).on('log', () => {
console.log('log document');
});
$('body').trigger('log'); => log body + log document
$(document).trigger('log'); => only log document
결과:
언급URL : https://stackoverflow.com/questions/12307112/difference-between-document-body-and-body
'programing' 카테고리의 다른 글
| 리사이클러뷰를 사용하여 ListView를 대체해야 합니까? (0) | 2023.09.12 |
|---|---|
| 최대 스케일 느리고 연결 끊김 (0) | 2023.09.07 |
| 폴더의 크기를 계산하려면 어떻게 해야 합니까? (0) | 2023.09.07 |
| Swift: Custom ViewController 초기화기 (0) | 2023.09.07 |
| Ctrl + TEXT AREA에서 jQuery를 사용하여 입력합니다. (0) | 2023.09.07 |