jQuery DOM'den nasıl geçiyor?

Bir seçici kullandığınızda jQuery'nin DOM'ı nasıl geçtiğini merak ediyordum. Her "birinci seviye" elemanına bakar ve sonra her birinin içine bakar mı? Yoksa bu "birinci seviye" elemanların her çocuğuna birer birer mi bakıyor?jQuery DOM'den nasıl geçiyor?

[1] <div> 
    [3] <div> 
     [5] <p id="target"></p> 
     </div> 
    </div> 
[2] <div> 
    [4] <div> 
      <p></p> 
     </div> 
    </div>

Veya benzeri:

[1] <div> 
    [2] <div> 
     [3] <p id="target"></p> 
     </div> 
    </div> 
    <div> 
     <div> 
      <p></p> 
     </div> 
    </div>

$("div p#target")

daha fazla gibi devam mı:

beni ben şu seçici verilen bazı hızlı örneklerle ne hayal açıklayalım

kaynak

2011-10-31 Pioul

jQuery SizzleJS kullanır, bu soruya bir cevap değil ama belki onların docs yardımcı olabilir: http: // sizzlejs. com/ve https://github.com/jquery/sizzle/wiki/Sizzle-Home – Thys

JQuery her zaman sizzle kullanmaz. Örneğin, '$ ('# mydiv')' sizzle kullanmayacaktır. Krom ve firefox, '$ ('. Mydiv')' 'sizzle kullanmayacak ama IE <9'da olacak. – AlienWebguy

Tamam, o zaman nasıl çalışacağını bilmek için tahmin edilebilir bir yol yok:/ – Pioul

Geçiş elementleri DOM olan aynı sırada gerçekleşir:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
    <head> 
     <title>query traversal order</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    </head> 
    <body> 
     <ul> 
      <li id="parent1"> 
       <ul> 
        <li id="child1"></li> 
        <li id="child2"></li> 
       </ul> 
      </li> 
      <li id="parent2"> 
       <ul> 
        <li id="child3"></li> 
        <li id="child4"></li> 
       </ul> 
      </li> 
     </ul> 
     <script type="text/javascript"> 
      // keep a list of ids 
      var arr = []; 
      // loop over all li elements 
      $('li').each(function(){ 
       // add their id to the array 
       arr.push($(this).attr('id')); 
      }); 
      // show contents of the array 
      alert(arr.join(', ')); 
     </script> 
    </body> 
</html>

Bu "Üst_öğe_1, child1, alt2, parent2, child3, child4" uyaracaktır; Örnekte

kaynak

2011-10-31 19:42:08 Kris

'a bakmayı zahmetsiz kılabilirdi? Bazı insanların yukarıda söylediklerini görmek çok tutarlı görünmüyor. Sonunda kendi başıma deneyebilirim, ama kim bilir, belki zaten yapmışsınız: D – Pioul

Peki hayır, bunu sadece Safari'de doğrudan TextMate'den çalıştırdım, ancak belgede tüm düğümleri bulması gerektiğinden çok anlam ifade ediyor. Başka bir sipariş için bir ağaç geçişi uygulamak daha zor olurdu. – Kris

Bu, "karar verme" hiçbir şey için yeterli bir kanıt olmamasına rağmen, doğrudur. Snippet'inizi bazı tarayıcılarda çalıştırırım ve yanılıyorsak buraya geri döneceğim. – Pioul

Onlardan geçtiği sırayı kastediyorsanız, ben jQuery'nin kendisi değil, gerçek DOM işlevleri olduğu varsayılıyor. Bu muhtemelen uygulamaya bağımlıdır ve buna güvenmeyeceğim (belki de şartnamede tanımlanmadığı sürece).

Böyle bir ayrıntıyı bilmesi için ne yapmaya çalışıyorsunuz? Belki de asıl sorunu çözmeye yardımcı olabiliriz.

kaynak

2011-10-31 19:35:31

Traversal belge düzeninde, yani gerçekleşmesi için büyük olasılıkla belirtilir. Önce derinlik (OP'deki diyagram 2). – AKX

Belirli bir sorunla karşılaşmam ama jQuery'yi kapsamlı bir şekilde kullanıyorum ve içeride nasıl çalıştığını bilmek, örneğin daha iyi seçmenler yapmama yardımcı olur. İlk örneğimde olduğu gibi çalışırsa, ilk div'a bir kimlik vermeyi tercih ederim, böylece bilinen her tarayıcıda ikinci bir – Pioul

, bunun böyle işleyecek beklerdim:

<div> 
[2] <div>     //check it matches the selector 
    [1] <p id="target"></p> //document.getElementById is cheap 
    </div> 
</div> 
<div> 
    <div> 
     <p></p> 
    </div> 
</div>

kaynak

2011-10-31 19:48:58 Eric

haha evet bu doğru, ama bu örnek şov içindi, ben daha karmaşık DOM'lerle olan şeyle ilgileniyorum – Pioul

jQuery DOM'den nasıl geçiyor?

cevap

İlgili konular