jQuery boleh memilih apa sahaja yang boleh dipilih oleh CSS3. Tetapi ia tidak berhenti di situ! Terdapat sebilangan pemilih tambahan yang ditawarkan oleh jQuery (melalui mesin pemilih Sizzle) yang kadangkala cukup berguna. Sebagai contoh, CSS mempunyai pemilih atribut yang memungkinkan Anda memilih elemen berdasarkan atribut sewenang-wenang yang mungkin dimiliki elemen tersebut. Contohnya:
Terdapat pemilih CSS yang dapat kita gunakan di jQuery untuk memilihnya:
$("(data-whatever='elephant-eyeballs')");Terdapat variasi pada pemilih atribut, seperti yang =dapat Anda lakukan ^=untuk menunjukkan "bermula dengan nilai ini". Tetapi atas sebab tertentu, CSS tidak mempunyai! = Atau "tidak sama dengan nilai ini". jQuery tidak! Itulah contoh peluasan pemilih jQuery.
Terdapat banyak sambungan pemilih ini. Sebilangan kecil yang kita bicarakan secara khusus dalam screencast ini:
- : eq () - versi 0-indeks dari: nth-child ()
- : genap - jalan pintas untuk: anak ke-9 (genap)
- : gt (n) - pilih elemen dengan indeks yang lebih besar daripada n. Juga jalan pintas untuk forumla yang lebih kompleks (nth-child ().
Mungkin penyambungan pemilih yang paling berguna adalah: has () - yang membatasi pemilihan ke elemen yang mengandungi apa yang anda lulus pemilih pseudo ini (atau apakah itu pemilih semu pseudo :) Mungkin suatu hari nanti CSS akan mempunyai sesuatu seperti ini untuk kita (saya rasa ia akan menjadi seperti pre ! code) tetapi itu jauh. Malangnya saya tidak membuat hujah yang sangat menarik untuknya dalam screencast ini, tetapi anda akan tahu bila anda memerlukannya! Contohnya "Pilih semua. Modul yang mengandungi h3.sports-bar" - perkara semacam itu.
Anda juga boleh membuat pilihan pilihan anda sendiri jika anda mahu. Inilah artikel mengenai perkara itu. Contohnya ialah membuat :inviewyang memilih elemen hanya jika ia dapat dilihat di halaman pada kedudukan tatal semasa. Ia 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); ) ));