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.

1
2
3
4
5
6
7

<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 (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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!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 penggunaas jsbin

1
2
3
4
5
6
7

//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 
    1
2
3
4

    $("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 
    1
2
3
4
5

     $("button").click(function () {
      $(this).replaceWith("<div>" + $(this).text() + "</div>");
    });
 
</div>
  • Menghapus object. kita dapat menhapus object tertentu. contoh 
    1
2
3
4
5
6
7
8

     $("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>

 

27 Comments

 

  1. June 18, 2009  9:56 pm by co-worker in dwc Reply

    hi, welcome to dwc. :)

    though, i could not understand your articles. does your site have any translation feature?

    • June 19, 2009  7:28 am by ibnoe Reply

      @co-worker. hi.. tq have visited my blog. unfortunately i don't have any english translation, may be you can use google translate. Indonesian already supported :d

  2. June 24, 2009  10:27 am by Apep Reply

    Thank NU, jadi banyak belajar nih....

  3. July 3, 2009  10:28 pm by Jauhari Reply

    Akhirnya Nemu panduan gini.. mantap mantap

  4. February 4, 2010  11:33 am by cikiprik Reply

    thx atas ilmunya.....O__O

  5. March 20, 2010  3:44 am by Freaky Reply

    Wah... canggih, diperbanyak lagi dong artikel tentang JQuery-nya

  6. April 13, 2010  1:02 pm by Rizal Reply

    Mas,saya mau nanya,kalo mau bikin div yang nyangkut di browser itu gimana ya?Kayak div chat pada facebook,itu kan di geser kemana aja div x tetap di bawah,mohon bantuan nya

    • April 13, 2010  1:13 pm by ibnoe Reply

      itu pakai css aja position:absolute; tinggl di set top dan left/rightnya nya

  7. April 17, 2010  4:41 pm by Hadi Reply

    mas, saya seorang newbie yang bener2 newbie....
    q mau nanya:
    cara.na bikin marquee yang terus nyambung (kata di depan kalimat nymbung ma yg d blakang) gmn iia???
    mohon bntuan dan arahan.na..........
    thax...........

  8. May 28, 2010  9:42 pm by bukhory212 Reply

    Thanks banget neh tutorial ctrl+D dulu dah ;D

  10. July 11, 2010  1:30 am by wildanr Reply

    Lagi cari-cari tutorial tentang jQuery.. nyangkut kesini di bawa yahoo.. he3.. Makasih bos tutorialnya, sangat membantu :)

  11. July 28, 2010  1:53 pm by sariful Reply

    Mas.. ada ebook nya ga.. gi belajar nich buat website :) mohon maaf sebelumnya ...

  13. August 22, 2010  5:19 pm by Tutorial php Reply

    bos salam kenal ya.... saya baru mau mulai belajar tentang javascript dan jquery mohon doa nya ya.... sekedar sering aja. beberapa bulan yang lalu saya berhasil membuat kalkulator pembilang dengan script php. Kalkulator pembilang ? maksudnya jika kita mengoperasikan 1000 x 300 = 300000 lalu ada pembilangnya Tiga Ratus Ribu. Nah bagi teman-teman yang ingin mempelajarinya silahkan langsung ke http://zakycom.blogspot.com. tks

  14. October 3, 2010  10:34 pm by Ahmad Reply

    Salam kenal..
    Tutorial yang bagus..

  15. October 15, 2010  7:46 am by def Reply

    nice tuts and clear enough, need more about jquery :)

  16. January 20, 2011  12:42 pm by oupie Reply

    makasih infonya...... lagi pengin belajar jquery..... tolong diajari ya......!!!

  17. February 12, 2011  8:20 am by atang sutisna Reply

    Mas, saya newbie.., mau tanya nih, bedanya framework sama library tu apa ? sebab ada nyebutin klo jquery tu library, ada juga framework. thank

  18. February 16, 2011  5:43 pm by riri Reply

    salam kenal ,
    saya mau tanya , bedanya javascript dengan jquery apa ya ?
    makasih .

  19. March 12, 2011  11:45 am by puluth Reply

    bingung saya

  20. March 30, 2011  2:07 pm by Wahyu Reply

    Makasih tutorialnya saya juga lg belajar.....
    kalo punya referensi-referensi yang lain dishared ya...

    Terimakasih

  21. April 12, 2011  1:13 am by codolsky Reply

    Wah..saya masih jauh klo kesitu..tp hrs bisa..thx bos

  22. April 27, 2011  8:30 pm by alam Reply

    ringkas tapi tepat sassaran, makasih mas.

  23. June 22, 2011  3:38 pm by prayoga Reply

    wah....baru mo blajaran jquery nih...
    info d atas lumayan membantu lah.
    tapi giliran JQuery manipulation gw ndak faham....
    maklum newbie

  24. August 27, 2011  10:40 pm by ganang Reply

    hadehhh...pucing

  25. September 10, 2011  4:27 pm by Doody Reply

    saya bingung buat JQUERY untuk script index.php berikut :
    index.php
    ---------





    eks.php
    -------



    Tolongg di bantu mas...
    Saya tunggu

  26. March 31, 2012  9:35 pm by Dedy Black Reply

    keren, sangat membantu tutorialnya

Leave a reply

 

Your email address will not be published.

Related posts