Home > Pemula > Belajar JQuery > Belajar JQuery Yuk? (Pemula Bag. 1)

.

1 komentar BYAdmin Ilmuwebsite

belajar-jqueryWebDesigner 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 :

 

Kemudian kita sisipkan script ini dibagian head :

 

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

 

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.

 

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

 

Lanjutkan ke bagian 2 Belajar Jquery Yuk: Mengenal Selector Pada Jquery (Pemula Bag. 2)

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



One Response

  1. firman

    keren.. :cendol


eXTReMe Tracker