jQuery dapat memilih apa pun yang dapat dipilih CSS3. Tapi itu tidak berhenti sampai di situ! Ada sejumlah selektor tambahan yang ditawarkan jQuery (melalui mesin pemilih Sizzle) yang terkadang sangat berguna. Misalnya, CSS memiliki pemilih atribut yang memungkinkan Anda memilih elemen berdasarkan atribut arbitrer apa pun yang mungkin dimiliki elemen tersebut. Contohnya:
Ada pemilih CSS yang bisa kita gunakan di jQuery untuk memilih itu:
$("(data-whatever='elephant-eyeballs')");Ada variasi pada pemilih atribut, seperti yang =dapat Anda lakukan ^=untuk menunjukkan "dimulai dengan nilai ini". Tetapi untuk beberapa alasan, CSS tidak memiliki! = Atau "tidak sama dengan nilai ini". jQuery melakukannya! Itu adalah contoh ekstensi pemilih jQuery.
Ada banyak ekstensi pemilih ini. Beberapa yang secara khusus kami bicarakan di screencast ini:
- : eq () - versi 0-indeks dari: nth-child ()
- : even - pintasan untuk: n-anak (genap)
- : gt (n) - pilih elemen dengan indeks lebih besar dari n. Juga jalan pintas untuk forumla yang lebih kompleks: nth-child ().
Mungkin ekstensi selektor yang paling berguna dari semuanya adalah: has () - yang membatasi pemilihan ke elemen yang berisi apa yang Anda lewati pseudo selector ini (atau itu pseudo pseudo selector :) Kemungkinan suatu hari nanti CSS akan memiliki sesuatu seperti ini untuk kami (saya pikir itu akan menjadi seperti pre ! code) tetapi itu masih jauh. Sayangnya saya tidak membuat argumen yang terlalu meyakinkan untuk itu di screencast ini, tetapi Anda akan tahu kapan Anda membutuhkannya! Misalnya "Pilih semua .module yang berisi h3.sports-bar" - hal semacam itu.
Anda juga dapat membuat ekstensi pilihan Anda sendiri jika diinginkan. Berikut artikel tentang itu. Contohnya adalah membuat :inviewyang memilih elemen hanya jika terlihat pada halaman pada posisi gulir saat ini. Ini akan menjadi seperti ini:
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); ) ));