Duydum birkaç kez bir WordPress kullanmak en güçlü varlık gibi sorgular ve yönetir elemanları DOM: kullanabilirsiniz CSS sorguları oluşturmak için karmaşık sorgular olacağını çok zor bunu düzenli javascript . Ancak , bildiğim kadarıyla , document.querySelector document.querySelectorAll ile aynı sonucu yukarıda Internet Explorer 8 ve desteklenen () elde edebilirsiniz .

Soru - 'riskli' bir WordPress kullanmak eğer bu kadar güçlü bir varlık, saf JavaScript ile sağlanabilirse yükü ? neden

Bir WordPress kullanmak daha CSS seçiciler , örneğin biliyorum çapraz tarayıcı AJAX, hoş bir olay vb ekleme. Ama sorgulama kısmı jQuery gücü çok büyük bir parçasıdır .

Herhangi bir düşünce?

document.querySelectorAll()tarayıcılar arasında bazı tutarsızlıklar var ve eski tarayıcılarda desteklenmiyor^{Bu muhtemelen herhangi bir sorun artık günümüzde neden olmaz}. scoping mechanism ve bazı diğer 20* *Bir çok sezgisel olmayan bir şey var. Ayrıca javascript ile daha zor bir zaman birçok durumda yapmak isteyebilirsiniz bu sorgu sonuç kümeleri ile çalışma var. jQuery fonksiyonları gibi çalışmak sağlar: *, find(), children(), parent(), , * map()not()8 ve çok daha fazlası. Çalışmak için bir WordPress kullanmak yeteneği söz pseudo-sınıf seçiciler.

Ancak, DV en güçlü özellikleri ama "" dom (etkinlikler, tasarım, animasyon ve manipülasyon). çalışıyormuş gibi diğer şeyler gibi şeyleri asla kabul etmezdim ^strong>crossbrowser uyumluöyle ya ajax arayüzü.

Eğer siz tek bir WordPress kullanmak seçici motoru istiyorsan kullanarak kendisi jQuery kullanabilirsiniz:SizzleBöyle iğrenç yükü olmadan jQuerys güç Seçici motoru var.

EDİT: Sadece kayıt için, vanilya JavaScript büyük bir hayranıyım. Yine de 1 satır jQuery yazarsınız nerede bazen JavaScript 10 satır gereken bir gerçek.

Tabii ki böyle bir WordPress kullanmak değil, yazmak için disiplinli olmak zorunda:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

Bu ikincisi çok açık olsa da son derece zor okunuyor,:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

JavaScript çok daha karmaşık olurdu eşdeğer yarı kod ile yukarıdaki resimli:

1) eleman Bul, eleman ya da sadece ilk alarak düşünün.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) çocuk dizi Yineleme (muhtemelen) iç içe ya da özyinelemeli bazı döngüler üzerinden düğümleri ve sınıfı (tüm tarayıcılarda kullanılamaz classlist!) kontrol edin

//.find('.foo')
for (var i = 0;i<e.length;i  ){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('.foo');
     // do some more magic stuff here
}

3) css stili uygulamak

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

Bu kod jQuery ile yazdığınız kodu en az iki kat daha fazla satır olurdu. Ayrıca yerel kodu severe speed advantage (güvenilirlik haricinde) uzlaşma olacak çapraz tarayıcı sorunları olduğunu düşünebilirsiniz.