Basic-jQuery.html

<!DOCTYPE html>
<head>
  <!--Menggunakan library jQuery dar CDN, haru online dan WAJIB men import jika akan menggunakan/menjalan kan kode jquery-->
  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
  <title>Belajar jQuery</title>
  <script>
  //kalau page sudah terload
    $(document).ready(function(){
      //jika id klik di tekan
      $('#klik').click(function(){
        var nama = $("#nama").val(); //definisikan variable nama dari id nama(input)
        var hasil = $(".hasil").html(); //definisikan variable hasil dengan class hasil
        $("#klik").css("background-color", "red"); //tambahkan css kode dengan value background-color
        $("#content").css("background-color", "yellow");
        $("#nama").addClass("c1"); //tambahkan class  ke id nama
        $(".hasil").empty(); //menghapus value id hasil,hanya value gunakan remove() untuk menghapus tag nya juga
        $(".hasil").append("<b>"+nama); //menambahkan var nama ke id hasil (setelah)
        $(".hasil").prepend("Nama saya "); //menambahkan String Nama saya ke id hasil(sebelum )
        $("#myfb").attr("href","https://fb.com/mark", "title","My Facebook link"); //menambahkan atribut href dan title ke class myfb
      });
      //jika id hapus di tekan
      $("#hapus").click(function(){
        $("#nama").removeClass("c1"); //hapus class c1 dari id nama
        var w = $("#nama").width(); //mengambil width(lebar) dari input dengan id nama
        var w = $("#nama"). height(); //mengambil height(tinggi) dari input dengan id nama
        $("#nama").width(100); //mengubah lebar id nama(input) 100px(default pixel)
        $("#nama").height(300); //mengubah tinggi id nama(input) 20px(default pixel)
        /** bisa juga digunakan untuk mengurang value pixel contoh
         var w1 = w.width(w -10);
         **/
      });
      //jika id ubah(button) di klik
      $("#ubah").click(function(){
        $(this).css("background-color", "red"); //mengubah id ubah(button) menggunakan this(this disini ditujukan kepada $("#ubah")
      });
      //jika tombol show di klik
      $("#show").click(function(){
        $("#content").show(1000); //tampilkan element dengan id nama
       });
      //jika hide ditekan
      $("#hide").click(function(){
        $("#content").hide(4000); //sembunyikan element dengan id nama
        //show() atau hide() bisa di isi dengan value angka dalam millisecond untuk membuat animasi slow saat menampilkan
      });
    });
  </script>
  <style>
    .c1{
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="content">
  </div>
  <input type="text" id="nama">
  <button id='klik' >Klik me</button>
  <button id="hapus">Hapus css</button>
  <button id="show">Show id nama</button>
  <button id="hide">Hide id nama</button>
  <button id="ubah">Ubah dengan $(this)</button>
  <p class="hasil">Hallo.. </p>
  <a id="myfb">Klik untuk menuju profil Facebook saya.</a>
<!--khaclep007-->
<!--Doakan saja saya selamat dunia akhirat-->
</body>
</html>