Belajar JQuery Part 2 : Selektor JQuery - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Tuesday, December 13, 2016

Belajar JQuery Part 2 : Selektor JQuery

bewoksatukosong.com | Kali ini om bewok akan menjelaskan mengenai selektor, selektor ini biasanya di gunakan untuk mengubah seperti css, button, penambahan dalam input text. Awal dalam pembuatan jQuery kamu harus menggunakan codingan seperti ini. 

$(document).ready(function(){
// masukkan di sini
});

Kodingan di atas, kamu harus melakukan ketika kamu pertama kali membuat jQuery.

Dalam seletor kamu bisa melakukan beberapa hal, seperti di bawah ini :

1. Mengubah Warna Teks CSS Menggunakan jQuery.

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Selektor</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script>
  $(document).ready(function() {
   $("h1").css("color","red");
  });
 </script>
</head>
<body>
 <h1>Halo Semua</h1>
</body>
</html>



2. Mengubah Teks Pada JQuery

 Jadi di sini kamu bisa mengubah teks dari HTML ke JQuery.

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Selektor</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script>
  $(document).ready(function() {
   $("h1").css("color","red");
   $("#satu").text("Ganti Teks Dua");


  });
 </script>
</head>
<body>
 <h1>Halo Semua</h1>
 <div id="satu">Teks Satu</div><br/>
</body>
</html>
.

3. Membuat Semua CSS Di Jquery

Kamu juga bisa membuat semua sekaligus CSS di JQuery, kalau 1 dan 2 hanya untuk 1 perintah, tapi untuk tutorial yang ini kamu bisa melakukan-Nya sekaligus. Kodinganya seperti dibawah ini

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Selektor</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script>
  $(document).ready(function() {
   $("#dua").css ({
             "color"          : "aqua",
      "font-size"      : "23px",
      "text-transform" : "uppercase",
      "font-weight"    : "bold"
   });
  });
 </script>
</head>
<body>
 <div id="dua">Welcome the world</div>
</body>
</html>

Hasilnya akan seperti dibawah ini 



Itu saja Tutorial kali ini mengenai selektor, jika kamu masih ada yang bingung, kamu bisa tinggalin komentar di bawah ya, Terima kasih

No comments:

Post a Comment