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 class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
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 class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
Sintaks jQuery
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 atau
memanipulasi 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 Kode 12.
$(".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.
jQuery Selectors
Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai
elemen tunggal. Pada penjelasan sebelumnya kita telah melihat contoh cara memilih elemen
HTML menggunakan jQuery.
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 atau
memanipulasi 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 Kode 12.
$(".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.
jQuery Selectors
Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai
elemen tunggal. Pada penjelasan sebelumnya kita telah melihat contoh cara memilih elemen
HTML menggunakan jQuery.
jQuery element selectors dan attribute selectors memungkinkan Anda untuk memilih elemen
HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten. Selectors
memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen
tunggal.
jQuery Element Selectors
jQuery mirip CSS dalam hal memilih elemen HTML.
$("p") memilih semua elemen <p>
$("p.intro") memilih semua elemen <p> yang mempunyai class="intro".
$("p#demo") memilih elemen <p> yang mempunyai id="demo".
jQuery Attribute Selectors
jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.
$("[href]") memilih semua elemen dengan atribut href.
$("[href='#']") memilih semua elemen dengan atribut href bernilai="#".
$("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama
dengan "#".
$("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".
HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten. Selectors
memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen
tunggal.
jQuery Element Selectors
jQuery mirip CSS dalam hal memilih elemen HTML.
$("p") memilih semua elemen <p>
$("p.intro") memilih semua elemen <p> yang mempunyai class="intro".
$("p#demo") memilih elemen <p> yang mempunyai id="demo".
jQuery Attribute Selectors
jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.
$("[href]") memilih semua elemen dengan atribut href.
$("[href='#']") memilih semua elemen dengan atribut href bernilai="#".
$("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama
dengan "#".
$("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".
Efek-Efek dengan jQuery
Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk
membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi
dengan menggunakan jquery cukup menggunakan fungsi $(selector).fadeIn()
Berikut adalah efek-efek siap pakai yang disediakan oleh jquery.
jQuery show() Effect
Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang
tersembunyi melalui CSS adalah display:none (bukan visibility:hidden).
Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk
membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi
dengan menggunakan jquery cukup menggunakan fungsi $(selector).fadeIn()
Berikut adalah efek-efek siap pakai yang disediakan oleh jquery.
jQuery show() Effect
Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang
tersembunyi melalui CSS adalah display:none (bukan visibility:hidden).
Contoh show()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").show(1000,tampilkanAlert);
});
});
function tampilkanAlert(){
alert("Paragraf sekarang muncul");
}
</script>
</head>
<body>
<p style=”display:none”>Ini adalah paragraph tersembunyi.</p>
<button class="tombol1">Show</button>
</body>
</html>
jQuery hide() Effect
Berfungsi untuk menyembunyikan elemen yang dipilih.
Sintaks :
$(selector).hide(speed,callback)
Untuk parameter speed dan callback adalah sama dengan show() effect.
Contoh :
$(".tombol1").click(function(){
$("p").hide();
});
jQuery toggle() Effect
Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan yang tersembunyi,
menyembunyikan yang tampak.
Sintaks :
$(selector).toggle(speed,callback,switch)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").show(1000,tampilkanAlert);
});
});
function tampilkanAlert(){
alert("Paragraf sekarang muncul");
}
</script>
</head>
<body>
<p style=”display:none”>Ini adalah paragraph tersembunyi.</p>
<button class="tombol1">Show</button>
</body>
</html>
jQuery hide() Effect
Berfungsi untuk menyembunyikan elemen yang dipilih.
Sintaks :
$(selector).hide(speed,callback)
Untuk parameter speed dan callback adalah sama dengan show() effect.
Contoh :
$(".tombol1").click(function(){
$("p").hide();
});
jQuery toggle() Effect
Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan yang tersembunyi,
menyembunyikan yang tampak.
Sintaks :
$(selector).toggle(speed,callback,switch)