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:
<!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:
<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