Різниця між $ (document.body) та $ ('body')

104

Я початківець jQuery і, переглядаючи деякі приклади коду, я знайшов:

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

Чи є різниця між цими двома?

jquery document document-body

— ashleedawg
джерело

1

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

— Кевін Б

$(body)не працює для .on('click'...подій, тоді як $(document.body)і $(document)обидва працюють.

— rybo111

3

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

— Сигізмунд

77

Вони посилаються на той самий елемент, різниця полягає в тому, що, коли ви говорите, що document.bodyви передаєте елемент безпосередньо jQuery. Альтернативно, коли ви передаєте рядок 'body', двигун вибору jQuery повинен інтерпретувати рядок, щоб зрозуміти, до яких елементів (ив) він відноситься.

На практиці або вийде виконати роботу.

Якщо вас цікавить, у документації для функції jQuery є додаткова інформація .

— Джастін Етьє
джерело

1

Перше твердження не зовсім коректне. Вони можуть посилатися на один і той же елемент. Зазвичай навіть. Але не завжди :). Дивіться мою відповідь нижче.

— jvenema

18

Відповіді тут насправді не повністю правильні. Близько, але є крайовий корпус.

Різниця полягає в тому, що $ ('body') насправді вибирає елемент за назвою тегу, тоді як document.body посилається на безпосередній об’єкт у документі.

Це означає, що якщо ви (або негідний сценарій) перезаписуєте документ document.body елемент (сором!) $ ('Body') все одно буде працювати, але $ (document.body) не буде. Тож за визначенням вони не рівноцінні.

Я б ризикну здогадатися, що є й інші крайові випадки (наприклад, глобально ідентифіковані елементи в IE), які також спровокують те, що становить перезаписаний елемент тіла на об'єкті документа, і буде застосовано та сама ситуація.

— jvenema
джерело

Я не думаю, що можливо встановити document.bodyщось інше, ніж <body>: i.imgur.com/unJVwXy.png

— mpen

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

— jvenema

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 рази швидше, ніж передача селектора.

— Фітер
джерело

7

Ви отримуєте нагороду лише за "позначення стрілки", ви сміливий фітер!

— KlaymenDK

1

Я десь читав про це десь і хотів використати це відразу XD

— Фітер

Так, але - ви дійсно збираєтесь це зробити 10 мільйонів разів? Чому б не зробити такий аналіз там, де він рахується?

— scrayne

@scrayne ці тести на ефективність не стосуються реальних випадків використання. Досить рідко робити 10 мільйонів операцій на такому елементі. Але ОП хотіла знати різницю, і я помітила, що є різниця у продуктивності, тому я припускаю, що це варто відзначити.

— Фітер

9

$(document.body)використовує глобальну посилання documentдля отримання посилання на body, тоді $('body')як це селектор, в якому jQuery отримає посилання на <body>елемент наdocument .

Ніякої суттєвої різниці, яку я бачу, ні помітного підвищення продуктивності від одного до іншого.

— Гейб
джерело

9

$(document.body)Вимірюється

— Стів Гаррісон

6

Тут не повинно бути різниці, можливо, перший трохи ефективніший, але я думаю, що це банально (ви не повинні турбуватися про це, насправді).

За допомогою обох ви загортаєте <body>тег у об’єкт jQuery

— Нікола Пелучетті
джерело

3

Вихідні дані обидва рівнозначні. Хоча другий вираз проходить через пошук зверху вниз від кореня DOM. Ви можете уникнути додаткових накладних витрат (як би це не було мізерно), якщо у вас вже є об'єкт document.body, щоб JQuery завернути. Див. Http://api.jquery.com/jQuery/ # Вибір контексту

— Сантон
джерело