Sebelum kita bahas lebih lanjut mengenai dokumen jQuery, kali ini admin sajikan artikel tentang teknik teknik dasar yang harus dipahami para pogramer tentang jQuery.

Dalam website resminya www.jQuery.com disebutkan ada sebelas hal yang harus kita pelajari untuk menguasai jQuery atau dikenal dengan jQuery API (Application Progamming Interface), yaitu:

1.   jQuery Core
2.   Selectors
3.   Attributes
4.   Traversing
5.   Manipulation
6.   CSS
7.   Events
8.   Effects
9.   AJAX
10.   Plugin / jQuery UI (User Interface)
11.   Utilities

Namun, pada beberapa referensi yang penulis temukan di Internet, kita cukup mempelajari tiga hal yang paling mendasar saja untuk memahami jQuery, yaitu Selectors, Events, dan Effects.

Contents show

Filosofi Dasar Pemrograman jQuery

Sebelum masuk ke pembahasan dasar-dasar jQuery, ada baiknya kita mengetahui filosofi pemrograman dari jQuery, karena secara keseluruhan pemrograman jQuery nantinya akan mengacu pada filosofi dasamya yang dapat dilihat pada gambar dibawah ini.

Pada umumnya, perintah jQuery digantikan dengan tanda dolar ($) yang merupakan simbol resmi dari fungsi j Query, sehingga sering dituliskan seperti pada gambar berikut.

Intiya, fungsi jQuery akan mencari suatu elemen tertentu yang telah didefinisikan dibagian body, kemudian melakukan sesuatu terhadap elemen tersebut, itulah filosofi dasar dari jQuery.

Selectors (Memilih Elemen)

Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulasi terhadap elemen-elemen tersebut.

Adapun elemen-elemen dasar yang dapat dipilih oleh Selectors adalah sebagai berikut:

Nama tag
id
class

Untuk mengetahui bagaimana cara Selectors dalam memilih elemen-elemen tersebut, penulis akan sajikan beberapa contoh sederhana pada sub-bab berikutnya, sehingga mempermudah Anda dalam memahami Selectors.

Selectors tag

Cara menggunakan selectors tag dengan langsung menyebut nama tag/elemennya → $(“div”). Untuk lebih jelasnya, perhatikan skrip selector_tag.html
Penjelasan Skrip (selector_tag.html): Semua tag dengan nama div akan terpilih oleh Selectors, kemudian diberikan operasi “biru” terhadap elemen terpilih tersebut (operasi “biru” mengacu pada style yang telah kita definisikan di bagian head, yaitu .biru), sehingga semua teks akan berwarna biru dan tebal.

Lihat Script selector_tag.html

