Разница между $ (document.body) и $ ('body')

Question 1

Я новичок в jQuery и, просматривая несколько примеров кода, обнаружил:

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

Есть ли разница между этими двумя?

Question 2

Они относятся к одному и тому же элементу, разница в том, что когда вы говорите, document.bodyчто передаете элемент непосредственно в jQuery. В качестве альтернативы, когда вы передаете строку 'body', механизм выбора jQuery должен интерпретировать строку, чтобы выяснить, к какому элементу (элементам) она относится.

На практике любой из них выполнит свою работу.

Если вам интересно, в документации по функции jQuery есть дополнительная информация .

Question 3

Ответы здесь на самом деле не совсем правильные. Близко, но есть крайний случай.

Разница в том, что $ ('body') фактически выбирает элемент по имени тега, тогда как document.body ссылается на прямой объект в документе.

Это означает, что если вы (или мошеннический скрипт) перезаписываете элемент document.body (позор!), $ ('Body') все равно будет работать, а $ (document.body) - нет. Так что по определению они не эквивалентны.

Рискну предположить, что существуют и другие граничные случаи (например, элементы с глобальным идентификатором в IE), которые также будут вызывать то, что составляет перезаписанный элемент тела в объекте документа, и применима та же ситуация.

Question 4

При тестировании в моем браузере я обнаружил довольно большую разницу во времени.

Я использовал следующий сценарий:

ВНИМАНИЕ: запуск этого приложения немного подвесит ваш браузер, может даже привести к его сбою.

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>

Развернуть фрагмент

Я сделал 10 миллионов взаимодействий, и вот результаты (Chrome 65):

селектор: 19591.97509765625ms
элемент: 4947.8759765625ms

Передача элемента напрямую примерно в 4 раза быстрее, чем передача селектора.

Question 5

$(document.body)использует глобальную ссылку documentдля получения ссылки на body, тогда как $('body')является селектором, в котором jQuery получит ссылку на <body>элемент вdocument .

Я не вижу серьезной разницы, никакого заметного прироста производительности от одного к другому.

Question 6

Не должно быть вообще никакой разницы, возможно, первый вариант немного более производительный, но я думаю, что это тривиально (на самом деле, вам не стоит об этом беспокоиться).

В обоих случаях вы оборачиваете <body>тег в объект jQuery

Question 7

На выходе оба эквивалентны. Хотя второе выражение проходит поиск сверху вниз из корня DOM. Возможно, вы захотите избежать дополнительных накладных расходов (какими бы незначительными они ни были), если у вас уже есть объект document.body в руке для JQuery для переноса. См. Http://api.jquery.com/jQuery/ #Selector Context

Answer 1

105

Я новичок в jQuery и, просматривая несколько примеров кода, обнаружил:

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

Есть ли разница между этими двумя?

jquery document document-body Ashleedawg
источник

1

Один из них быстрее, однако, учитывая, что он никогда не будет вызван более нескольких раз на одной странице, разница между ними очень мала.

Kevin B

