Kandungan
- Mempelajari asas
- Memilih pemilih
- Pemilih caching
- Belajar pemilih maju
- Menggunakan pemilih dengan borang
- Mengetahui lebih lanjut
Saya mendengar komen ini dari pembangun yang saya kerjakan pada hari yang lain: "Sekiranya anda tidak dapat memilihnya, anda tidak boleh bekerja dengannya". Kedengarannya seperti salah satu ucapan falsafah Timur Jauh klasik yang dapat anda terapkan dalam kehidupan seharian, tetapi saya tahu dalam hal ini bahawa dia bercakap mengenai pemilih di perpustakaan jQuery Javascript yang sangat popular.
Pemilih jQuery adalah tempat pertama kali anda bersentuhan dengan perpustakaan. Anda yang telah bekerjasama dengan CSS secara meluas akan menganggap pemilih jQuery sangat akrab kerana jQuery menggunakan sintaks CSS untuk pemilih secara meluas. Orang lain yang kurang memahami perkembangan CSS pasti akan mempelajari sesuatu yang baru mengenai pemilih jQuery dan CSS.
Dalam artikel ini saya akan menunjukkan kepada anda sintaks pemilih jQuery, cara mengoptimumkan pemilih jQuery dan cara menerapkan kombinasi pemilih yang lebih maju ke elemen markup anda. Mari mulakan perjalanan dengan asas pemilih jQuery.
Mempelajari asas
Objek jQuery (paling sering dilihat sebagai $ ()) digunakan untuk membungkus pelbagai elemen berdasarkan pemilih yang digunakan. Contohnya $ ('Div.content p') akan membungkus semua perenggan yang merupakan anak dari div yang mempunyai kelas kandungan ke dalam objek jQuery tunggal. Setelah dibungkus, array objek boleh menggunakan kaedah jQuery (dan JavaScript) untuknya.
Sekiranya anda memilih item mengikut id, hanya akan ada satu objek dalam array.
ul id = "list"> li id = "itemOne"> Item Pertama / li> li id = "itemTwo"> Item Kedua / li> li id = "itemThree"> Item Ketiga / li> li id = "itemFour"> Perkara Keempat </li></ul>
$ ('# ItemTiga') memilih item senarai ketiga dan itemTiga akan menjadi satu-satunya elemen dalam array objek jQuery untuk pemilih ini.
Dalam banyak reka bentuk laman web, id tidak diberikan kepada elemen dalam laman web. Sekiranya demikian, bagaimana anda dapat memilih elemen tertentu seperti yang ditunjukkan di atas? Lihat senarai ini:
ul id = "list"> li> Item Pertama / li> li> Item Kedua / li> li> Item Ketiga / li> li> Item Keempat / li> / ul>
Menggunakan $ ('Li: eq (2)') akan mendapat item senarai ketiga (perhatikan bahawa menghitung item array dalam JavaScript, dan oleh itu jQuery, bermula pada 0). Walaupun saya tidak suka membingungkan perkara seperti ini, anda juga harus mengetahui perkara itu $ ('Li: nth-anak (3)') juga akan mendapat unsur. Mengapa anak ke-9 () mula mengira pada 1? Ini disebabkan oleh fakta bahawa CSS adalah apa yang disebut '1-indexed' dan pemilih anak ke-9 () dilahirkan di dunia CSS, bukan JavaScript.
Sekiranya anda mempunyai lebih dari satu senarai di laman web anda, anda harus lebih spesifik dengan pemilih jika anda ingin mencocokkan satu item dalam satu daftar. Sekiranya terdapat senarai yang digambarkan, anda boleh menggunakan $ (’# Senarai li: eq (2)’) atau $ (’# Senarai li: nth-child (3)’) untuk mendapatkan item ketiga.
Anda boleh membungkus pelbagai elemen sebagai array dalam objek jQuery dengan menggunakan pengenal kumpulan seperti tag HTML atau nama kelas dalam pemilih. Menggunakan $ ('. Kandungan') akan mengumpulkan semua elemen HTML yang mempunyai kelas kandungan ke dalam array objek jQuery. Begitu juga, $ ('P') akan membungkus semua perenggan dalam dokumen menjadi objek jQuery tunggal.
Memilih pemilih
Salah satu perkara yang benar-benar perlu anda perhatikan semasa menggunakan jQuery ialah pemilih dibaca dari kanan ke kiri oleh mesin pemilih jQuery, Sizzle (John Resig, sizzlejs.com). Ini bermaksud bahawa pemilih yang panjang lebih banyak memerlukan sumber dan memerlukan masa tambahan untuk melaksanakannya. Lihat markup HTML berikut:
div id = "section1"> ul> li id = "first"> One / li> li id = "second"> Two / li> li id = "ketiga"> Tiga / li> / ul> div> p> Bacon ipsum dolor sit amet salami ball tip short loin drumstick ... / p> / div> / div> div id = "section2"> ul> li id = "one"> Satu / li> li id = "dua"> Dua / li> li id = "three"> Three / li> / ul> div> p> Bacon ipsum dolor sit amet salami ball tip short loin drumstick ... / p> / div> / div>
Ini adalah contoh yang agak teruk tetapi jika anda ingin memilih item senarai kedua dalam senarai kedua, anda mungkin menggunakan pemilih jQuery:
$ (’. Container. Pemilihan li: nth-child (2)’)
Enjin pemilih jQuery pada asasnya mengatakan: "Pertama-tama cari semua item senarai yang merupakan anak kedua. Kemudian lihat apakah itu terkandung dalam kelas yang disebut pemilihan. Selepas itu, periksa untuk melihat bahawa pemilihan adalah keturunan wadah. Sekiranya anda mempunyai banyak dari item bersarang yang serupa, ini dapat membuat banyak overhead kerana jQuery harus melintasi pokok DOM (Model Objek Dokumen) setiap kali pemilih digunakan. Lebih baik menjadi seberapa spesifik mungkin dan dalam kes ini, anda hanya boleh menggunakan id item senarai di pemilih anda, $ ('# Tiga').
Pemilih dengan pengenal elemen yang mempunyai ruang di antara mereka juga dikenali sebagai pemilih keturunan. Pemilih yang digunakan akan menemui semua keturunan wadah kelas yang mempunyai kelas pilihan, tidak kira sejauh mana pemilihan pokok DOM berada. Sekiranya anda ingin memastikan bahawa pemilihan adalah anak kontena langsung, anda boleh menulis pemilih dengan cara ini:
$ (’. Container> .selection li: nth-child (2)’)
Simbol lebih besar daripada akan memaksa mesin pilihan untuk memastikan bahawa elemen dengan pemilihan kelas adalah keturunan langsung dari item yang mempunyai bekas kelas.
Pemilih caching
Mungkin ada saatnya anda harus menggunakan pemilih yang panjang atau anda perlu menggunakan pemilih tertentu berulang-ulang kali. Contoh yang sangat baik adalah semasa anda menggunakan jadual yang penuh dengan data yang perlu dimanipulasi. Cara mudah untuk mengoptimumkan tindakan adalah menyimpan objek pemilih jQuery dengan memasukkannya ke dalam pemboleh ubah:
var cell7 = $ ('jadual tr td: nth-child (7));
Kemudian anda boleh menggunakan pemboleh ubah itu berulang kali untuk memanipulasi elemen:
cell7.css ('font-weight', 'bold'); cell7.each (function () {var newValue = $ (this) .html () + 3.14; $ (ini) .html (newValue);});
Oleh kerana pemboleh ubah mengandungi objek yang dibungkus, anda tidak perlu melintasi DOM lagi untuk mendapatkan data pemilih tersebut.
Dengan pemahaman mengenai pemilih jQuery asas, inilah masanya untuk mengalihkan tumpuan anda kepada beberapa sintaks pemilih yang lebih maju.
Belajar pemilih maju
Kelebihan besar yang ditawarkan jQuery daripada banyak perpustakaan JavaScript adalah kemampuannya menggunakan pemilih yang sama yang digunakan dalam CSS, tidak kira seberapa kompleks pemilihnya. Pemilih pseudo gaya CSS tersedia untuk anda dan juga pemilih atribut.
Pemilih atribut di jQuery menawarkan fungsi seperti ekspresi biasa dan bahkan dapat digabungkan dengan cara yang menyediakan fungsi bersyarat. Saya akan menggunakan blok markup HTML ini untuk menunjukkan:
div> Segitiga Merah / div> div> Segitiga Biru / div> div> Segitiga Hijau / div> div> Green Square / div> div> Purple Square / div> div> Yellow Square / div> div> Lingkaran Merah / div> div > Bulatan Kuning / div> div> Bulatan Jingga / div>
Sekiranya anda ingin memilih div di mana kelas "bermula dengan" kuning anda akan menggunakan simbol ^ (karat):
$ (’Div [class ^ =" kuning "] ')
Bagaimana memilih semua item yang mempunyai kelas bermula dengan kuning ATAU mempunyai segitiga kelas?
$ (’Div [class ^ =" yellow "], [class =" segitiga "] ')
Di sini (tilde) menandakan bahawa pemilih atribut harus mencari item di mana kelas "mengandungi perkataan" segitiga. Dengan memisahkan pemilih atribut dengan koma, anda memberikan syarat ATAU untuk carian. Sekiranya anda mengeluarkan koma, syarat AND dipanggil dan tidak akan mengembalikan objek kerana tidak ada unsur dengan kelas "segitiga kuning". Anda boleh terus menghubungkan pemilih atribut bersama-sama ketika bekerja dengan jQuery.
Pemilih atribut jQuery akan berfungsi dengan atribut HTML yang dikenali. Pemilih ini memberi anda kekuatan untuk mengambil elemen berdasarkan nilai atribut dengan menerapkan penapis pada mereka. Anda boleh mengetahui lebih lanjut mengenai pemilih atribut dengan melayari api.jquery.com/category/selectors/attribute-selectors/.
(Sekiranya anda ingin bermain dengan pemilih atribut, saya telah menyediakan contoh yang boleh anda manipulasi dan jalankan di jsfiddle.net).
Menggunakan pemilih dengan borang
Anda boleh menggunakan pemilih atribut jQuery untuk bekerja dengan borang dan jenis pemilih ini sering kali sesuai untuk mencapai kesan tertentu seperti membersihkan borang setelah dihantar:
$ ('Input [type = "text"]'). Val ('');
Sekiranya anda ingin membersihkan elemen input lain, anda boleh memasukkan definisi atribut tambahan ke dalam pemilih:
$ ('Input [type = "text"], [type = "number]'). Val ('');
Tetapi berhati-hati! Saya telah melihat banyak pembangun menggunakan pemilih berikut dan bertanya-tanya mengapa bentuk, butang dan semua mereka dikosongkan:
$ ('Input'). Val ('');
Semua nilai input borang akan dihapus, termasuk teks pada elemen penyerahan atau set semula yang disertakan dalam borang. Ini adalah pelajaran yang baik untuk menjadi spesifik dengan pemilih jQuery anda.
Akan ada masanya anda mahu pemilih khusus bekerja dengan elemen borang. Anda boleh menggunakan : diperiksa pemilih pseudo untuk memilih semua kotak pilihan yang dicentang dan : input pemilih pseudo untuk membungkus semua input dalam bentuk. Mari gunakan borang berikut sebagai contoh:
form name = "myForm" method = "post"> label untuk = "username"> Name / label> input type = "text" name = "username" /> br /> label untuk = "userstreet"> Street / label> input type = "text" name = "userstreet" /> br /> label untuk = "usercity"> Bandar, Negeri & Zip / label> input type = "text" name = "usercity" /> input type = "text" name = "userstate" size = "2" /> input type = "text" name = "userzip" /> br /> label untuk = "subscribertype"> Subscriber Type / label> pilih nama = "subscribertype"> nilai pilihan = "3"> 3 Bulan / pilihan> nilai pilihan = "6"> 6 Bulan / pilihan> nilai pilihan = "12"> 12 Bulan / pilihan> / pilih> br /> label untuk = "useremail"> E-Mail / label> input type = "text" name = "useremail" /> br /> label untuk = "userphone"> Telefon / label> input type = "text" name = "userphone" /> br /> label> Preferred Contact / label> Jenis input E-Mail = "kotak centang" name = "useemail" CHECKED /> Jenis input telefon = "kotak centang" name = "usephone" /> br /> input type = "submit" value = "Submit" /> / bentuk>
Menggunakan $ ('Form [name = "myForm"] input: dicentang') akan membungkus input dengan kotak centang yang mempunyai harta yang diperiksa. Sekiranya anda ingin memilih semua input dari borang anda, dan ini adalah satu-satunya borang di halaman, anda boleh menggunakannya $ (': Input').
Mengetahui lebih lanjut
Sekarang anda telah mengetahui sintaks pemilih jQuery dan melihat cara untuk menggabungkan dan menghubungkan pemilih perpustakaan jQuery, anda sudah bersedia untuk mula menambahkan jQuery ke projek web anda.
Untuk benar-benar mengasah kemahiran jQuery anda, saya menggalakkan anda meluangkan masa untuk mempelajari pelbagai pilihan yang tersedia untuk perpustakaan. Anda boleh melakukannya di laman web jQuery di api.jquery.com/category/selectors/.
