Jquery ajax

375 views

Published on

  • Be the first to comment

  • Be the first to like this

Jquery ajax

  1. 1. Chanief Budi Setiawan, S.T. © 2012
  2. 2.    
  3. 3.       
  4. 4.
  5. 5.   
  6. 6. <!-- 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>
  7. 7. <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>
  8. 8.  
  9. 9. <!-- 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>
  10. 10.
  11. 11. <!-- 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>
  12. 12. <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>
  13. 13.  
  14. 14. <!-- 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>
  15. 15. <!-- 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>

×