$(body)не работает для .on('click'...событий, тогда как $(document.body)и $(document)оба работают.

rybo111

3

Вышеупомянутое утверждение неверно, а также есть небольшая разница в производительности, примерно 10% в пользу $ (document.body). Вы можете просмотреть сравнение здесь sitepoint.com/jquery-body-on-document-on

Сигизмунд

Answer 2

1

Один из них быстрее, однако, учитывая, что он никогда не будет вызван более нескольких раз на одной странице, разница между ними очень мала.

Kevin B

Answer 3

$(body)не работает для .on('click'...событий, тогда как $(document.body)и $(document)оба работают.

rybo111

Answer 4

3

Вышеупомянутое утверждение неверно, а также есть небольшая разница в производительности, примерно 10% в пользу $ (document.body). Вы можете просмотреть сравнение здесь sitepoint.com/jquery-body-on-document-on

Сигизмунд

Answer 5

Они относятся к одному и тому же элементу, разница в том, что когда вы говорите, document.bodyчто передаете элемент непосредственно в jQuery. В качестве альтернативы, когда вы передаете строку 'body', механизм выбора jQuery должен интерпретировать строку, чтобы выяснить, к какому элементу (элементам) она относится.

На практике любой из них выполнит свою работу.

Если вам интересно, в документации по функции jQuery есть дополнительная информация .

Answer 6

1

Первое утверждение не совсем верно. Они могут относиться к одному и тому же элементу. Обычно даже. Но не всегда :). Смотрите мой ответ ниже.

jvenema

Answer 7

Ответы здесь на самом деле не совсем правильные. Близко, но есть крайний случай.

Разница в том, что $ ('body') фактически выбирает элемент по имени тега, тогда как document.body ссылается на прямой объект в документе.

Это означает, что если вы (или мошеннический скрипт) перезаписываете элемент document.body (позор!), $ ('Body') все равно будет работать, а $ (document.body) - нет. Так что по определению они не эквивалентны.

Рискну предположить, что существуют и другие граничные случаи (например, элементы с глобальным идентификатором в IE), которые также будут вызывать то, что составляет перезаписанный элемент тела в объекте документа, и применима та же ситуация.

Answer 8

Я не думаю, что это возможно установить document.bodyна что-либо иное, кроме a <body>: i.imgur.com/unJVwXy.png

mpen

Answer 9

Может быть решено сейчас. Было время, когда FF и IE позволяли вам это делать и / или запутывались элементами с идентификатором "body" (ошибка, которую я обнаружил, была связана с тем, что клиент использовал наш скрипт на сайте пластического хирурга с изображением с тегом идентификатор "тело"). Надеюсь, это больше не проблема :)

jvenema

Answer 10

12

При тестировании в моем браузере я обнаружил довольно большую разницу во времени.

Я использовал следующий сценарий:

ВНИМАНИЕ: запуск этого приложения немного подвесит ваш браузер, может даже привести к его сбою.

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>

Развернуть фрагмент

Я сделал 10 миллионов взаимодействий, и вот результаты (Chrome 65):

селектор: 19591.97509765625ms
элемент: 4947.8759765625ms

Передача элемента напрямую примерно в 4 раза быстрее, чем передача селектора.

Phiter
источник

7

Вы получаете положительный голос только за «обозначение стрелок», вы нахальный, вы!

KlaymenDK

1

Я где-то читал об этом и хотел сразу использовать XD

Phiter

Да, но - вы действительно собираетесь проделать это 10 миллионов раз? Почему бы не провести такой анализ там, где это необходимо?

scrayne

@scrayne, эти тесты производительности не касаются реальных вариантов использования. Довольно редко можно выполнить 10 миллионов операций с таким элементом. Но OP хотел узнать разницу, и я заметил, что есть разница в производительности, поэтому я полагаю, что это стоит отметить.

Phiter

Answer 11

7

Вы получаете положительный голос только за «обозначение стрелок», вы нахальный, вы!

KlaymenDK

Answer 12

1

Я где-то читал об этом и хотел сразу использовать XD

Phiter

Answer 13

Да, но - вы действительно собираетесь проделать это 10 миллионов раз? Почему бы не провести такой анализ там, где это необходимо?

scrayne

Answer 14

@scrayne, эти тесты производительности не касаются реальных вариантов использования. Довольно редко можно выполнить 10 миллионов операций с таким элементом. Но OP хотел узнать разницу, и я заметил, что есть разница в производительности, поэтому я полагаю, что это стоит отметить.

Phiter

Answer 15

$(document.body)использует глобальную ссылку documentдля получения ссылки на body, тогда как $('body')является селектором, в котором jQuery получит ссылку на <body>элемент вdocument .

Я не вижу серьезной разницы, никакого заметного прироста производительности от одного к другому.

Answer 16

9

$(document.body)значительно быстрее, согласно этой статье: sitepoint.com/jquery-body-on-document-on

Стив Харрисон,

Answer 17

Не должно быть вообще никакой разницы, возможно, первый вариант немного более производительный, но я думаю, что это тривиально (на самом деле, вам не стоит об этом беспокоиться).

В обоих случаях вы оборачиваете <body>тег в объект jQuery

Answer 18

На выходе оба эквивалентны. Хотя второе выражение проходит поиск сверху вниз из корня DOM. Возможно, вы захотите избежать дополнительных накладных расходов (какими бы незначительными они ни были), если у вас уже есть объект document.body в руке для JQuery для переноса. См. Http://api.jquery.com/jQuery/ #Selector Context

Разница между $ (document.body) и $ ('body')

Ответы: