Разница между $ (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