Halo teman-teman, berjumpa lagi dengan saya. Pada artikel kali ini kita akan belajar dengan fungsi .css() pada Jquery, dan pada contoh yang akan kita buat nanti adalah menggunakan metode turunan yang di apit oleh tag <html>. Nah css akan kita tempatkan atau selector hanya yang mempunyai turunan saja, baik kalau begitu langsung saja teman-teman buka code editornya. Lalu pastekan script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
<p>Text ke 1</p>
<p>Text ke 2</p>
<p>Text ke 3</p>
<p>Text ke 4</p>
<p>Text ke 5</p>
<p>Text ke 6</p>
<p>Text ke 7</p>
<p>Text ke 8</p>
<p>Text ke 9</p>
<p>Text ke 10</p>
</body>
</html>

Lalu pastekan script di atas ini pada code editornya kemudian save dengan index.html dan run pada browsernya, maka akan menghasilkan output seperti gambar di bawah ini

output

Nah kita sudah mempunyai output “Text ke 1 – 10”, langkah berikutnya kita berikan fungsi Jquerynya. Pertama tambahkan library Jquerynya di dalam tag <head> atau bisa juga copy link di bawah ini

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Jika sudah mari kita berikan fungsi Jquerynya untuk memberikan css nya, tambahkan script di bawah ini di dalam code editornya

<script>
$( "p" ).css( "color", "red" );
</script>

Kemudian save dan refresh pada browsernya, tampilan akan menghasilkan seperti gambar di bawah ini

output-1

Oke semua text berubah menjadi warna merah, selanjutnya saya ingin membuat warna merahnya hanya akan tampil di nomor 1,3,5,7,9. Disini kita akan menggunakan yang nama nya turunan, pertama tambahkan tag <div> pada Text ke 1,3,5,7,9 atau bisa lihat gambar di bawah ini.

output-2

Lalu kita rubah fungsi Jquerynya,

<script>
$( "div > p" ).css( "color", "red" );
</script>

Kemudian save dan refresh pada browsernya, maka Text ke 1,3,5,7,9  mempunyai warna merah sedangkan Text ke 2,4,6,8,10 akan kembali default warna hitam. Karena di dalam fungsi Jquery diberikan fungsi turunan yaitu div yang mempunyai turunan p atau lebih mudahnya disebut div sebagai induknya dan p di jadikan anak dari div maka tag <p> yang hanya di apit <div> sajalah yang akan di selector dan di aktifkan oleh Jquerynya yang mana di dalam terdapat value css “color:red;”. Sangat mudah ya teman-teman, mungkin sekian dulu di artikel ini tentang Memberikan css yang di selector dengan Jquery semoga bisa menjadi inspirasi/ide untuk teman-teman agar dapat memodifikasinya dengan studi case yang lain. Sampai jumpa di artikel selanjutnya dan terimakasih. Semoga bermanfaat 🙂

Kunjungi juga artikel Membuat Animasi Sederhana Dengan Jquery