Memberikan css yang di selector dengan Jquery
Halo teman-teman, berjumpa lagi dengan saya. Di artikel kali ini kita akan belajar dengan guna .css() di Jquery, dan di contoh yang akan kita bikin nanti yaitu menggunakan sistem turunan yang di apit oleh tag <html>. Nah css akan kita tempatkan atau selector hanya yang mempunyai turunan saja, bagus kalau seperti itu seketika 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 di code editornya kemudian save dengan index.html dan run di browsernya, karenanya akan menghasilkan output seperti gambar di bawah ini
Nah kita telah mempunyai output “Text ke 1 – 10”, langkah berikutnya kita berikan guna Jquerynya. Pertama-tama tambahkan library Jquerynya di pada tag <head> atau dapat pun copy link di bawah ini
<script src=https://code.jquery.com/jquery-1.10.2.js></script>
Apabila telah mari kita berikan guna Jquerynya bagi memberikan css nya, tambahkan script di bawah ini di pada code editornya
<script>
$( p ).css( color, red );
</script>
Kemudian save dan refresh di browsernya, tampilan akan menghasilkan seperti gambar di bawah ini
Oke segala text berubah menjadi warna merah, berikutnya saya ingin merancang warna merahnya hanya akan tampil di nomor 1,3,5,7,9. Disini kita akan menggunakan yang nama nya turunan, pertama-tama tambahkan tag <div> di Text ke 1,3,5,7,9 atau dapat lihat gambar di bawah ini.
Lalu kita rubah guna Jquerynya,
<script>
$( div > p ).css( color, red );
</script>
Kemudian save dan refresh di browsernya, karenanya 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 pada guna Jquery diberikan guna turunan yaitu div yang mempunyai turunan p atau lebih mudahnya disebut div selaku induknya dan p di jadikan anak dari div karenanya tag <p> yang hanya di apit <div> sajalah yang akan di selector dan di aktifkan oleh Jquerynya yang mana di pada terdapat value css “color:red;”. Benar-benar gampang ya teman-teman, mungkin demikian dulu di artikel ini mengenai Memberikan css yang di selector dengan Jquery semoga dapat menjadi inspirasi/ide bagi teman-teman agar dapat memodifikasinya dengan studi case yang lain. Hingga jumpa di artikel berikutnya dan terimakasih. Semoga bermanfaat 🙂
Kunjungi pun artikel Membuat Animasi Sederhana Dengan Jquery
Sumber https://kursuswebsite.org
