ความแตกต่างระหว่าง $ (document.body) และ $ ('body')

104

ฉันเป็นมือใหม่ jQuery และในขณะที่ดูตัวอย่างโค้ดฉันพบ:

$(document.body) และ $('body')

มีความแตกต่างระหว่างสองสิ่งนี้หรือไม่?

jquery document document-body

— เถ้าถ่าน
แหล่งที่มา

1

หนึ่งเร็วกว่าอย่างไรก็ตามเมื่อพิจารณาว่าจะไม่ถูกเรียกเกินสองสามครั้งในหน้าเดียวความแตกต่างระหว่างสองหน้านั้นน้อยมาก

— Kevin B

$(body)ไม่ทำงานสำหรับ.on('click'...เหตุการณ์ที่เกิดขึ้นในขณะที่$(document.body)และ$(document)การทำงานของทั้งสอง

— rybo111

3

ข้อความข้างต้นเป็นเท็จและยังมีความแตกต่างเล็กน้อยในด้านประสิทธิภาพโดยประมาณ 10% เมื่อเทียบกับ $ (document.body) คุณสามารถดูการเปรียบเทียบได้ที่นี่sitepoint.com/jquery-body-on-document-on

— Sigismund

77

พวกเขาอ้างถึงองค์ประกอบเดียวกันความแตกต่างคือเมื่อคุณบอกว่าdocument.bodyคุณส่งผ่านองค์ประกอบไปยัง jQuery โดยตรง หรืออีกวิธีหนึ่งคือเมื่อคุณส่งสตริงเอ็น'body'จินตัวเลือก jQueryจะต้องตีความสตริงเพื่อดูว่ามันอ้างถึงองค์ประกอบใด

ในทางปฏิบัติจะได้งานทำ

หากคุณมีความสนใจมีข้อมูลเพิ่มเติมในเอกสารสำหรับฟังก์ชั่น jQuery

— จัสตินเอเทียร์
แหล่งที่มา

1

คำสั่งแรกไม่ถูกต้องสมบูรณ์ พวกเขาอาจหมายถึงองค์ประกอบเดียวกัน โดยปกติแล้ว แต่ไม่เสมอไป :). ดูคำตอบของฉันด้านล่าง

— jvenema

18

คำตอบที่นี่ไม่ได้เป็นจริงอย่างสมบูรณ์ถูกต้อง ปิด แต่มีขอบกรณี

ความแตกต่างคือ $ ('body') เลือกองค์ประกอบตามชื่อแท็กในขณะที่ document.body อ้างถึงวัตถุโดยตรงบนเอกสาร

นั่นหมายความว่าหากคุณ (หรือสคริปต์โกง) เขียนทับองค์ประกอบ document.body (ความอัปยศ!) $ ('body') จะยังใช้งานได้ แต่ $ (document.body) จะไม่ทำงาน ตามความหมายแล้วมันไม่เทียบเท่า

ฉันกล้าที่จะเดาว่ามีกรณีขอบอื่น ๆ (เช่นองค์ประกอบที่ไม่ได้ใช้งานทั่วโลกใน IE) ที่จะทริกเกอร์จำนวนเงินให้กับองค์ประกอบเนื้อหาที่เขียนทับบนวัตถุเอกสารและจะใช้สถานการณ์เดียวกัน

— jvenema
แหล่งที่มา

ฉันไม่คิดว่าจะตั้งค่าdocument.bodyเป็นอย่างอื่นได้นอกจาก a <body>: i.imgur.com/unJVwXy.png

— mpen

สามารถแก้ไขได้แล้ว มีช่วงเวลาหนึ่งที่ FF และ IE จะปล่อยให้คุณทำสิ่งนี้และ / หรืออาจสับสนกับรายการที่มี id ของ "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 เท่า

— Phiter
แหล่งที่มา

7

คุณได้รับการโหวตเพิ่มขึ้นสำหรับ "สัญกรณ์ลูกศร" คุณหน้าด้านฟิเตอร์คุณ!

— KlaymenDK

1

ฉันอ่านเกี่ยวกับเรื่องนี้ที่ไหนสักแห่งและต้องการใช้ทันที XD

— Phiter

ใช่ แต่ - คุณจะทำ 10 ล้านครั้งนี้จริงๆหรือ? ทำไมไม่ทำการวิเคราะห์แบบนี้ที่มันนับ

— scrayne

@scrayne การทดสอบประสิทธิภาพเหล่านั้นไม่เกี่ยวกับกรณีการใช้งานจริง ค่อนข้างหายากที่จะดำเนินการ 10 ล้านครั้งกับองค์ประกอบเช่นนี้ แต่ OP ต้องการทราบความแตกต่างและฉันสังเกตเห็นว่ามีความแตกต่างด้านประสิทธิภาพดังนั้นฉันคิดว่ามันน่าสังเกต

— Phiter

9

$(document.body)กำลังใช้การอ้างอิงส่วนกลางdocumentเพื่อรับการอ้างอิงถึงในbodyขณะที่$('body')ตัวเลือกที่ jQuery จะได้รับการอ้างอิงถึง<body>องค์ประกอบบนไฟล์document.

ไม่มีความแตกต่างที่สำคัญที่ฉันเห็นไม่ใช่ประสิทธิภาพที่เพิ่มขึ้นอย่างเห็นได้ชัดจากอีกด้านหนึ่ง

— Gabe
แหล่งที่มา

9

$(document.body)จะเร็วขึ้นอย่างวัดผลได้จากบทความนี้: sitepoint.com/jquery-body-on-document-on

— Steve Harrison

6

ไม่ควรมีความแตกต่างเลยบางทีคนแรกอาจจะเป็นนักแสดงมากกว่าเล็กน้อย แต่ฉันคิดว่ามันเป็นเรื่องเล็กน้อย (คุณไม่ควรกังวลเรื่องนี้จริงๆ)

ด้วยทั้งคุณห่อ<body>แท็กในวัตถุ jQuery

— Nicola Peluchetti
แหล่งที่มา

3

เอาท์พุททั้งสองเทียบเท่ากัน แม้ว่านิพจน์ที่สองจะผ่านการค้นหาจากบนลงล่างจากรูท DOM คุณอาจต้องการหลีกเลี่ยงค่าใช้จ่ายเพิ่มเติม (อย่างไรก็ตามอาจมีขนาดเล็กที่สุด) หากคุณมีวัตถุ document.body อยู่แล้วเพื่อให้ JQuery ปิดทับ โปรดดูที่http://api.jquery.com/jQuery/ #Selector Context

— ซานตัน
แหล่งที่มา