jQuery - Penyeleksi

Pustaka jQuery memanfaatkan kekuatan penyeleksi Cascading Style Sheets (CSS) untuk memungkinkan kita mengakses elemen atau grup elemen dalam Document Object Model (DOM) dengan cepat dan mudah.

Selector jQuery adalah fungsi yang menggunakan ekspresi untuk menemukan elemen yang cocok dari DOM berdasarkan kriteria yang diberikan. Sederhananya, selektor digunakan untuk memilih satu atau lebih elemen HTML menggunakan jQuery. Setelah elemen dipilih, kita dapat melakukan berbagai operasi pada elemen yang dipilih tersebut.

Fungsi pabrik $ ()

Penyeleksi jQuery mulai dengan tanda dolar dan tanda kurung - $(). Fungsi pabrik$() memanfaatkan tiga blok penyusun berikut saat memilih elemen dalam dokumen tertentu -

Sr.No.	Pemilih & Deskripsi
1	Tag Name Merepresentasikan nama tag yang tersedia di DOM. Sebagai contoh$('p') memilih semua paragraf <p> di dokumen.
2	Tag ID Merepresentasikan tag yang tersedia dengan ID yang diberikan di DOM. Sebagai contoh$('#some-id') memilih elemen tunggal dalam dokumen yang memiliki ID some-id.
3	Tag Class Merepresentasikan tag yang tersedia dengan kelas yang diberikan di DOM. Sebagai contoh$('.some-class') memilih semua elemen dalam dokumen yang memiliki kelas beberapa kelas.

Semua item di atas dapat digunakan sendiri atau dikombinasikan dengan penyeleksi lain. Semua penyeleksi jQuery didasarkan pada prinsip yang sama kecuali beberapa penyesuaian.

NOTE - Fungsi pabrik $() adalah sinonim dari jQuery()fungsi. Jadi jika Anda menggunakan pustaka JavaScript lain di mana$ tanda bertentangan dengan beberapa hal lain maka Anda dapat mengganti $ tandatangani oleh jQuery nama dan Anda dapat menggunakan fungsi jQuery() dari pada $().

Contoh

Berikut adalah contoh sederhana yang menggunakan Pemilih Tag. Ini akan memilih semua elemen dengan nama tagp.

Demo Langsung

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Bagaimana Cara Menggunakan Selektor?

Selektor sangat berguna dan akan dibutuhkan di setiap langkah saat menggunakan jQuery. Mereka mendapatkan elemen tepat yang Anda inginkan dari dokumen HTML Anda.

Tabel berikut mencantumkan beberapa pemilih dasar dan menjelaskannya dengan contoh.

Sr.No.	Pemilih & Deskripsi
1	Nama Memilih semua elemen yang cocok dengan elemen yang diberikan Name.
2	#INDO Memilih satu elemen yang cocok dengan yang diberikan ID.
3	.Kelas Memilih semua elemen yang cocok dengan yang diberikan Class.
4	Universal (*) Memilih semua elemen yang tersedia di DOM.
5	Beberapa Elemen E, F, G Memilih hasil gabungan dari semua pemilih yang ditentukan E, F atau G.

Contoh Penyeleksi

Mirip dengan sintaks dan contoh di atas, contoh berikut akan memberi Anda pemahaman tentang penggunaan berbagai jenis penyeleksi berguna lainnya -

Di sini, Anda memiliki berbagai jenis penyeleksi berguna lainnya -

