Archive for Juli 2018
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body bgcolor="white">
<h1>Melki Mitsuki</h1><br>
<div id="tambah">tambah
</div>
<div id="remove">remove
</div>
<script>
$(document).ready(function(){
$('#tambah').click(function(){
$('#tambah').append('<div>tambah element berada di dalam dan di bagian bawah ganti append dengan prepend (untuk element berada di atas) after (eleement berada di bagian bawah tapi di luar) before (element berada di atas tapi diluar) remove (untuk menghapus elemen menurut id) empty (menghapus isi dari sebuah element menurut id)</div>');
});
$('#remove').click(function(){
$('#tambah').remove();
});
});
</script>
</body>
</html>
[JQUERY] menulis dan menghapus element
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body bgcolor="white">
<h1>Melki Mitsuki</h1><br>
<form>
<input type="text" id="t"/>
<input type="submit" value="klik"/>
</form>
<script>
$(document).ready(function(){
$('form').submit(function(){
var isi=($('#t').val());
$('h1').text(isi);
event.preventDefault();
});
});
</script>
</body>
</html>
[JQUERY] Get & Set
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Melki Mitsuki</h1><br>
<div id="div1">gunakan # untuk idi</div>
<div class="div2">gunakan titik untuk class</div>
<div class="div3">ini div3</div>
<div class="div3">ini div3</div>
<div class="div3">ini div3</div>
<div class="div3">ini div3</div>
<script>
$('h1').click(function(){
$('h1').css('color','red');
});
$('#div1').click(function(){
$('#div1').css('color','green');
});
$('.div2').click(function(){
$('.div2').css('color','yellow');
});
$('.div3').click(function(){
$(this).css('color','red');
});
</script>
<h3> kalian dapat mengganti event click dengan mouseenter dan mouseleave</h3>
</body>
</html>
[JQUERY] event
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Melki Mitsuki</h1><br>
<div id="div1">gunakan # untuk idi</div>
<div class="div2">gunakan titik untuk class</div>
<script>
$(document).ready(function(){
$('h1').css('color','red');
$('#div1').css('color','blue');
$('.div2').css('color','green');
});
</script>
</body>
</html>
