jquery ajax
DESCRIPTION
TRANSCRIPT
Chanief Budi Setiawan, S.T. © 2012
<!-- file: P17-1.html -->
<html>
<head>
<title>P17-1: Modifikasi HTML</title>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Teks tambahan</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Poin tambahan</li>");
});
});
</script>
</head>
<body>
<p>Ujicoba jQuery HTML.</p>
<p>Ujicoba jQuery versi 1.8.2.</p>
<ol>
<li>Poin 1</li>
<li>Poin 2</li>
<li>Poin 3</li>
</ol>
<button id="btn1">Tambah teks</button>
<button id="btn2">Tambah poin</button>
</body>
</html>
<!-- file: P17-2.html -->
<html>
<head>
<title>P17-2: Modifikasi HTML</title>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#tulis").remove();
});
});
</script>
</head>
<body>
<div id="tulis" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
<p align="center">Ini adalah tulisan dalam div</p>
</div><br><button>Hapus</button>
</body>
</html>
<!-- file: P17-3.html -->
<html>
<head>
<title>P17-3: Modifikasi HTML</title>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Selamat Malam.");
});
$("#btn2").click(function(){
$("#test2").html("<b>jQuery dan AJAX</b>");
});
$("#btn3").click(function(){
$("#test3").val("Sponge Bob");
});
});
</script>
</head>
<body>
<p id="test1">Ujicoba jQuery 1</p>
<p id="test2">Ujicoba jQuery 2</p>
<p>Nama<input type="text" id="test3" value="Donal Bebek"></p>
<button id="btn1">Ubah Teks</button>
<button id="btn2">Ubah HTML</button>
<button id="btn3">Ubah Field</button>
</body>
</html>
<!-- file: P17-4.html -->
<html>
<head>
<title>P17-4: Load AJAX</title>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ajax").load("P17-ajax.txt");
});
});
</script>
</head>
<body>
<div id="ajax"><h2>jQuery AJAX akan mengubah isi tulisan ini</h2></div>
<button>Ubah Dari File Lain</button>
</body></html>
<!-- file: P17-ajax.txt -->
<h2>jQuery mendukung AJAX.</h2>
<p>Tulisan ini diambil dari file lain, yaitu P17-ajax.txt yang terletak di server</p>