Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya, kalau pada pembahasan sebelumnya kita telah belajar tentang selektor :event() pada jquery yang berfungsi untuk memilih element html urutan ganjil, kali ini kita akan membahas lawan dari selektor :evnt() yaitu kita akan belajar selektor :odd() pada jquery.
Fungsi dari selektor :odd() pada jquery sebenarnya adalah kebalikan dari fungsi selector :event pada jquery yaitu berfungsi untuk memilih element dengan urutan genap untuk kita eksekusi, untuk lebih jelasnya kita langsung saja praktek, pertama silahkan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> </head> <body> <p>Dumet school</p> <p>Dumet school</p> <p>Dumet school</p> <p>Dumet school</p> <p>Dumet school</p> <p>Dumet school</p> </body> </html> |
Pertama saya membuat beberapa element p dengan tulisan dumet school pada bagian body, setelah itu coba teman-teman save dan jalankan pada berowser maka hasilnya akan seperti berikut ini:
hasilnya masih seperti biasa karna kita belum tambahkan apa-apa, nah sekarang coba teman-teman tambahkan script jquery berikut ini:
|
1 2 3 4 5 6 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p:odd").css("background-color", "blue"); }); </script> |
Pertama seperti biasa saya mereload library dari jquery yaitu bisa kita ambil dari website resmi jquery jquery.com, nah setelah itu saya membuat dimana element p yang urutannya genap akan mengalami css background blue, jika teman-teman save maka hasilnya akan seperti berikut ini:
element p yang memiliki urutan genap akan memiliki style background biru, gimana teman-teman cukup mudah bukan, saya rasa untuk tutorial kali ini tentang selektor odd() pada jquery cukup sampa disini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,
Terima kasih