cara cepat menggunakan Jquery

Sebelum bercerita tentang jquery maka kita harus kenal dulu dengan javascript. Karena jquery adalah librarynya javascript. Alasan adanya jquery adalah karena bahasa javascript susah dipelajari. Susahnya karena javascript sangat luas dan sangat banyak komponennya. Sehingga dibuatlah penyederhanaan agar lebih mudah dan lebih cepat tapi hasilnya memuaskan sesuai motonya jquery “write less do more”.
Baiklah, anggap saja anda sudah paham dengan jquery.

Sekarang mari kita belajar menggunakan jquery dalam sebuah halam html. Tutorial ini sengaja saja bikin sangat simpel agar anda mudah memahami konsep dasar jquery. Karena function yang dimiliki jquery sangat banyak maka saya hanya mencontohkan sedikit saja dan seterusnya tinggal anda kembangkan sendiri.

1. Pertama kita siapkan dulu sebuah file html. Buat sebuah file dengan nama waroengweb.html lalu isilah dengan kode dibawah ini:

<!doctype
 html>

<html lang="en">

<head>
  <title>Belajar Jquery</title>
  <script src="jquery-2.1.0.min.js"></script>
</head>
<body>
	<h1>
Belajar Jquery</h1>
<p id="ket">
Saya sedang belajar jquery dengan admin <a 
href="http://blog.waroengweb.co.id">blog waroengweb</a>. Saya 
senang dengan adanya blog waroengweb yang memberikan banyak tulisan 
bermanfaat bagi saya.</p>
<div class="kutipan">
Blognya developer web ya blog 
Waroengweb</div>
<a href="#" id="tampil">Show Judul</a> <a href="#" 
id="tampil2">Komentar</a>
	<div id="komentar" style="display:none">
		<p>
<strong>Isikan komentar anda:</strong></p>
<form method="post">
			Nama: <input type="text" name="nama">	<br>
			Komentar: <textarea name="isi">

<!doctype html><br><br><html lang="en"><br><br><head><br>  <title>Belajar Jquery</title><br>  <script src="jquery-2.1.0.min.js"></script><br></head><br><body><br>    <h1>
Belajar Jquery</h1>
<br>    <p id="ket">
Saya sedang belajar jquery dengan admin <a href="http://blog.waroengweb.co.id">blog waroengweb</a>. Saya senang dengan adanya blog waroengweb yang memberikan banyak tulisan bermanfaat bagi saya.</p>
<br>    <div class="kutipan">
Blognya developer web ya blog Waroengweb</div>
<br>    <a href="#" id="tampil">Show Judul</a> <a href="#" id="tampil2">Komentar</a><br>    <div id="komentar" style="display:none">
<br>        <p>
<strong>Isikan komentar anda:</strong></p>
<br>        <form method="post">
<br>            Nama: <input type="text" name="nama">    <br><br>            Komentar: <textarea name="isi">

<!doctype html>

<html lang="en">

<head>
<title>Belajar Jquery</title>
<script src="jquery-2.1.0.min.js"></script>
</head>
<body>
   <h1>Belajar Jquery</h1>
   <p id="ket">Saya sedang belajar jquery dengan admin <a href="http://blog.waroengweb.co.id">blog waroengweb</a>. Saya senang dengan adanya blog waroengweb yang memberikan banyak tulisan bermanfaat bagi saya.</p>
   <div class="kutipan">Blognya developer web ya blog Waroengweb</div>
   <a href="#" id="tampil">Show Judul</a> <a href="#" id="tampil2">Komentar</a>
   <div id="komentar" style="display:none">
       <p><strong>Isikan komentar anda:</strong></p>
       <form method="post">
           Nama: <input type="text" name="nama">   <br>
           Komentar: <textarea name="isi"></textarea> <br>
           <input type="submit" value="Simpan">
       </form>
   </div>
</body>
</html>

Dari kode diatas jika dijalankan maka akan tampil halaman html anda. Tapi halaman html anda yang bagian kirim komentar tidak tampil karena sudah ditambahkan properti nya display:none.

2. Sekarang kita download file jquery versi 2. klik disini untuk mendownload file jquery. Setelah terbuka simpan dengan nama jquery-2.1.0.min.js

3. Lalu letakkan file jquery-2.1.0.min.js dalam folder yang sama dengan file waroengweb.html tadi. Sekarang jquery anda sudah terintegrasi dengan halaman html anda. Mari kita coba gunakan.

4. Pertama kita tambahkan dulu kode dengan posisinya pas di atas tag </head>

  <script type="text/javascript">
  	$(document).ready(function(){

  	});
  </script>

$(document).ready(function(){

});

</script>

Kode ini adalah kode standar untuk mulai menjalankan jquery. $(document).ready(function(){ artinya kode akan dieksekusi apabila halaman html sudah selesai di tampilkan semuanya.
5. Lalu dibawah kode $(document).ready(function(){ kita tambahkan kode berikut ini:

$("h1").hide();

1	$("h1").hide();

Maka kalau direfresh halaman webnya akan hilang <h1>Belajar Jquery</h1>
6. Sekarang pas dibawah kode tadi kita tambahkan lagi kode berikut:

$("#tampil").click(function(){
    $("h1").show("slow");
});

$("#tampil").click(function(){

$("h1").show("slow");

});

Jika direfresh halaman htmlnya maka hasilnya: jika diklik link Show Judul maka akan muncul judul Belajar Jquery
7. Berikutnya coba ganti show dengan toggle sehingga jadinya

$("h1").toggle("slow");

1	$("h1").toggle("slow");

Maka hasilnya jika diklik Show Judul secara berulang-ulang akan menghilangkan dan memunculkan judul berulang ulang pula.
8. Sekarang kita coba menambahkan style css ke html dengan jquery. Caranya: dibawah kode

$("#tampil").click(function(){
   $("h1").toggle("slow");
});

$("#tampil").click(function(){

$("h1").toggle("slow");

});

Tambahkan kode ini:

$("#ket").css({"backgroundColor":"red","color":"white","padding":"5px"});

1	$("#ket").css({"backgroundColor":"red","color":"white","padding":"5px"});

Maka hasilnya teks keterangan akan berubah sesuai style css yang sudah kita seting di jquery.
9. Untuk menampilkan form komentar anda bisa tambahkan kode berikut dibawahnya lagi

$("#tampil2").click(function(){
  $("#komentar").toggle("slow");
});

$("#tampil2").click(function(){

$("#komentar").toggle("slow");

});

semoga berhasil…

InfoMedia

Tags

Report Abuse

Search This Blog

Thursday, July 3, 2014

cara cepat menggunakan Jquery

No comments:

Post a Comment

Post Top Ad

Tentang Saya

Popular Posts

Recent

Popular

Comments

Pengikut

Archive

Photography

Tags

About Us

Beauty