Memasang JQuery Di Web

Kali kita berbagi ilmu mengenai memasang JQuery di Website, kalau blog saya belum coba tapi sepertinya bisa tapi agak ribet edit template nya ^^ jika mau coba sendiri ya.
Saya hanya akan membagi cara memasangnya saja, jika anda sudah mahir ya mohon maaf, tapi jika anda newbie ya kembangin sendiri ya.
Sebenarnya JQuery sendiri adalah kumpulan dari AJAX yang dibuat fungsi sedemikian hingga agar mudah digunakan orang tanpa perlu tahu asal usul scriptnya bagaimana tapi dengan fungsi-fungsi yang cukup mudah maka tinggal melakukan pengembangan saja.
JQuery ini karena AJAX maka dapat bekerja pada halaman web yang berbasis html, untuk memulai pertama kita download dulu Jquerynya di http://jquery.com/ untuk versinya ada 2 yaitu minified, dan uncompressed. minified yaitu JQuery yang hanya menggunakan efek-efek yang perlu saja dan banyak di pakai kebanyakan developer web. Sedangkan untuk versi uncompressed itu untuk developer advance dan bisa dikembangkan lagi.
Saran saya jika anda developer baru sebaiknya menggunakan JQuery Min karena ukurannya yang kecil sehingga cepat waktu proses load, kemudian juga efeknya yang kita butuhkan dan bisa juga digabungkan dengan JQuery Plugin lainnya. Tapi jika anda developer advance ya pakai saja yang uncompressed karena disediakan debug script.
Memulai Membuat scriptnya, pertama kita load dulu JQuerynya yang telah di download tadi, jangan lupa lokasi menyimpannya ya ^^ sebagai tambahan anda juga dapat meload JQuery dari Googleapi tapi jika anda punya koneksi internet Online dengan alamat http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
sebagai contoh untuk load jquery
<script type="text/javascript" src="js/jquery.min.js" ></script> untuk load dengan menempatkan JQuery di local disk
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script> untuk load JQuery secara online dari situs google.



Untuk contoh memulai script

<html>
<head>
<title> Test JQuery </title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
//codehere
});
</script>
</head>
<body>
<div id="ganti"></div>
</body>
</html>

pada komentar "//codehere" itu diisi dengan fungsi-fungsi yang ada dalam JQuery. untuk dokumentasi fungsi yang dapat digunakan ada di http://api.jquery.com/

contoh penggunaan JQuery sederhana


<html>
<head>
<title> Test JQuery </title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
//load otomatis jika tidak ada event apapun
$("#ganti").html('Text ini di load otomatis dengan Jquery');

//fungsi jika a dengan class a di tekan, maka div dengan id ganti di kosongkan
$(".a").click(function(){
$("#ganti").html('');
});
//fungsi jika a dengan class b di tekan, maka div dengan id ganti akan di isi
$(".b").click(function(){
$("#ganti").html('tulisan');
});
//selesai

});
</script>
</head>
<body>
<div id="ganti"></div><br />

<a class="a" href="#">hapus</a>
<a class="b" href="#">tampil</a>
</body>
</html>

pada contoh diatas, pertama load jquery jangan salah src-nya, karena jika tidak terload, maka efek tidak akan berjalan. Kedua buat tag script  lagi dan isikan fungsi disitu.
Untuk selebihnya kalian kembangkan sendiri ya, soalnya saya juga belum begitu ngerti dan belum diexplore semua ^^
Selamat berexplorasi, semoga membantu .


Powered by Danz
di
Kategori , , , ,

Tidak ada komentar:

Posting Komentar

Silakan Comment Tapi yang membangun ya (Jangan Spam) (^.^)

Langganan: Posting Komentar (Atom)

Trend Minggu Ini