Your SlideShare is downloading. ×
Jquery ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Jquery ajax

145
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
145
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Chanief Budi Setiawan, S.T. © 2012
  • 2.    
  • 3.       
  • 4.
  • 5.   
  • 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. <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.  
  • 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.
  • 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. <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.  
  • 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. <!-- 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>