Thursday, December 18, 2014

Pengenalan dan Cara Penggunaan JQuery

JQuery merupakan suatu framework (pustaka) Javascript yang menekankan bagaimana interaksi antara Javascript dengan HTML. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan“Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

JQuery adalah library open source dengan lisensi GNU ( General Public License ) dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 60 KB dan hanya terdiri dari satu file, sehingga dengan menggunakan JQuery akan jauh lebih cepat dan mudah dalam perpindahan dokument HTML, penggunaan animasi di dalam web sehingga terlihat seperti menggunakan flash.

Cara Penerapan JQuery...
Karna JQuery merupakan sebuah pustaka/library, tentunya saudara harus memiliki JQuerynya terlebih dahulu. Silahkan Download library JQuery di http://jquery.com setelah itu silahkan simpan di folder dalam drive saudara ( misal D:/jquery/ file library jquery ).
Selanjutnya saya akan berikan contoh penggunaan JQuery bagaimana menampilkan dan menutup sebuah gambar dengan menggunakan dua buah tombol.

Contoh :
  < html>
   < head>
     < title>Contoh Penerapan JQuery< /title>
     < script type="text/javascript" src="jquery-1.5.2.min.js" mce_src="jquery-1.5.2.min.js">< /script>
     < script type="text/javascript">
       $(document).ready(function(){
           $(".tutup_gambar").click(function(){
              $("#gambar").hide("slow");
           });

           $(".tampil_gambar").click(function(){
              $("#gambar").show("slow");
           });
       });
      < /script>

   < /head>
   < body>
     < button class="tutup_gambar">Tutup Gambar< /button>
     < button class="tampil_gambar">Tampil Gambar< /button>
     < p>< img id="gambar" 
src="yonand.jpg" mce_src="yonand.jpg" style="border:7px solid; padding:5px;"/>< /p>
   < /body>
 < /html>

 Simpan file diatas dengan index.html, di tempatkan persis sama dengan file library JQuery yg telah didownload, kemudian tempatkan juga sebuah gambar dengan nama yonand.jpg.

 penjelasan untuk script diatas :
 fungsinya memanggil library JQuery yang didownload. 
 < script type="text/javascript" src="jquery-1.5.2.min.js" mce_src="jquery-1.5.2.min.js">< /script>
  JQuery memastikan bahwa elemen yang diinginkan sudah ditampilkan dihalaman web.
 $(document).ready(function()
  Setelah semua Elemen ditampilkan, kemudian jQuery akan memilih elemen berdasarkan id, class atau tag. Atau lebih dikenal denganselector.

$(".tutup_gambar")
$(".tampil_gambar")
$("#gambar")
 Setelah elemen dipilih, berikutnya adalah memberikan aksi/operasi terhadap elemen       yang sudah dipilih. Contoh disamping-> show.
 $(".tampil_gambar").click(function(){
              $("#gambar").
show("slow");
           });

Memahami sedikit tentang JQuery :
$ -> merupakan simbol  JQuery.
{"id/class/tag"} -> Elemen/Slector pd Jquery
.addclass("XXX") -> memberi perintah pada elemen
$("id/class/tag").addclass("XXX") 

Intinya dari Fungsi JQuery akan mencari suatu elemen tertentu yang telah didefenisikan pada bagian body, kemudian akan mengeksekusi bagian elemen terssebut sesuai dengan perintah yang diberikan.
Sekian pengenalan Jquerynya semoga dari sedikit penjelasan diatas bisa saudara kembangkan lagi..


0 komentar: