<html>
<head>
<script src="lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
// menyembunyikan elemen h1
// dengan jeda 3 detik
// menggunakan tag selector
$('h1').fadeOut(3000);
// mengeset atribut elemen dengan
// id nama menggunakan id selector
$('#nama').attr('placeholder','Ketikkan nama Anda');
// mengeset style css suatu elemen
// menggunakan class selector
$('.isian').css('background-color','powderblue');
// contoh event click pada elemen dengan id tertentu
$('#btnKlik').click(function(){
var nama = $('#nama').val(); // membuat variabel dan mengambil nilai
var hp = $('#hp').val();
// mengeset content paragraf dengan ID #hasil
$('#hasil').html('Nama Anda: '+nama+' Nomor HP Anda: '+hp);
$('#nama').val('');
$('#hp').val('');
});
// contoh event focusout pada elemen dengan id nama
$('#nama').focusout(function(){
// jika mengguna keluar fokus dari isian nama
// tanpa memasukkan nama, berikan peringatan
if ($(this).val().trim() == '') {
// method/action chaining
$('#pesanNama').show().html('Anda lupa mengisikan nama<br>').css('color','red').fadeOut(3000);
}
});
});
</script>
</head>
<body>
<h1>Belajar JQuery itu Menyenangkan</h1>
<label for="input1">Nama</label>
<input class="isian" type="text" id="nama" name="nama"><br>
<span id="pesanNama"></span>
<label for="input1">Nomor HP</label>
<input class="isian" placeholder="Ketikkan nomor HP Anda" type="text" id="hp" name="hp"><br>
<button id="btnKlik">Klik</button>
<p id="hasil"></p>
</body>
</html>
Comments
0 B
|0 👍
/0 👎
0 B
|👍
/👎