Sebagai contoh, kita buat sebuah kerangka list menyerupai ini (boleh ordered list ataupun unordered list):
<ul class='kuda-zebra'> <li>Andai Saja</li> <li>Engkau Tahu</li> <li>Betapa Aku</li> <li>Kebelet Pipis</li> <li>Maukah...</li> </ul>Di sini kita menggunakan
<ul> atau unordered list.Sekarang kita buat instruksi pemodel sederhana untuk materi praktek tersebut menyerupai ini:
ul.kuda-zebra {font-weight:bold;} .kuda-zebra li {color:darkRed;}Maka nantinya akibatnya akan tampak menyerupai ini:
Sekarang kita terapkan sistem JQuery sederhana menyerupai ini:
$(document).ready(function() { $('ul.kuda-zebra li:even').addClass('kampret'); });Lalu tambahkan sebuah pemodel gres dengan nama
li.kampret (maksudnya elemen <li> yang mempunyai class "kampret") dan buat deklarasi pewarnaan yang berbeda (misalnya hijau tua):ul.kuda-zebra {font-weight:bold;} .kuda-zebra li {color:darkRed;} li.kampret {color:darkGreen;}Nah, sekarang, elemen listmu akan berubah warna menjadi menyerupai ini:
Menarik bukan? (Jawab: tidak juga)
Ada dua hal penting yang menghipnotis perubahan warna ini, yaitu pada CSS
li.kampret{ ... } dan dari JQuery itu sendiri.Perhatikan instruksi ini:
$('ul.kuda-zebra li:even').addClass('kampret');Kode tersebut dibaca: Elemen
<li> bernilai genap yang berada dalam elemen <ul> dengan class "kuda-zebra" akan mendapat jatah class "kampret" satu-satu secara otomatis.Nah, alasannya yaitu kita sudah memilih bahwa elemen
<li> dengan class "kampret" akan mendapat tampilan berwarna hijau bau tanah (li.kampret{color:darkGreen;}), maka berubahlah tampilan setiap elemen <li> bernilai genap secara otomatis.:even artinya genap, :odd artinya ganjil
Sebenarnya, meskipun tidak menggunakan JQuery, kita juga dapat menerapkan sistem ini dengan menuliskannya secara manual menyerupai ini:
<ul class='kuda-zebra'> <li>Ganjil</li> <li class='kampret'>Genap</li> <li>Ganjil</li> <li class='kampret'>Genap</li> <li>Ganjil</li> </ul>Tapi bukankah itu yaitu pekerjaan yang melelahkan? (Jawab:Hmmm...)
Asal tahu saja, penerapan sistem ini juga dipakai dalam Accordion TOC buatan menu navigasi JQuery yang warnanya cokelat itu.
