Selasa, 10 April 2012

TweetThis Button

Apa itu JQuery ?

Apa itu JQuery ?

Jquery adalah library javascript atau kumpulan script fungsi-fungsi javascript, bisa disebut juga sebagai frameworknya javascript, dengan Jquery kita dapat membuat website yang lebih interaktif dan lebih bagus. Banyak sekali fungsi dari jquery yang bisa kita pakai, tentu disesuaikan dengan kebutuhannya.


Jquery Selectors

Dalam membangun sebuah fungsi dengan Jquery tanda dolar $() adalah tanda wajib yang selalu dipakai di awal penulisan.  ini adalah contoh penulisan fungsi Jquery, sebagai contoh ini adalah file HTML yang akan di berikan fungsi Jquery.
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Skarang kita mau membuat kata “Hello World” menjadi hilang. Pertama kita download dulu file Jquerynya di situs resminya. Lalu cara memanggil file Jquerynya seperti ini,
<script type=”text/javascript” src=”jquery.js”></script>
dan ingat masukan file Jquerynya dalam satu folder dengan file HTML nya, atau bila tidak mau repot kita bisa gunakan Jquery dari google.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
Tinggal ketik urlnya tanpa perlu download. ^_^
Ok setelah itu kita siap untuk membuat function, dalam membuat fungsi  ada beberapa cara yang bisa dipakai untuk memberikan fungsi pada HTML yang mau kita berikan fungsi.
cara pertama
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Dalam memulai fungsi  Jquery terdapat berbagai cara tergantung kebutuhan
$(document).ready(function(){
ini adalah salah satu contoh cara memulai fungsi Jquery, untuk saat ini kita akan fokus cara memberikan fungsi Jqurey pada HTML yang mau kita beri fungsi,
$(“p”).click(function(){ ini adalah salah satu cara pemberian fungsi dengan memangil tag HTMLnya, “p” pada fungsi Jquery adalah cara memanggil tag paragraph <p> pada HTML, jadi salah satu cara memberikan Jquery function pada HTML adalah dengan melakukan panggilan pada TAG HTML nya.
$(this).hide();  adalah function untuk membuat efect hilang.
Cara Kedua
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#hello”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id=”hello”>Hello World</div>
</body>
</html>
Kita ubah bagian Hello World nya tadinya <p>Hello World</p> menjadi <div id=”hello”>Hello World</div>
kita lihat cara pemanggilan nya
$(“#hello”).click(function(){
berbeda dengan yang pertama, sekarang kita dalam memberikan fungsi pada HTML, kita memangil ID yang mau kita beri fungsi, jadi cara kedua adalah dengan memanggil IDnya.
cara Ketiga
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.hello”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div class=”hello”>Hello World</div>
</body>
</html>
cara ketiga yaitu kita memanggil classnya, $(“.hello”).click(function(){
jadi ada tiga cara menggunakan fungsi Jquery pada HTML
  1. Kita bisa memanggil Tag HTML yang akan di beri fungsi.
  2. Kita bisa menggunakan ID.
  3. Kita bisa Menggunakan Class.
Sekarang kita telah mengenal sedikit tentang JQuery, mudahkan??
ok sekian dulu artikel dari saya, semoga tutorial ini bermanfaat dan jangan lupa coment ya,,
Pada Artikel berikutnya kita akan belajar lebih jauh tentang Jquery.

http://desainbagus.com/

0 komentar:

Posting Komentar

.:Tutorial DHTML DLL:.

Tutorial tentang Dhtml scripts, Jquery plugins ,Javascript, CSS, CSS3, Html5 Library dll dan penerapannya pada Website, langsung aja kunjungi Website nya dan yang nggak kalah penting Free Yaa !!

.:distrowatch:.

Pengin Banyak tau tentang distro linux Langsung Aja Kunjungi DistroWatch Hmmm, banyak banget distronya, Download dan Pasang Linuxnya Lets Go Boss !!

.:jQuery Tutorial:.

Tutorial jQuery Widget ada disini semua Langsung Ke TKP Boss !!

.:Hirens Boot CD:.

Hiren's Boot CD cukup ampuh untuk membuat Clonning Atau Copy windows, dan banyak tool yang sangat berguna bagi para teknisi komputer maupun yang masih pemula silahkan Download filenya Disini kalo mau lihat tutorialnya membuat Flashdisc Bootable Disini Lumayan buat nambah ilmu dan Tool, Langsung aja Boss !!

Hiren’s BootCD

Bookmark and Share