<html>
<head>
(script src=”jquery-1,8.0.min. j 3 “></ script>
<script type=”text/j avascript”>
$(document).ready(function(){ $(“div”).addclass(“biru”) ;
});
</script>
<style type=”text/es5”>
.biru { color: blue;
font-weight; bold;
}
</style>
</head>
<body>
div>
<p>Menu Favorit : </p> </div>
<div>- <ul>
<li>Nasi Goreng</li> <li>Sop Buntut</li> <li>Mie Ayam</li> </ul>
</div>

Berikut adalah hasil gambar selector_tag.html:

Kita juga bisa memilih tag yang berada didalam tag, misalnya didalam tag div terdapat tag p. Untuk lebih jelasnya, lihat contoh skrip selector_tag2.html berikut.

Lihat Script selector_tag2.html

<html>
<head>
<script src=”jquery-1.8.0 .min.j.s “></script> <script type=”text/javascript”>
$(document).ready(function(){
$”(“P”).addClass (“birukuning”);
});
</script>
<style type=”text/css”>
.birukuning {
color: blue; font-weight; bold; background-color: yellow;
}
</style>
</head>
<bcdy>
<div>
<p>Menu Favorit : </p>
</div>
<div>
<ul>
<li>Nasi Goreng</li>
<li>Sop Buntut</li>
<li>Mie Ayam</li>
</ul>
</div>

Berikut ini adalah hasil gambar dari script Selector_tag2.html:

Apabila skrip selector_tag2.html dijalankan browser, maka hanya menu Favorit saja yang berwarna biru dengan backround kuning. Sedangkan Nasi goreng, Sop Buntut, dan Mie ayam tetap normal berwarna hitam dan tidak tebal.

Selector ID

Cara menggunakan Selectors id dgn menyertakan tanda # sebelum nama elemennya $(“#nama_elemen_id”). Perhatikan skrip selector_id.html berikut.

Lihat Script selector_id.html

<html>
<head>
<script src=”jqpery-1.8.0.niin.js”></script>
< script type=”text/javascript“>
$(document).ready(function(){
$(“#target”).addClass (“birukuning”);
});
</script>
<style type=”text/css”>
.birukuning { color: blue;
font-weight; bold;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Menu Favorit : </p>
</div>
<div>
<ul id=”target”>
<li>Nasi Goreng</li>
<li>Sop Buntut</li>
<li>Mie Ayam</li>
</ul>
</div>

Berikut ini adalah hasil gambar yang dihasilkan dari script selector_id.html :

Penjelasan Skrip (selector_id.html) :
Tag ul dengan id “target” akan terpilih oleh Selectors, kemudian diberikan operasi “birukuning” terhadap elemen terpilih tersebut, sehingga semua teks yang berada dalam lug ul id “target” (Nasi Goreng, Sop Buntut, Mie Ayam) akan berwama bira dan tebal ili ugun background berwama kuning.

Selectors class

Cara menggunakan Selectors class adalah dengan menyertakan tanda titik (.) sebelum nama elemennya →$(“.nama_elemen_class”) . Untuk lebih jelasnya, perhatikan skrip selector_class.html dibawah ini.

Lihat Script selector_class.html

<html>
<head>
<script src=”jquery-1.8.0.min.j.s”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#target”).addclass(“birukuning”);
$(“#subtarget”).addclass(“hitam putih”);
});
</script>
<style type=”text/css”>
.birukuning { x.
color: blue; font-weight: bold; background-color; yellow;
}
.hitamputih {
color; white;
background-color: black ?
}
</style>
</head>
<body>
<div>
<p>Menu Favorit : </p>
</div>
<div>
<ul id=”target™>
<li>Nasi Goreng</li>
<li class=’’subtarget”>Sop Buntut</li>
<li>Mie AyanK/li>
</ul>
</div>

Berikut ini adalah hasil gambar yang dihasilkan dari script selector_class.html :

Penjelasan Skrip (selector_class.html). Tag li dengan class “subtarget” akan terpilih oleh Selectors, kemudian diberikan operasi “hitamputih” terhadap elemen terpilih tersebut, sehingga semua teks yang berada dalam tag li class “subtarget” (Sop Buntut) akan berwama putih dan tebal dengan background berwama hitam.

Catatan:

Apabila diperhatikan secara seksama, maka terdapat perbedaan cara menggunakan Selectors pada masing-masing elemen, yaitu:
1. Nama tag, cara menggunakannya dengan langsung menyebut nama tag/ elemennya → $(“div”).
2. id, cara menggunakannya dengan menyertakan tanda pagar (#) sebelum nama elemennya → $(“#nama_elemen_id”).
3. class, cara menggunakannya dengan menyertakan tanda titik (.) sebelum nama elemennya →$(“.nama_elemen_class”).
Kalau kita lihat dokumentasi jQuery di websitenya, maka akan kita temukan banyak sekali jenis Selectors, diantaranya first, last, even, odd, eq, contains, empty, has, parent, child, next, siblings, not, checked, selected, input, enabled, disabled, dan masih banyak lagi.

Demikian penjelasan yang bisa disampaikan tentang teknik dasar memahami jquery, semoga artikel ini bermanfaat bagi pembaca.. Untuk lebih memahami penjelasan tentang pengertian jQuery selanjutnya baca artikel lainnya tentang Belajar jQuery: