Apa yang perlu dan bagaimana pemilihan jQuery ditulis?

Perancang web modern tidak hanya harus terbiasa dengan dasar-dasar HTML, CSS dan JavaScript, namun juga dapat bekerja di perpustakaan jQuery yang berfokus pada interaksi JavaScript dengan dokumen HTML. Ini memungkinkan Anda mengakses dan memanipulasi elemen DOM dengan cepat (antarmuka program yang membuka akses ke konten file html). Unit struktural utama perpustakaan ini adalah tim. Untuk menerapkan perintah ini atau itu, Anda memerlukan jQuery-selector.

Rumusan penyeleksi di perpustakaan jQuery

Selektor JQuery didasarkan pada yang digunakan di CSS. Mereka diperlukan untuk memilih elemen file HTML, untuk menggunakannya untuk memanggil satu atau metode lain untuk memanipulasinya (perintah). Pencarian oleh pemilih dilakukan dengan menggunakan fungsi $ (). Misalnya, $ ('div').

Pemilih dapat diklasifikasikan sesuai dengan cara elemen dipilih:

• Dasar;
• Dengan atribut;
• Dengan hirarki;
• Dengan konten;
• Dengan posisi;
• Pemilihan bidang formulir;
• Lainnya.

Pemilih dasar

Pada 90% kasus saat bekerja dengan perpustakaan ini, pemilih jQuery digunakan yang termasuk dalam grup utama. Semuanya sederhana dan mudah dimengerti. Mari kita pertimbangkan masing-masing:

• * - memilih semua elemen halaman, termasuk kepala, badan, dll;
• P / div / sidebar / ... - memilih semua elemen yang terkait dengan tag yang diberikan (yaitu, p.div, sidebar, dll.);
• .myClass / p.myClass - memilih elemen dengan nama kelas yang ditentukan;
• # MyID / p. # MyID - memilih satu elemen dengan ID yang diberikan.

Mari kita beri contoh. Misalkan kita perlu memilih semua elemen halaman dengan par kelas, entri akan terlihat seperti ini: $ (.par). Jika kita hanya membutuhkan unsur p dari kelas ini, maka tuliskan: $ (p.par).

Penyeleksi atribut

Pemilih JQuery utama dapat digunakan jika kita perlu memilih elemen yang termasuk dalam kelas yang memiliki ID atau memilih semua elemen halaman. Namun, ada kalanya elemen yang diinginkan tidak memiliki kelas atau ID. Itu sebabnya ada pemilih dengan atribut. Mereka memungkinkan Anda untuk mencicipi beberapa atribut elemen HTML, misalnya, oleh href atau src. Atribut ini ditulis dalam tanda kurung siku [].

Contoh paling sederhana: $ ([src]) - memilih semua elemen yang memiliki atribut src. Anda dapat mempersempit area sampel dengan menetapkan atribut ke nilai tertentu: $ ([src = 'http: // site / article / 132222 / value']).

Anda dapat menggunakan beberapa penyeleksi di JQuery, jika Anda perlu mempersempit area pilihan. Misalnya, $ (p [color = blue] [size = 12]) - hanya elemen dari p yang berwarna biru dan ukuran 12 yang akan dipilih.

Penyeleksi konten

Jika tidak memungkinkan untuk memilih elemen berdasarkan atribut atau oleh penyeleksi utama, maka sangat bermanfaat untuk merujuk pada konten mereka. Ada 4 penyeleksi tipe ini:

• : Berisi - memilih elemen yang berisi teks yang ditentukan;
• : Has - memilih elemen yang mengandung elemen lain yang spesifik untuk baris itu;
• : Induk - memilih elemen yang berisi yang lainnya;
• : Kosongkan - memilih item yang tidak berisi konten lainnya.

Mari kita beri contoh. Untuk memilih semua elemen div yang berisi teks Hello, Anda perlu menulis $ (div: contains ('Hello')).

Penyeleksi hirarki

Ada satu cara lagi untuk memilih item di JQuery, yaitu, sesuai dengan hierarki mereka (yaitu, hubungan satu sama lain di halaman HTML). Ada banyak dari mereka, jadi inilah dua yang paling populer: "anak" dan "anak".

Pada kasus pertama, unsur keturunan langsung (anak) dari unsur yang diberikan (leluhur) dipilih. Misalnya, untuk memilih item daftar di kelas ringan, yang merupakan anak dari daftar nav, Anda perlu menulis: $ (ul # nav> li.light).

Kasus kedua lebih umum. Di sini, keturunan tak langsung suatu elemen juga dapat dipilih. Misalnya, untuk memilih link dalam daftar nav, kita akan menulis: $ (ul # nav a).

Jadi, dalam JQuery, elemen dapat dipilih dengan berbagai cara menggunakan parameter seperti kelas, ID, atribut, konten, atau hierarki elemen dokumen HTML.