Belajar JQuery tahap 1

WebDesigner mana yang nggak kenal dengan library javascript yang satu ini? Bahkan webdesigner dari gunung sekalipun penulis yakin sudah mengetahui library yang satu ini. Mohon maaf bagi anda webdesigner dari gunung, bukan maksud penulis mengolok-olok, tapi jangan salahkan ibu mengandung, jangan salahkan bapak mengundang. :D. Meskipun sebetulnya selain Jquery ada juga library yang sama tangguhnya, seperti mootools, scriptaculous, dan banyak lagi yang aneh-aneh, sering juga perhelatan mengenai mana yang paling bagus tetap ada hingga sekarang, penulis sendiri di tengah saja, karena masing-masing library memiliki kelebihan masing-masing, gimana seleranya aja. Yang jelas untuk menggunakan jquery dasar yang harus anda kuasai adalah, HTML, CSS, dan sedikit saja bekal pengetahuan javascript, seperlunya dan sesuai selera.

Sebetulnya apa yang menarik dari JQuery? Selain penggunaanya diketik menggunakan keyboard, library yang lengkap, manual dan tutorial yang berjibun banyaknya di internet, pluginnya pun cukup banyak sekali, bagi anda yang dikejar deadline mungkin bisa langsung membuka http://www.jqueryplugins.com untuk mendapatkan efek jquery yang di inginkan. Sementara untuk artikel yang sekarang ini penulis hanya akan mengkhususkan belajar jquery dari dasar bukan untuk menggunakan plugin jquery.

Untuk artikel kali ini penulis akan memulai pembahasan pondasi dari jquery, yakni Memulai Jquery dengan Selector.

Mengapa jquery bisa membuat efek yang begitu memukau, memainkan HTML sehingga menjadikan suatu website jadi sangat interaktif? Salah satu alasannya adalah penggunaan selector yang mudah. Apa sebetulnya selector ? Konsep selector miliki jquery bisa dibilang mengadopsi dari konsep selectornya CSS. Ada selector id, selector class, dan selector tag. Bingungkan ??? Sama dong kita. Lebih baik kita langsung terjun bebas saja untuk mempraktikan jquery. Bagaimana???

Hal pertama yang dilakukan adalah kita download terlebih dahulu JQuery, anda bisa mengunjungi http://docs.jquery.com/Downloading_jQuery untuk langsung mendownloadnya, atau bisa juga mengklik link ini http://code.jquery.com/jquery-1.4.2.js sama saja. Saya tidak sedang berusaha untuk menipu anda. :D. Oke, letakkan file tersebut misalnya di c:belajarjqueryjquery-1.4.2.js. Selesai? Lanjutkan! Lebih cepat lebih baik.

Oke, selanjutnya siapkan satu buah file html, dan letakkan satu direktori dengan jquery-1.4.2.js yang tadi kita download. Berikan namanya misalkan, latihan.selector1.html

Kemudian isi di bagian body seperti ini :

<p>Orang-orang liberal mengatakan pergerakan untuk mempersatukan kaum muslimin seluruh dunia di bawah naungan Al-Khilafah itu merupakan suatu mimpi belaka. Terlalu utopis. “Mana bisa!!”, kata mang Abdul Mosqid.
Aneh dan heran … herannya kenapa mimpi indah seperti ini nggak dibiarkan tuk tetep ada. Malah dilarang-larang. Kan aneh bin mahfuz itu namanya. Dikit-dikit dilarang … dikit-dikit dilarang. Di larang kok dikit-dikit. Haha… Yang bikin penasaran lagi kenapa begitu giatnya perjuangan mereka (orang-orang perguruan pencak silat liberal) dalam menutup gaung upaya penegakkan syariat islam lewat berbagai media. Acara ngoprek Al-Quran bareng-bareng pun jadi kegiatan keseharian. Ngopreknya nggak tanggung-tanggung, Al-Quran dicocokkin dengan akal mereka sendiri, yang nggak sesuai dikritisi, dicaci maki. Hahaha … keren-keren… Terus, kalo penegakkan syariat islam itu dibilang cuma mimpi belaka doang, Kenapa JIL harus nerbitin media kaya islamlib.com, mang Gusdur dengan wahid institutenya, dan berbagai media lainnya yang berusaha secara terang-terangan menjauhkan orang-orang islam dari gaung penegakkan syariat islam? dan bahkan nggak jarang mereka justru melencengkan arti dan makna syariat islam yang sebenarya. Heran deh gw. Heran nggak sih loh? Ada apa dibalik semua ini? Ada apa gerangan? Ada apa mang ulil meng-erang-erang? Haha…
</p>
<div id=”kotakkotaknora”></div>
<a href=”#”>Klik klik…</a>

