Belajar jQuery Untuk Pemula: Mengubah Warna background dengan jQuery

cara mengubah warna background dengan jquery

Belajar jquery hari ini akan membahas tentang cara mengubah warna background yang tentunya menggunakan jquery. sebagai tahapan pemula kita tidak akan membuat hal-hal rumit.

disini kita akan memanfaatkan HTML, CSS dan jQuery untuk mengubah warna background-nya saat di klik nama warnanya.

Step by Step-nya adalah sebagai berikut :
- Buatlah sebuah file dengan nama "ganti-backgroud.html";
- Download library jQuery untuk informasi lengkap bisa di check di Pengenalan dan Pengertian jQUery
- Salin atau Ketikan kode berikut

Kode HTML

<!DOCTYPE html>
<html>
<head>
 <title>Ganti Backgroud</title>
 <style>
  /* Letakkan Kode CSS di sini */

 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script>
  // letakkan kode jQuery Di sini
  
 </script>
</head>

<body>
 <div class="ganti-warna">
  <ul>
   <li>
    <a href="#" data-color="red">Merah</a>
   </li>
   <li>
    <a href="#" data-color="blue">Biru</a>
   </li>
   <li>
    <a href="#" data-color="yellow">Kuning</a>
   </li>
  </ul>
 </div>
 <div class="bg"></div>
</body>
</html>

Setelah menyalin kode HTML step berikutnya adalah menuliskan kode CSS diantara <style> dan </style>.
Ketik atau salinlah kode CSS berikut :

KODE CSS

.bg{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: -9;
 }

Step Terakhir adalah menuliskan kode jQuery-nya. letakkan atau tuliskan kode di bawah ini diantara <script> dan </script> pada file ganti-backgroud.html.

KODE JQUERY

$(function(){
  $('.ganti-warna a').click(function(e){
   e.preventDefault();
   var bg = $(this).data("color");
 
   // ganti warna
   $('.bg').css('background',bg);
 
  });
 });
});

PENJELASAN
Mungkin dari kalian bertanya kenapa perubahan warnanya saya letakan di <div> kok tidak di <body> walaupun hasilnya sama dan tidak ribet. hal ini saya lakukan karena kedepannya kita akan lebih sering bermain dengan <div>, sehingga diharapkan kalian terbiasa dengan model seperti diatas.

$('.ganti-warna a') adalah cara jquery menangkap bagian atau area mana yang akan di dia perhatikan untuk dimanipulasi. dimana srtuktur aslinya $('<selector>'), di sini kita menggunakan selector berbasis class sehingga ditulis ('.ganti-warna') dibaca class ganti-warna, dan a adalah child atau anak dari tag dengan class ganti-warna.

click(function(e){}) adalah EVENT dari JQuery untuk menangkap perintah klik dari mouse kita. sedangkan e.preventDefault merupakan cara untuk mematikan fungsi asli dari tag html dan menggantinya dengan perintah yang baru.

jika tidak diberi e.preventDefault maka tag anchor <a> ini akan mengarah pada alamat yang dituju (href). misalkan tag anchor kalian rubah menjadi
<a href="google.com" data-color="red">Merah</a>
maka halaman yang terbuka adalah google.com dan tidak lagi di halaman sekarang.

$(this).data("color") adalah menangkap nilai dari "data-color" pada tag anchor <a>, $(this) ini mewakili $('.ganti-warna a').

$('.bg').css('backgroud',bg) adalah syntax untuk merubah backgroud atau memanipulasi CSS baru dimana code aslinya .css("property","value").

KESIMPULAN
Belajar Jquery hari ini masih menggunakan EVENT Click, Syntax $('<selector>') dan Memanipulasi dengan CSS saja, masih banyak hal-hal yang bisa kita buat dengan jquery, tentunya kalian masih bisa mengembakannya. tunggu tutorial belajar jquery untuk pemula berikutnya. terimaksih :D

Belajar jQuery Untuk Pemula

Minggu, 12 April 2015

Mengubah Warna background dengan jQuery

1 komentar: