Archive for January 10th, 2011

Sintaks jQuery [introduction]


Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.

Sintaks :

$(selector).action()

• Tanda dollar, untuk mendefinisikan jQuery
• (selector), untuk menunjukkan elemen yang dipilih atau dituju
• action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.

Contoh :

$(this).hide()

– menyembunyikan elemen saat ini

$("p").hide()

– menyembunyikan semua paragraf atau konten dari tag <p>

$(".test").hide()

– menyembunyikan elemen yang mempunya class=”test”

$("#test").show()

– menampilkan elemen yang mempunyai id=”test”

Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca ataumemanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap.

Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.

$(document).ready(function(){
//kode anda di sini
});

Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan kode javascript biasanya seperti ini :

window.onload = function(){ //kode anda di sini }

Sekarang mari kita lihat pada contoh

$(".tombol1").click(function(){
$("p").hide(1000);
});

Kode $(“.tombol1”) adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=”tombol1” untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $() untuk membuat objek  jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=”tombol1” diklik maka lakukan fungsi $(“p”).hide(1000);

Fungsi hide() dan show() adalah fungsi built in dari jQuery, nanti akan kita lihat lebih lanjut fungsi-fungsi built in dari jQuery.

dikutip dari buku PHP Ajax Javascript jQuery

2011
01/10
POSTED BY
CATEGORY
anything
Leave a comment

Apa itu Jquery [introduction]


Apa itu jQuery?

jQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery
dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat
dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi
ajax. JQuery dirancang untuk mengubah cara anda menulis javascript.
Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai
HTML, CSS dan Javascript.

Library jQuery mempunyai kemampuan :

• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya

Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery,jangan lupa untuk memasukan file jquery.js kedalam kode javascript anda.

<script type="text/javascript" src="jquery.js"></script>

Oke, sekarang mari kita lihat contoh sederhana pemograman dengan menggunakan jquery.

Kode 12. hello world jquery

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){$("p").hide(1000);});
$(".tombol2").click(function(){$("p").show(1000);});
});
</script>
</head>

<body>
<p>Hello World!</p><button>Sembunyikan</button><button>Tampilkan</button>
</body>
</html>

dikutip dari buku PHP Ajax Javascript jQuery

2011
01/10
POSTED BY
CATEGORY
Tutorial
4 comments

I’m Here

Status YM