Kemudian kita sisipkan script ini dibagian head :

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
<style type=”text/css”>
.red{
height:200px;
width:200px;
background-color: red;
}
</style>

Oke, bagaimana ? masih bingung ?? Mari kita bahas javascriptnya. Pertama kita memanggil library jquery,

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>

Jangan sampai pertanyaan mengapa itu ada. Apa? Ya, karena bagaimana mungkin kita bisa menggunakan fasilitas jquery tanpa kita menyisipkan jquery ke dalam tag head. Oke kita lanjut.

<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>

Ketika halaman html telah di load sepenuhnya
$(“document”).ready(function(){
Dan ketika selector tag ‘a’ di halaman website tersebut di klik
$(“a”).click(function(){
Rubah kalimatnya yang berada dalam selector tag p dengan selector class samadengan kalimat menjadi warna merah
$(“p.kalimat”).css(“color”, “red”);
Kemudian berikan style untuk selector id kotakkotaknora.
$(“#kotakkotaknora”).addClass(“red”);
Penutupnya.
});
});
Sehingga yang harus di catat adalah, untuk memanggil elemen yang memiliki id, misalnya elemen div dia memiliki id, maka jquerynya memanggil dengan selector #id.
Sehingga <div id=”kotakotaknora”></div> di panggil oleh jquery dengan $(“#kotakkotaknora”).
Begitu pun halnya class dalam css, misalnya <p class=”kalimat”></p>
Lalu yang terakhir adalah tag selector, misalnya <a href=”#”> karena dia tidak memiliki id maupun class maka jquery memanggilnya dengan $(“a”).
Mudah ya? Oke kita perdalam lagi untuk tutorial selanjutnya.
Script lengkapnya adalah seperti ini, atau bisa juga download di sini

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”" content=”">
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5″>
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function(){
$(“a”).click(function(){
$(“p.kalimat”).css(“color”, “red”);
$(“#kotakkotaknora”).addClass(“red”);
});
});
</script>
<style type=”text/css”>
.red{
height:200px;
width:200px;
background-color: red;
}
</style>
</head>
<body>
<p>Orang-orang liberal mengatakan pergerakan untuk mempersatukan kaum muslimin seluruh dunia di bawah naungan Negara Daulah Al-Khilafah Islamiyah itu merupakan suatu mimpi belaka. Terlalu utopis. “Mana bisa!!”, kata mang Abdul Mosqid.
Aneh dan heran … herannya kenapa mimpi indah seperti ini nggak dibiarkan tuk tetep ada. Malah dilarang-larang. Kan aneh bin mahfuz itu namanya. Dikit-dikit dilarang … dikit-dikit dilarang. Di larang kok dikit-dikit. Haha… Yang bikin penasaran lagi kenapa begitu giatnya perjuangan mereka (orang-orang perguruan pencak silat liberal) dalam menutup gaung upaya penegakkan syariat islam lewat berbagai media. Acara ngoprek Al-Quran bareng-bareng pun jadi kegiatan keseharian. Ngopreknya nggak tanggung-tanggung, Al-Quran dicocokkin dengan akal mereka sendiri, yang nggak sesuai dikritisi, dicaci maki. Hahaha … keren-keren… Terus, kalo penegakkan syariat islam itu dibilang cuma mimpi belaka doang, Kenapa JIL harus nerbitin media kaya islamlib.com, mang Gusdur dengan wahid institutenya, dan berbagai media lainnya yang berusaha secara terang-terangan menjauhkan orang-orang islam dari gaung penegakkan syariat islam? dan bahkan nggak jarang mereka justru melencengkan arti dan makna syariat islam yang sebenarya. Heran deh gw. Heran nggak sih loh? Ada apa dibalik semua ini? Ada apa gerangan? Ada apa mang ulil meng-erang-erang? Haha…
</p>
<div id=”kotakkotaknora”></div>
<a href=”#”>Klik klik…</a>
</body>
</html>