Sabtu, 31 Mei 2014

Pengenalan JQuery


Sebelum kita memulai membahas tentang bagaimana kita memulai JQuery dan bagaimana Struktur JQuery, sebaiknya kita download dulu script JQuery di situs jQuery (http://jquery.com). Setelah kita mendownload script tersebut sekarang kita akan membahas bagaimana script JQuery tersebut digunakan. Seperti halnya CSS (Cascading Style Sheet), penggunaan JQuery dapat menggunakan dua cara, yaitu internal link atau di-embed dalam dokumen HTML tersebut atau menggunakan external link.
Akan tetapi untuk script plugin JQuery yang kita download tadi sebaiknya diletakan pada external link saja. Seperti halnya CSS, penggunaan eksternal link akan lebih mudah terkontrol dibandingkan jika kita menggunakan internal link.

INSTALLING
Agar kita dapat menggunakan library dari JQuery, maka kita harus menghubungkan library tersebut dengan dokumen HTML yang kita buat. Cara menghubungkanya seperti kita menghubungan file CSS, yaitu dengan memberikan eksternal link yang ditulis diantara tag <head>. Untuk klebih jelasnya perhatikan contoh dibawah ini :
<script src="jquery.js" type="text/javascript"></script>
Atribut src=”jquery.js” merupakan link yang kita gunakan unutk menghubungkan dengan file jquery.js yang kita download. Jika file JQuery berada dalam folder, maka penulisanya juga bisa menggunakan src=”/folderJuery/jquery.js”. Atau kita bisa juga menghubungkan file Script JQuery itu dengan memberikan link langsung ke URL JQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
JQUERY CODE
Berikut adalah contoh penggunaan JQuery Code ketika semua dokumen HTML sudah siap (ready).
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
alert('Selamat Datang pada pembelajaran JQuery');
}
);
</script>
Ada juga penulisan script JQuery yang lain akan tetapi lebih sederhana. Yaitu :
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
alert('Selamat Datang pada pembelajaran JQuery');
}
);
</script>
Jika pada penulisan sebelumnya adalah script JQuery akan dijalankan ketika dokumen HTML sudah siap, maka pada contoh berikut adalah cara penggunaan JQuery yaitu script JQuery akan dijalankan ketika dokumen sudah ter-load semua termasuk gambar dan file-file lain yang terdapat dalam dokumen tersebut
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function()
{
alert('Loaded Whole Page including images');
}
);
</script>

JQUERY STUCTURE
Struktur JQuery adalah terdiri dari :
  • $ = jquery
  • selektor =DOM elemen
  • function = mengeksekusi JQuery script
Contoh penulisan :
$(selector).function(parameters);
Catatan :
DOM adalah Document Object Mode, lebih jelas tentang DOM silahkan buka dan pahami di situs Wikipedia (http://en.wikipedia.org/wiki/Document_Object_Model ).
SELECTORS
  • Select DOM elements eg: $(‘h1′) ,$(‘div’), $(‘li’)
  • Select ID : $(‘#id_name’)
  • Select Class : $(‘.class_name’)

0 komentar:

Posting Komentar