Sr.No.	Pemilih & Deskripsi
1	*$('')** Pemilih ini memilih semua elemen di dokumen.
2	*$("p > ")** Pemilih ini memilih semua elemen yang merupakan turunan dari elemen paragraf.
3	$("#specialID") Fungsi selektor ini mendapatkan elemen dengan id = "specialID".
4	$(".specialClass") Selektor ini mendapatkan semua elemen yang memiliki kelas specialClass .
5	$("li:not(.myclass)") Memilih semua elemen yang cocok dengan <li> yang tidak memiliki class = "myclass".
6	$("a#specialID.specialClass") Selektor ini mencocokkan link dengan id specialID dan kelas specialClass .
7	$("p a.specialClass") Selektor ini mencocokkan tautan dengan kelas specialClass yang dideklarasikan dalam elemen <p>.
8	$("ul li:first") Pemilih ini hanya mendapatkan elemen <li> pertama dari <ul>.
9	$("#container p") Memilih semua elemen yang cocok dengan <p> yang merupakan turunan dari elemen yang memiliki id penampung .
10	$("li > ul") Memilih semua elemen yang cocok dengan <ul> yang merupakan turunan dari elemen yang cocok dengan <li>
11	$("strong + em") Memilih semua elemen yang cocok dengan <em> yang langsung mengikuti elemen saudara yang cocok dengan <strong>.
12	$("p ~ ul") Memilih semua elemen yang cocok dengan <ul> yang mengikuti elemen saudara yang cocok dengan <p>.
13	$("code, em, strong") Memilih semua elemen yang cocok dengan <code> atau <em> atau <strong>.
14	$("p strong, .myclass") Memilih semua elemen yang cocok dengan <strong> yang merupakan turunan dari elemen yang cocok dengan <p> serta semua elemen yang memiliki kelas myclass .
15	$(":empty") Memilih semua elemen yang tidak memiliki anak.
16	$("p:empty") Memilih semua elemen yang cocok dengan <p> yang tidak memiliki turunan.
17	$("div[p]") Memilih semua elemen yang cocok dengan <div> yang berisi elemen yang cocok dengan <p>.
18	$("p[.myclass]") Memilih semua elemen yang cocok dengan <p> yang berisi elemen dengan kelas myclass .
19	$("a[@rel]") Memilih semua elemen yang cocok dengan <a> yang memiliki atribut rel.
20	$("input[@name = myname]") Memilih semua elemen yang cocok dengan <input> yang memiliki nilai nama yang sama persis dengan nama saya .
21	$("input[@name^=myname]") Memilih semua elemen cocok dengan <input> yang memiliki nilai nama yang dimulai dengan myname .
22	$("a[@rel$=self]") Memilih semua elemen yang cocok dengan <a> yang memiliki relnilai atribut diakhiri dengan diri sendiri .
23	*$("a[@href=domain.com]")** Memilih semua elemen yang cocok dengan <a> yang memiliki nilai href yang berisi domain.com.
24	$("li:even") Memilih semua elemen yang cocok dengan <li> yang memiliki nilai indeks genap.
25	$("tr:odd") Memilih semua elemen yang cocok dengan <tr> yang memiliki nilai indeks ganjil.
26	$("li:first") Memilih elemen <li> pertama.
27	$("li:last") Memilih elemen <li> terakhir.
28	$("li:visible") Memilih semua elemen yang cocok dengan <li> yang terlihat.
29	$("li:hidden") Memilih semua elemen yang cocok dengan <li> yang tersembunyi.
30	$(":radio") Memilih semua tombol radio di formulir.
31	$(":checked") Memilih semua kotak centang di formulir.
32	$(":input") Hanya memilih elemen formulir (input, pilih, textarea, tombol).
33	$(":text") Hanya memilih elemen teks (input [type = text]).
34	$("li:eq(2)") Memilih elemen <li> ketiga.
35	$("li:eq(4)") Memilih elemen <li> kelima.
36	$("li:lt(2)") Memilih semua elemen yang cocok dengan <li> elemen sebelum yang ketiga; dengan kata lain, dua elemen <li> pertama.
37	$("p:lt(3)") memilih semua elemen yang cocok dengan <p> elemen sebelum elemen keempat; dengan kata lain, tiga elemen <p> pertama.
38	$("li:gt(1)") Memilih semua elemen yang cocok dengan <li> setelah yang kedua.
39	$("p:gt(2)") Memilih semua elemen yang cocok dengan <p> setelah yang ketiga.
40	$("div/p") Memilih semua elemen yang cocok dengan <p> yang merupakan turunan dari elemen yang cocok dengan <div>.
41	$("div//code") Memilih semua elemen yang cocok dengan <code> yang merupakan turunan dari sebuah elemen yang cocok dengan <div>.
42	$("//p//a") Memilih semua elemen yang cocok dengan <a> yang merupakan turunan dari elemen yang cocok dengan <p>
43	$("li:first-child") Memilih semua elemen yang cocok dengan <li> yang merupakan anak pertama dari induknya.
44	$("li:last-child") Memilih semua elemen yang cocok dengan <li> yang merupakan anak terakhir dari induknya.
45	$(":parent") Memilih semua elemen yang merupakan induk dari elemen lain, termasuk teks.
46	$("li:contains(second)") Memilih semua elemen yang cocok dengan <li> yang berisi teks detik.

Anda dapat menggunakan semua pemilih di atas dengan elemen HTML / XML apa pun secara umum. Misalnya jika selector$("li:first") bekerja untuk <li> elemen kemudian $("p:first") juga akan bekerja untuk elemen <p>.