$ (Document.body) ve $ ('body') arasındaki fark

105

Ben bir jQuery acemisiyim ve bazı kod örneklerine bakarken buldum:

$(document.body) ve $('body')

Bu ikisi arasında bir fark var mı?

jquery document document-body

— Ashleedawg
kaynak

1

Biri daha hızlıdır, ancak bunun tek bir sayfada asla birkaç kez çağrılmayacağı düşünülürse, ikisi arasındaki fark çok küçüktür.

— Kevin B

$(body).on('click'...olaylar için çalışmaz , oysa $(document.body)ve $(document)her ikisi de çalışır.

— rybo111

3

Yukarıdaki ifade yanlıştır ve ayrıca performansta küçük bir fark vardır, $ (document.body) lehine yaklaşık% 10. Karşılaştırmayı buradan görüntüleyebilirsiniz sitepoint.com/jquery-body-on-document-on

— Sigismund

78

Aynı öğeye başvururlar, fark, document.bodyöğeyi doğrudan jQuery'ye geçirdiğinizi söylediğinizde . Alternatif olarak, dizeyi ilettiğinizde 'body', jQuery seçici motorunun hangi öğelere başvurduğunu anlamak için dizeyi yorumlaması gerekir.

Uygulamada ya işi bitirecek.

İlgileniyorsanız, jQuery işlevinin belgelerinde daha fazla bilgi bulunmaktadır .

— Justin Ethier
kaynak

1

İlk ifade tamamen doğru değil. Onlar olabilir aynı elemana bakın. Genellikle eşit. Ama her zaman değil :). Aşağıdaki cevabıma bakın.

— jvenema

18

Buradaki cevaplar aslında tamamen doğru değil . Yakın, ama uç bir durum var.

Aradaki fark, $ ['body') öğesinin aslında öğeyi etiket adına göre seçmesidir, oysa document.body belgedeki doğrudan nesneye başvurur.

Bunun anlamı, siz (veya bir hileli komut dosyası) document.body öğesinin (ayıp!) $ ('Body') üzerine yazmanız durumunda yine de çalışacak, ancak $ (document.body) çalışmayacaktır. Yani tanım gereği eşdeğer değiller.

Belge nesnesindeki üzerine yazılan bir gövde öğesinin miktarını tetikleyen başka uç durumlar (IE'de küresel olarak tanımlanmış öğeler gibi) olduğunu ve aynı durumun geçerli olacağını tahmin etmeye cesaret ediyorum.

— Jvenema
kaynak

A'dandocument.body başka bir şeye ayarlanmasının mümkün olduğunu sanmıyorum <body>: i.imgur.com/unJVwXy.png

— mpen

Şimdi çözülebilir. FF ve IE'nin bunu yapmanıza izin verdiği ve / veya "body" kimliğine sahip öğeler tarafından kafalarının karıştığı zamanlar vardı (çarptığım hata, bir plastik cerrahın sitesinde, etiketli bir resimle komut dizimizi kullanan bir müşteriydi. kimlik "gövde"). Umarım artık sorun olmaz :)

— jvenema

12

Tarayıcımda test yaparken zamanlamada oldukça büyük bir fark buldum.

Aşağıdaki komut dosyasını kullandım:

UYARI: bunu çalıştırmak tarayıcınızı biraz dondurur, hatta çökebilir.

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>

Snippet'i genişlet

10 milyon etkileşim yaptım ve sonuçlar şunlardı (Chrome 65):

seçici: 19591.97509765625ms
öğe: 4947.8759765625ms

Öğeyi doğrudan geçmek, seçiciyi geçmekten yaklaşık 4 kat daha hızlıdır.

— Phiter
kaynak

7

Sadece "ok işareti" için bir olumlu oy alıyorsun, seni küstah herif!

— KlaymenDK

1

Bunu bir yerde okudum ve hemen kullanmak istedim XD

— Phiter

Evet, ama bunu gerçekten 10 milyon kez yapacak mısınız? Neden önemli olduğu yerde bu tür bir analiz yapmıyoruz?

— scrayne

@scrayne bu performans testleri gerçek kullanım durumlarıyla ilgili değil. Böyle bir unsurda 10 milyon işlem yapmak oldukça nadirdir. Ancak OP farkı bilmek istedi ve ben bir performans farkı olduğunu fark ettim, bu yüzden kayda değer olduğunu düşünüyorum.

— Phiter

9

$(document.body)Genel referans kullanarak documentbir referans almak için body, oysa $('body')jQuery'ye referans alacak olan bir seçici olan <body>öğenin document.

Görebildiğim kadar büyük bir fark yok, birinden diğerine gözle görülür bir performans kazancı yok.

— Gabe
kaynak

9

$(document.body)bu makaleye göre ölçülebilir şekilde daha hızlı: sitepoint.com/jquery-body-on-document-on

— Steve Harrison

6

Hiç fark olmamalı, belki ilki biraz daha performanslı ama bence önemsiz (bunun için endişelenmemelisin, gerçekten).

İkisiyle de <body>etiketi bir jQuery nesnesine sararsınız

— Nicola Peluchetti
kaynak

3

Sonuç olarak her ikisi de eşdeğerdir. İkinci ifade, DOM kökünden yukarıdan aşağıya bir aramadan geçer. JQuery'nin sarması için elinizde document.body nesnesine zaten sahipseniz, ek yükten kaçınmak isteyebilirsiniz (ne kadar küçük olursa olsun). Http://api.jquery.com/jQuery/ #Selector Bağlamına bakın

— derviş
kaynak