Belajar jQuery mudah

Dari : http://www.koder.web.id/tutorial-php/belajar-jquery-mudah/

JQuery adalah sebuah framework/library JavaScript yang dapat membantu kita mempermudah dan mempercepat pengolahan DOM pada halaman web.
Dengan jQuery kita dapat membuat web lebih menarik dan interaktif dengan mudah. jQuery sudah mengautomasi pekerjaan-pekerjaan yang umum dan mempersimple code yang kompleks. Library ini sangat kecil dan mempunyai banyak pluggin yang dapat mempermudah kita.
Adapun fitur-fitur yang ditawarkan oleh jQuery adalah

Mempermudah akses dan manipulasi ke bagian page tertentu. jQuery menawarkan sebuah selector yang robust dan efesien untuk mengambil bagian tertentu pada dokumen yang selanjutnya bisa dimanipulasi.
Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan CSS dengan mudah.
Merespon interaksi user dengan webpage. jQuery mempunyai cara yang sangat-sangat elegan untuk memasukkan sebuah even ke dalam salah satu bagian dari webpage.
Menambah animasi. Kita dapat memberi animasi pada webpage kita dengan jQuery
Mempermudah AJAX.

Baiklah mari kita mulai dengan installasi jQuery. pada tutorial ini akan dibagi menjadi lima bagian yaitu instalasi, manipulasi, event, animasi dan ajax. pada artikel ini akan di bahas mengenai instalasi dan manipulasi.

Instalasi jQuery

Pertama-tama download dulu jQuery dari websitenya http://jquery.com/. Ada dua pilihan download. Production dan development, perbedaannya adalah production digunakan di realsite sedangkan development untuk masa developmen. Versi production sudah di kompresi sehingga kode nya sudah tidak bisa dibaca lagi dan ukurannya jauh lebih kecil. Versi developmen berguna jika kita mau mendebug jQuery.

Setelah mendownload maka load-lah jquery melalui tag script (perhatikan baris ke-6). sesuaikan attribut srcnya dengan path jquery anda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First JQuery</title>
<script type="text/javascript" src="/jquery.js"></script>
</head>

jQuery Selector

Selector adalah fungsi utama pada jQuery. semua fungsi lainnya di jQuery dapat diakses melalui selector. Penggunaan paling dasarnya adalah mempassingkan sebuah ekspressi (biasanya ekspressi css) yang kemudian selanjutnya jQuery akan mencari elemen yang cocok. pada intinya ini adalah fungsi untuk memilih elemen-elemen pad halaman web.

fungsi selector adalah $(‘ekspressi’). untuk penggunaan $() yang aman sebaiknya dilakukan setelah semua page DOM selesai terbaca semua. jadi webpagenya sudah lengkap baru script di eksekusi. kita dapat melakukannya dengan pada fungsi $(document).ready().

Adapun parameter yang bisa digunakan pada jquery adalah Id element, class element dan element itu sendiri. Selector juga bisa mengenali hirarki sebagai parameter inputnya dan bisa memfilternya langsung dari ekspressi.

*CATATAN : demo menggunakan layanan jsbin. anda bisa mengubah script html dan javascriptnya langsung, dengan mendouble click. pilih tab output untuk melihat hasilnya

contoh 1. mengubah semua div yang mempunyai p
demo : http://jsbin.com/ofaku

 (silakan di utak-atik demonya)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<base href="http://docs.jquery.com" /> 
<!-- Disini kita mengeload library Jquery --> 
<script src="http://code.jquery.com/jquery-1.3.js"></script> 
 
<script> 
$(document).ready(function(){ 
   // memangil semua div yang berisi p lalu ubah bordernya 
   $("div > p").css("border", "1px solid gray"); 
}); 
</script> 
</head> 
<body> 
<p>Ini adalah paragraf pertama</p>  
<div><p>Ini adalah paragraf kedua didalam div </p></div>  
 
<p>Ini adalah paragraf Ketiga</p> 
 
</body> 
</html>

contoh 2. Memasukkan tag html kedalam elemen
Demo : http://jsbin.com/ijopu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<base href="http://docs.jquery.com" /> 
<!-- Disini kita mengeload library Jquery --> 
<script src="http://code.jquery.com/jquery-1.3.js"></script> 
 
<script> 
$(document).ready(function(){ 
    //memasukkan html kedalam elemen
    $("<div><p>Saya adalah Paragraf Tabmahan</p></div>").appendTo("body") 
   // memangil semua div yang berisi p lalu ubah bordernya 
   $("div > p").css("border", "1px solid gray"); 
 
}); 
</script> 
</head> 
<body> 
<p>Ini adalah paragraf pertama</p>  
<div><p>Ini adalah paragraf kedua didalam div </p></div>  
 
<p>Ini adalah paragraf Ketiga</p> 
 
</body> 
</html>

Uji Coba
dari contoh diatas. coba kita buka halaman
lalu masukkan tambahkan kode ini satu persatu. lihat effect yang terjadi lalu pelajari fokuslah pada parameter yang ada pada fungsi $(PARAMETER) bukan fungsi diibelakangnya karena itu akan di jelaskan setelah ini.

//contoh selector menggunakan nama tag
$("div").css("border","3px solid red");
$("p").css("border","3px solid blue");
//contoh selector menggunakan nama object/element
$("#id_pertama").css("color","red");
//contoh selector menggunakan nama Kelas object
$(".merah").css("color","red");

*untuk dapat melihat perubahan script di coba satu-satu jangan langsung semua

jQuery Manipulation

Jquery Manipulation maksudnya penggunaan jquery untuk memanipulasi struktur dokumen. ada 7 kategori manipulasi yang disupport oleh jquery yaitu

Perubahan Content. Kita dapat merubah kontent dari sebuah object dengan dua fungsi yaitu html dan text. bedanya jika menggunakan text maka semua tag-tag html akan dituliskan sebagai mana mestinya. contoh (demo http://jsbin.com/ifoho) :
1
2
3
4

$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
Insert kedalam object. Setelah kita memilih sebuah object, kita dapat memasukkan tab html atau object kedalamnya. ada dua jenis insert yaitu append dan prepend. append menambahkan objek baru setelah value dari object tersebut, sedangkan prepend didepannya. contoh
1
2
3
4

$("p").append("<strong>Hello</strong>");
$("span").appendTo("#conto"); // Objek dengan ID conto akan dimasukkan kedalam span
$("p").prepend("<b>Hello </b>");
$("span").prependTo("#conto");

Insert dikeluar object. Object yang akan ada tambahkan akan ada diluar masing-masing tag yang dipilih. contoh

$("p").before("<strong>Hello</strong>");
$("p").after("<strong>Hello</strong>");
$("span").insertAfter("#conto");
$("span").beforeAfter("#conto");

Insert kesekitar object.

Mereplace object. Kita dapat mengganti isi dari object dengan syntax ini. contoh

 $("button").click(function () {
      $(this).replaceWith("<div>" + $(this).text() + "</div>");
    });
 
</div>

Menghapus object. kita dapat menhapus object tertentu. contoh

 $("button").click(function () {
      $("p").empty();
    });
 
   $("button").click(function () {
      $("p").remove();
    });
</div>

Mengopi object. Mengopi object ke tempat lain . contoh
1
2

$("b").clone().prependTo("p");
</div>

Rekomendasi Artikel: