gurumutant

JQuery - Pengenalan Selector, Action, Chaining

Nov 23rd, 2020 (edited)
1,073
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <script src="lib/jquery-3.5.1.min.js"></script>
  4.         <script type="text/javascript">
  5.             $(function(){
  6.                 // menyembunyikan elemen h1
  7.                 // dengan jeda 3 detik
  8.                 // menggunakan tag selector
  9.                 $('h1').fadeOut(3000);
  10.                 // mengeset atribut elemen dengan
  11.                 // id nama menggunakan id selector
  12.                 $('#nama').attr('placeholder','Ketikkan nama Anda');
  13.                 // mengeset style css suatu elemen
  14.                 // menggunakan class selector
  15.                 $('.isian').css('background-color','powderblue');
  16.                
  17.                 // contoh event click pada elemen dengan id tertentu
  18.                 $('#btnKlik').click(function(){
  19.                     var nama = $('#nama').val(); // membuat variabel dan mengambil nilai
  20.                     var hp = $('#hp').val();
  21.                     // mengeset content paragraf dengan ID #hasil
  22.                     $('#hasil').html('Nama Anda: '+nama+' Nomor HP Anda: '+hp);
  23.                     $('#nama').val('');
  24.                     $('#hp').val('');
  25.                 });
  26.                 // contoh event focusout pada elemen dengan id nama
  27.                 $('#nama').focusout(function(){
  28.                     // jika mengguna keluar fokus dari isian nama
  29.                     // tanpa memasukkan nama, berikan peringatan
  30.                     if ($(this).val().trim() == '') {
  31.                         // method/action chaining
  32.                         $('#pesanNama').show().html('Anda lupa mengisikan nama<br>').css('color','red').fadeOut(3000);
  33.                     }
  34.                 });
  35.             });
  36.         </script>
  37.     </head>
  38.     <body>
  39.         <h1>Belajar JQuery itu Menyenangkan</h1>
  40.         <label for="input1">Nama</label>
  41.         <input class="isian" type="text" id="nama" name="nama"><br>
  42.         <span id="pesanNama"></span>
  43.         <label for="input1">Nomor HP</label>
  44.         <input class="isian" placeholder="Ketikkan nomor HP Anda" type="text" id="hp" name="hp"><br>
  45.         <button id="btnKlik">Klik</button>
  46.         <p id="hasil"></p>
  47.     </body>    
  48. </html>
RAW Paste Data