jQuery, CSS3'ün seçebileceği her şeyi seçebilir. Ama burada bitmiyor! Bazen oldukça faydalı olan jQuery'nin sunduğu (Sizzle seçici motoru aracılığıyla) bir dizi ek seçici vardır. Örneğin, CSS, öğenin sahip olabileceği herhangi bir keyfi niteliğe göre bir öğeyi seçmenize olanak tanıyan nitelik seçicilerine sahiptir. Örneğin:
JQuery'de bunu seçmek için kullanabileceğimiz bir CSS seçici var:
$("(data-whatever='elephant-eyeballs')");Öznitelik seçicide, "bu değerle başlar" belirtmek yerine =yapabileceğiniz gibi varyasyonlar vardır ^=. Ancak bazı nedenlerden dolayı CSS'de! = Veya "bu değere eşit değil" yoktur. jQuery yapar! Bu bir jQuery seçici uzantısı örneğidir.
Bu seçici uzantıların birçoğu var. Bu ekran video kaydında özellikle bahsettiğimiz birkaç tanesi:
- : eq () -: nth-child () 0 dizinli sürümü
- : çift - kısayol: nth-çocuk (çift)
- : gt (n) - indeksi n'den büyük olan öğeleri seçin. Ayrıca daha karmaşık bir kısayol: nth-child () forumla.
Muhtemelen hepsinin en kullanışlı seçici uzantısı: has () - seçimi bu sözde seçiciye ilettiğinizi içeren öğelerle sınırlayan (veya sözde sözde bir seçici :) Muhtemelen bir gün gelecekte CSS gibi bir şeye sahip olacak bu bizim için (sanırım öyle olacak pre ! code) ama bu çok uzak. Ne yazık ki bu ekran video kaydında bunun için çok ikna edici bir argüman yapmıyorum, ancak ne zaman ihtiyacınız olduğunu anlayacaksınız! Örneğin "h3.sports-bar içeren tüm .modülleri seçin" - bu tür şeyler.
Dilerseniz kendi seçim uzantılarınızı da oluşturabilirsiniz. İşte bununla ilgili bir makale. Örnek, :inviewyalnızca sayfada geçerli kaydırma konumunda görünüyorsa, bir öğeyi hangi öğenin seçeceğini yapmaktır . Şöyle olurdu:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));