Apa itu jQuery?
jQuery adalah sebuah perpustakaan dari Fungsi Fungsi JavaScript.
jQuery adalah sebuah perpustakaan JavaScript berbeban ringan "sedikit menulis, banyak kerja".
Perpustakaan jQuery memuat feature-feature berikut:
seleksi elemen HTML
manipulasi elemen HTML
manipulasi CSS
fungsi-fungsi event HTML
animasi dan JavaScript Effects
modifikasi dan HTML DOM traversal
AJAX
Utilities
Menambahkan Perpustakaan jQuery ke Halaman Halaman Anda
Perpustakaan jQuery diberi sebuah file library is stored sebuah JavaScript tunggal, memuat semua fungsi jQuery.
Perpustakaan dapat ditambahkan ke sebuah halaman web dengan mark-up berikut:
<head>
<script type="text/javascript" src="jquery.js">
</script>
</head>
Silahkan mencatat bahwa tag
<script> harus berada di dalam bagian <head>
Contoh jQuery Dasar
Contoh berikut mendemonstrasikan fungsi jQuery hide(), menyembunyikan semua elemen <p> dalam sebuah dokumen HTML.
Contoh
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(); }); });
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Mengunduh jQuery
Dua versi dari jQuery tersedia untuk mengunduh: satu minified dan satu uncompressed (untuk debugging atau membaca).
Kedua versi itu dapat diunduh dari jQuery.com.
Efek jQuery
Hide/Menyembunyikan, Show/Memperlihatkan, Toggle/Memenggal, Slide,
Fade/Memburamkan, dan Animate/Menganimasi.
Contoh
jQuery hide()
Mendemonstrasikan sebuah fungsi jQuery hide() yang sederhana.
jQuery hide()
Demonstrasi hide() lainnya.
Bagaimana menyembunyikan bagian-bagian dati teks.
jQuery slideToggle()
Mendemonstrasikan efek panel slide yang sederhana.
jQuery fadeTo()
Mendemonstrasikan sebuah fungsi jQuery fadeTo() yang sederhana.
jQuery animate()
Mendemonstrasikan sebuah fungsi jQuery animate() yang sederhana.
jQuery Hide dan Show
Dengan jQuery. Anda dapat menyembunyikan dan memperlihatkan elemen-elemen HTML dengan metode hide() dan show():
Contoh
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Kedua hide() dan show() dapat mengambil dua parameter pilihan: speed/kecepatan dan callback/panggil balik.
Syntax:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
Parameter speed mengkhususkan kecepatan parameter dari hiding/showing, dan dapat mengambil value berikut: "slow", "fast", "normal", atau milliseconds:
Contoh
$("button").click(function(){
$("p").hide(1000);
});
Parameter callback adalah nama dari sebuah fungsi untuk melakukan eksekusi setelah fungsi parameter hide (atau show) selesai. Anda akan mempelajari lebih banyak tentang parameter callback dalam bab berikut dari tutorial ini.
jQuery Toggle
Metode jQuery toggle() memenggal kemampuan penampakan dari elemen-elemen HTML menggunakan metode show() atau hide().
Elemen-elemen yang diperlihatkan disembunyikan dan elemen-elemen yang disembunyikan diperlihatkan.
Syntax:
$(selector).toggle(speed,callback)
Parameter speed dapat mengambil value berikut: "slow", "fast", "normal", atau milliseconds.
Contoh
$("button").click(function(){
$("p").toggle();
});
Parameter callback adalah nama dari sebuah fungsi untuk melakukan eksekusi setelah sebuah metode hide (atau show) lengkap.
jQuery Slide - slideDown, slideUp, slideToggle
Metode jQuery slide secara lambat laun mengubah ketinggian untuk elemen-elemen yang diseleksi.
jQuery memiliki metode slide berikut:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
Parameter speed dapat mengambil value berikut: "slow", "fast", "normal", atau milliseconds.
Parameter callback adalah nama dari sebuah fungsi untuk melakukan eksekusi setelah fungsi tersebut lengkap/selesai.
Contoh slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Contoh slideUp()
$(".flip").click(function(){
$(".panel").slideUp()
});
Contoh slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery Fade - fadeIn, fadeOut, fadeTo
Metode jQuery fade secara lambat laun mengubah keremangan untuk elemen-elemen yang diseleksi.
jQuery memiliki metode fade berikut:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
Parameter speed dapat mengambil value berikut: "slow", "fast", "normal", atau milliseconds.
Parameter opacity dalam metode fadeTo() mengizinkan kehilangan warna ke sebuah keremangan yang diberikan
.
Parameter callback adalah nama dari sebuah fungsi untuk melakukan eksekusi setelah fungsi tersebut lengkap/selesai.
Contoh fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Contoh fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});
Animasi jQuery Custom
Syntax dari metode jQuery untuk membuat animasi-animasi custom adalah:
$(selector).animate({params},[duration],[easing],[callback])
Parameter key adalah params. Parameter ini merumuskan properti-properti CSS yang akan dianimasi. Banyak properti dapat dianimasi pada waktu yang sama:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Parameter ke dua adalah duration. Parameter ini merumuskan waktu yang digunakan untuk menerapkan animasi. Saya mengambil value "fast", "slow", "normal", atau milliseconds.
Contoh 1
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});
});
</script>
Contoh 2
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"100px"},"slow");
$("div").animate({fontSize:"3em"},"slow");
});
});
</script>
Elemen-elemen HTML diposisikan statis dengan default dan tidak dapat digerakkan. Untuk membuat elemen-elemen bisa bergerak, susun properti posisi CSS untuk fixed, relative atau absolute.