MAKALAH JQUERY

DISUSUN OLEH :

RISTIANAWATI

2114R0800

Makalah jQuery

BAB I

PENDAHULUAN

A. Latar Belakang

Saat ini perkembangan ilmu komunikasi dan teknologi informasi sangatlah pesat,

ditandai dengan berkembangnya teknologi internet yang memudahkan manusia dalam

meringankan pekerjaan dan mempermudah dalam berkomunikasi dan saling tukar

menukar informasi.

Internet telah menyediakan berbagai faslitas seperti, e-mail, www( world wide

web), dan blog. Perkembangan blog pun semakin cepat terbukti dengan semakin

banyaknya orang yang menggunakan blog sebagai media informasi dunia maya.

Sekarang telah terdapat jutaan blog dengan pertumbuhan yang sangat signifikan.

Dalam pembuatan web atau blog, agaknya para pecinta-pecinta blog ini

memerlukan pengetahuan yang cukup, dan mendalam tentang bahasa pemrograman

khususnya JQuery, oleh sebab itu besar harapan penulis agar makalah ini dapat

digunakan para pemula dalam membangun sebuah web yang menarik.

B. Rumusan Masalah

1. Bagaimana sejarah perkembangan berdirinya Jquery?

2. Apa kegunaan Jquery?

3. Apa saja sintaks Jquery?

4. Apa itu JQuery Selectors?

5. Apa itu Jquery Events?

6. Apa saja efek-efek yang disuguhkan Jquery?

7. Bagaimana kinerja Jquery dalam memanipulasi HTML?

8. Bagaimana implementasi Jquery?

9. Apa saja kelebihan dan kekurangan JQuery?

10. Beberapa gambar Jquery Plugin Slider..

C. Tujuan

Tujuan pembuatan makalah ini yaitu untuk memperkenalkan bahasa

pemrograman JQuery bagi para pembuat blog atau website, agar lebih paham

bagaimana tata cara menggunakan JQuery sebagai bahan pembuatan blog atau

website, sehingga blog yang dibuat menjadi lebih menarik dan dinamis.

D. Manfaat

Penulis berharap makalah ini dapat bermanfaat bagi para pemula-pemula

developer blog/website, yang tadinya kurang begitu paham mengenai JQuery menjadi

lebih memahami bahasa pemrograman JQuery, sehingga blog/webite yang sedang

dikembangkan menjadi lebih menarik dan dinamis berkat bantuan JQuery.

BAB II

PEMBAHASAN

A. Sejarah

JQuery adalah sebuah pustaka JavaScript kecil bersumber terbuka yang

menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari

2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan

GPL. Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform

mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam

ASP.NET AJAX dan ASP.NET MVC Framework.

Sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

JQuery dikembangkan pertama kali oleh John Resig pada tahun 2005 yang terinspirasi

dari kode Behavior. Saat itu, John merasa hasil dari kode Behavior tidak elegan, bahkan

jelek. Maka dikembangkan JQuery, dimana penulisan kode jadi lebih simple dengan

hasil yang menyenangkan. JQuery sendiri pertama kali rilis tanggal 14 Januari 2006.

JQuery adalah library Javascript yang gratis dan open source. Oleh karena nya

JQuery dapat digunakan dengan bebas untuk keperluan pengembangan website.

Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama

untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (user

interface) semakin memudahkan pengguna untuk mengembangkan website yang cantik

dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya

kemampuan jQuery.

B. Kegunaan JQuery

Banyak sekali hal-hal yang dapat dilakukan oleh JQuery, diantaranya yaitu:

1. Mengubah tampilan bagian halaman tertentu.

CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam

mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan

yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua

browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa

CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut.

Dengan JQuery, “kesenjangan” yang terjadi antara browser dalam urusan CSS akan

tertutup dengan baik.

2. Mengakses bagian halaman tertentu dengan mudah.

Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu

dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan

harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain,

pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML.

JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian

tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.

3. Mengubah isi dari halaman.

Jaman dulu cukup sulit jika kita akan mengubah sebagian isi dari halaman.

Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar,

mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery,

hal tersebut dapat dilakukan dengan hanya beberapa baris perintah.

4. Merespon interaksi user dalam halaman

Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan

yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi

dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat

bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling.

Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani

event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada

object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan

tambahan penanganan event-handling yang semakin mudah.

5. Menambahkan animasi ke halaman.

Animasi seringkali disertakan dalam suatu halaman web untuk menambah

kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs.

Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar

bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan

kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun

masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu

animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari

halaman ditambahkan atau dihilangkan.

6. Mengambil informasi dari server tanpa merefresh seluruh halaman.

Mengambil informasi dari server tanpa refresh halaman merupakan salah satu

konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada

penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini

banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah

satunya.

7. Menyederhanakan penulisan javascript biasa.

Semboyan JQuery adalah “Write less, do more” atau dengan kata lain

kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih.

Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk

menggunakan JQuery.

C. Sintaks JQuery

Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan

melakukan aksi terhadap elemen yang dipilih.

Sintaks :

$(selector).action()

Tanda dollar, untuk mendefinisikan jQuery

(selector), untuk menunjukkan elemen yang dipilih atau dituju.

action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.

Contoh :

$(this).hide() – menyembunyikan elemen saat ini

$("p").hide() – menyembunyikan semua paragraf atau konten dari tag <p>

$(".test").hide() – menyembunyikan elemen yang mempunya class="test"

$("#test").show() – menampilkan elemen yang mempunyai id="test"

Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery

membaca atau memanipulasi document object model (DOM), kita perlu memastikan

bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal

ini, kita menambahkan kode ready event untuk dokumen.

$(document).ready(function(){ //kode anda di sini });

Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-

load semuanya. Atau dengan kode javascript biasanya seperti ini :

window.onload = function(){ //kode anda di sini }

Sekarang mari kita lihat pada contoh Kode 12 .

$(".tombol1").click(function(){ $("p").hide(1000); });

Kode $(".tombol1") adalah jQuery selektor. Di mana kita memilih elemen yang

mempunyai class=”tombol1” untuk kita lakukan sesuatu. $ sendiri adalah alias untuk

jQuery class. Oleh karena $() untuk membuat objek jQuery. Kemudian kita tambahkan

fungsi click() . Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih

tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian

melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila

elemen dengan class=”tombol1” diklik maka lakukan fungsi $("p").hide(1000);

Fungsi hide() dan show() adalah fungsi built in dari jQuery, nanti akan kita lihat

lebih lanjut fungsi-fungsi built in dari jQuery.

D. JQuery Selectors

Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai

kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya kita telah melihat

contoh cara memilih elemen HTML menggunakan jQuery.

JQuery element selectors dan attribute selectors memungkinkan Anda untuk

memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau

konten. Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai

kelompok atau sebagai elemen tunggal.

1. JQuery Element Selectors, jQuery mirip CSS dalam hal memilih elemen HTML.

$("p") memilih semua elemen <p>

$("p.intro") memilih semua elemen <p> yang mempunyai class="intro".

$("p#demo") memilih elemen <p> yang mempunyai id="demo".

2. JQuery Attribute Selectors, JQuery mirip XPath dalam hal memilih elemen berdasarkan

atribut yang ada.

$("[href]") memilih semua elemen dengan atribut href.

$("[href='#']") memilih semua elemen dengan atribut href bernilai="#".

$("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama

dengan "#".

$("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".

Berikut table beberapa daftar JQuery Selector:

Selector Contoh Yang Dipilih

* $("*") Semua elemen

#id $("#lastname") Elemen yang mempunyai

id=lastname

.class $(".intro") Semua elemen yang

mempunyai class="intro"

Element $("p") Semua elemen <p>

.class.class $(".intro.demo") Semua elemen yang

mempunyai class=intro dan

class=demo

:first $("p:first") Elemen <p> yang pertama

:last $("p:last") Elemen <p> yang terakhir

:even $("tr:even") Semua elemen <tr> yang

genap

E. JQuery Events

Salah satu kemampuan utama jquery adalah menangani event. Dalam

pemograman jquery, biasanya kode-kode pemograman diletakkan di dalam

penanganan event yang terjadi pada suatu atau kelompok elemen yang dipilih.

Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan

apabila ada sesuatu yang terjadi (event) pada suatu elemen. Misalnya, kalau

ada tombol di klik, maka action atau kode apa yang dijalankan, apabila ada

combox dipilih, kode apa yang dijalankan, pada contoh jquery sebelumnya : $(".tombol1").click(function(){ $("p").hide(1000);

});

Kode di atas berarti apabila terjadi event mengklik elemen yang

mempunyai class=’tombol1’, maka lakukan fungsi hide() terhadap semua

element <p>.

F. Efek-efek JQuery

Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap

pakai. Biasanya untuk membuat efek memudar di javascript, kita harus

membuat kode yang lumayan panjang. Tapi dengan menggunakan jquery

cukup menggunakan fungsi $(selector).

Berikut adalah efek-efek siap pakai yang disediakan oleh jquery.

1. jQuery show Effect

Berguna untuk menampilkan elemen yang tersembunyi. Untuk

mengatur elemen yang tersembunyi melalui CSS adalah display:none (bukan

visibility:hidden).

Sintaks :

$(selector).show(speed,callback)

Parameter Deskripsi speed Opsional. Menentukan kecepatan elemen muncul

dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa:

milliseconds (contoh : 1500)

"slow"

"normal"

"fast"

Contoh :

Kode 13. Contoh show() <html>

<head>

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">

$(document).ready(function(){

$(".tombol1").click(function(){ $("p").show(1000,tampilkanAlert); });

});

function tampilkanAlert(){

alert("Paragraf sekarang muncul"); }

</script> </head>

<body>

<p style=”display:none”>Ini adalah paragraph tersembunyi.</p>

<button class="tombol1">Show</button>

</body> </html>

2. jQuery hide Effect

Berfungsi untuk menyembunyikan elemen yang dipilih. Sintaks :

$(selector).hide(speed,callback)

Untuk parameter speed dan callback adalah sama dengan show() effect.

Contoh :

$(".tombol1").click(function(){

$("p").hide();});

3. jQuery toggle Effect

Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi

menampilkan yang tersembunyi, menyembunyikan yang tampak.

Sintaks :

$(selector).toggle(speed,callback,switch)

Parameter Deskripsi speed Opsional. Menentukan kecepatan elemen muncul

dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa:

milliseconds (contoh : 1500)

"slow"

"normal"

"fast

Callback Opsional. Suatu fungsi yang akan dijalankann apabila efek show

selesai dijalankan.

Switch Opsional. Bernilai Boolean

True, hanya untuk menampilkan semua elemen

False, hanya menyembunyikan semua elemen

Jika parameter ini diset, parameter speed dan callback parameters tidak bisa

digunakan.

Contoh Kode 14. Contoh toggle()

<html> <head> <script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".tombol1").click(function(){

$("p").toggle(true); });

});

</script>

</head>

<body> <p>Ini adalah paragraf</p>

<p style="display:none">Ini adalah paragraf lainnya yang belum muncul</p>

<p>Jika bernilai true hanya berfungsi menampilkan, kalau false hanya

menyembunyikan</p>

<button class="tombol1">Tampilkan semua elemen</button> </body>

</html>

4. jQuery slideDown Effect

Menampilkan elemen yang tersembunyi, secara efek sliding. Sintaks :

$(selector).slideDown(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().

Contoh:

$(".tombol1").click(function(){

$("p").slideDown();});

5. jQuery slideUp Effect

Menyembunyikan elemen secara efek sliding. Sintaks :

$(selector).slideUp(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show.

Contoh:

$(".tombol1").click(function(){

$("p").slideUp();

});

6. jQuery slideToggle Effect

Gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen jika

dalam keadaan visible, menampilkan elemen jika dalam kedaan hidden.

Sintaks :

$(selector).slideToggle(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show.

Contoh Kode 15. Contoh slideToggle

<html> <head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript"> $(document).ready(function(){

$("#contact").click(function(){

$("#contact-box").slideToggle("slow") ; });

});

</script>

</head>

<body> <p><span id="contact" style="cursor:hand;background- color:#ababab;padding:3;font-family:Verdana">Contact</span></p>

<div id="contact-box"

style="background:#98bf21;height:200px;width:300px;position:relative;disp

lay:none;padding:10">

<form> Nama : <input type=text><p>

Email : <input type=text><p>

Komentar :<textarea rows=5></textarea><p>

<input type=submit value=kirim>

</div> <p>

jQuery adalah javascript library, jQuery mempunyai semboyan "write less, do more".

jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript

library yang cepat dan ringan untuk menangani dokumen HTML, menangani

event, membuat animasi

dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis

javascript.

<p>Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.

</body>

</html>

7. jQuery fadeIn Effect

Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar.

Sintaks :

$(selector).fadeIn(speed,callback )

Untuk parameter speed dan callback adalah sama dengan fungsi show().

Contoh:

$(".tombol1").click(function(){

$("p"). fadeIn();

});

8. jQuery fadeOut Effect

Menyembunyikan elemen yang dipilih, secara efek memudar. Sintaks:

$(selector).fadeOut(speed,callback )

Untuk parameter speed dan callback adalah sama dengan fungsi show().

Contoh:

Kode 16. Contoh fadeOut()

<html> <head>

<style>

#box {

background-color:#96BC43; border:solid 3px #333333; height:160px;

margin-top:30px; }

</style>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript"> $(function(){ $('.fadeOut_box').click(function(){ $('#box').fadeOut("slow"); });

$('.fadeIn_box').click(function(){ $('#box').fadeIn("slow"); });});

</script>

<body> <a href="#" class="fadeOut_box">fadeOut()</a>

<a href="#" class="fadeIn_box">fadeIn()</a> <div id="box"></div>

</body> </html>

9. jQuery fadeTo Effect

Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang

ditentukan. Sintaks :

$(selector).fadeTo(speed,opacity,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().

Untuk parameter opacity bisa bernilai 0 sampai 1.

Contoh :

$(".tombol1").click(function(){ $("p"). fadeTo(1000,0.6);

});

10.jQuery animate Effect

Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya.

Keadaan yang diubah ini berdasarkan CSS.

Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk

menciptakan efek animasi. Nilai properti CSS yang bisa diubah adalah nilai

bertipe angka, baik satuannya pixel atau persen%. Untuk tipe string tidak bisa

dianimasikan. Sintaks :

$(selector).animate(styles,speed,easing,callback)

Parameter Deskripsi styles Wajib. Menentukan properti CSS dan nilainya

yang akan di-animasi.

Properti CSS yang bisa di-animasi :

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin

marginBottom

marginLeft

marginRight

marginTop

outlineWidth

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

widt

maxHeight

maxWidth

minHeight

maxWidth

fontSize

bottom

left

right

top

letterSpacing

wordSpacing

lineHeight

textIndent

Speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke

visible. Defaultnya adalah 0. Nilainya bisa berupa:

milliseconds (contoh : 1500)

"slow"

"normal"

"fast"

Easing Opsional. Menentukan fungsi easing yang diset pada speed animasi.

Callback Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai

dijalankan.

Contoh :

Kode 17. Contoh animate() <html> <head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function()

{ $(".tombol1").click(function(){

$("#box").animate({height:"300px"}) ;

});

$(".tombol2").click(function(){

$("#box").animate({height:"100px"}) ; });

});

</script>

</head>

<body>

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">

</div>

<button class="tombol1">Animasi</button>

<button class="tombol2">Reset</button>

</body>

</html>

11.jQuery stop Effect

Menghentikan animasi yang sedang berjalan. Sintaks :

$(selector).stop(stopAll,goToEnd)

Parameter Deskripsi:

StopAll Opsional. Bernilai boolean, menentukan apakah menghentikan

semua animasi, termasuk yang ngantri untuk dijalankan pada elemen yang dipilih

atau tidak.

Go To End Opsional. Bernilai Boolean, menentukan apakah animasi yang

sedang jalan dikompletkan atau tidak.

Parameter ini hanya bisa digunakan jika parameter stopAll di-set.

Contoh :

Kode 18. Contoh stop()

<html> <head> <script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#start").click(function(){

$("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow");

$("#box").animate({height:100},"slow");

$("#box").animate({width:100},"slow");

});

$("#stop").click(function(){ $("#box").stop(false,true);

});

});

</script>

</head> <body>

<p><button id="start">Start Animasi</button><button id="stop">Stop

Animasi</button></p> <div id="box" style="background:#ababab;height:100px;width:100px;position:relative">

</div>

</body>

</html>

G. Manipulasi HTML dengan jQuery

jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi,

mengambil atau menambah konten, dan sebagainya terhadap HTML.

Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen HTML

yang dipilih kita gunakan. $(selector).html(content). Apabila parameter content tidak kita tentukan

maka fungsi html() berguna untuk mendapatkan konten dari HTML.

Contoh :

Kode 19. Contoh html()

<html> <head> <script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(function(){

$("#lihat").click(function(){

var isinya = $("#paragraf").html();

alert(isinya); });

$("#isikan").click(function(){

var isilagi = $("#isi").val();

alert(isilagi);

$("#paragraf").html(isilagi); });

});

</script>

<body>

<button id=lihat>Lihat</button> <p id=paragraf>

jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi,

mengambil atau menambah konten, dan sebagainya terhadap HTML

</p> Teks :

<input type=text id=isi>

<p>

<button id=isikan>Isikan</button>

</body>

</html>

val()

Pada contoh di atas kita lihat ada kode

var isilagi = $("#isi").val();

Kode ini berarti kita mengambil nilai dari <input type=text id=isi> dan

memasukkannya ke variabel isi lagi. Sama dengan fungsi html(), apabila kita

masukkan nilai dari val(), maka artinya kita me-set nilai dari elemen yang

dipilih. Biasanya val() digunakan pada elemen-elemen HTML <input>, contoh :

$(“#isi”).val(“hallo apa kabar”);

Kode di atas berarti kita me-set nilai <input type=text id=isi> dengan “hallo

apa kabar”.

attr()

Dengan menggunakan fungsi attr(), ini membuat mudah bagi kita untuk

mendapatkan nilai dari suatu properti elemen HTML yang kita pilih.

Sintaks :

$(selector).attr(properties,nilai );

Parameter properties adalah nama properti yang ingin kita ambil atau

set. Contoh properti misalnya : id, class, title, src, href dan sebagainya.

Parameter nilai, apabila kita isi artinya kita me-set nilai properti yang

kita tetukan, apabila kosong artinya kita mengambil nilai properti yang kita

tentukan.

Contoh :

Kode 20. Contoh attr()

<html> <head> <script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(function(){

$('.link').click(function(){

var id=$(this).attr("id"); var class=$(this).attr("class");

var href=$(this).attr("href");

alert(id);

alert(class);

alert(href);

});

});

</script>

<a href="http://www.desrizal.com" class="link" id="13">link</a>

</body> </html>

addClass()

Berguna untuk menambahkan atau mengubah class untuk elemen yang dipilih.

Sintaks :

$(selector).addClass(namakelas)

Contoh :

Kode 21. Contoh addClass() <html>

<head>

<style> .besar

{

font-size:106px;

}

.kecil {

font-size:12px;

}

</style>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(function(){ $('.ubahclass').click(function(){ $(".besar").addClass("kecil");

});

});

</script>

<a href="#" class="ubahclass" >Klik </a>

<div class="besar">www.desrizal.com</div>

</body>

</html>

H. Implementasi Jquery

Kemudahan atau kenapa orang banyak menggunakan framework javascript ini

adalah karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin

adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery

mempercepat atau memudahkan dalam pembangunan sebuah website.

Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa

web developer dalam membuat atau membangun sebuah website, diantaranya:

1. Drop-Down-Menu

Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada

sub menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga

mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu

menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini

digunakan ketika lama waktu mouse over atau mouse out.

2. Tool-Tips

Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk

menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol

atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya

informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika

mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah

desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll.

3. Autocomplete-Search

Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita

memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara

otomatis hasil pencarian akan muncul seusai dengan yang kita masukan secara real

time. Plugin ini mirip seperti pencarian pada website facebook, sehingga sangat menarik

untuk dicoba.

4. Validasi-Form

Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti

pengecekan e-mail, pengecekan password, username dan input lainnya secara real time

(tidak menekan tombol submit). Jadi ketika user memasukan teks atau huruf, maka

plugin ini akan melakukan validasi terhadap inputan user.

Web Sitenya.

5. jQuery-Cycle-Plugin

Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini

menggantikan fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa

menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide

show, scroll dan banyak lagi efek yang lainnya.

6. Teks-Berjalan

Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan

kelihatan menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke

bawah, mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan

lebih lembut dan lebih banyak variasi.

I. Kelebihan dan Kekurangan Jquery

Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library

lainnya, antara lain:

Kompatibel dengan hampir seluruh browser

jQuery telah digunakan oleh website-website raksasa

Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)

Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com

Didukung oleh banyak komunitas

Disupport oleh plugin yang lengkap

Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb

Open source atau Free

jQuery lebih diminati oleh para developer web saat ini

1. KELEBIHAN :

Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari

library javascript yang telah ada. Termasuk mempercepat coding javascript dalam

sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol.

Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh

penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam

pembelajaran jquery.

Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman

website dan interaksinya.

Website yang dibangun dengan jquery akan lebih interaktif dan menarik.

2. KEKURANGAN :

Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk

browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery,

alias HTML murni.

Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka

miliki untuk menangani request terhadap jquery. Pada level tertentu request yang

sangat banyak (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada

situs lain, seperti Google yang menyediakan request jquery dari servernya.

J. Macam Plugin Jquery Slider

1. JCoverflip

JCoverflip telah dikembangkan untuk memungkinkan kecepatan dan meng-customize

look and feel lebih rinci dan set fitur.

2. Coin Slider

Plugins JQuery Image Slider ini menggunakan effect yang sangat unik.

3. loopedSlider

loopedSlider JQuery Plugin

4. Nivo Slider

Nivo Slider adalah salah satu contoh Plugins JQuery yang sangat mengagumkan.

5. Colorful Sliders dengan jQuery & CSS3

Trasformasi fitur baru yang dihadirkan oleh CSS 3 untuk membuat efek slider dinamis

tiga dimensi. Teknik kyang digunakan disini, adalah membuat slider dan CSS bar yang

dinamis, dapat digunakan secara bersama-sama atau sebagian saja.

6. Automatic Image Slider dengan CSS & jQuery

The html based image slider will have its benefits with SEO and will also degrade

gracefully for those without js.

7. The Lof SiderNews Plugin

Berdasarkan JQuery Framework dan Plugin Easing, The JSiderNews Plugin adalah plugin

slideshow yang menampilkan gambar atau jenis konten dan dukungan navigasi favious

ke item berikutnya | sebelumnya.

BAB III

PENUTUP

A. Kesimpulan

JQuery merupakan salah satu bahasa pemrograman yang disukai oleh para

developer blog/website. Ini dikarenakan dari semboyan jQuery sendiri yakni “write less do

more” yang artinya menulis sedikit tetapi menghasilkan lebih. Maksudnya, dalam

penulisan jQuery mencoba untuk memberikan kode-kode yang sederhana akan tetapi

menghasilkan tampilan yang lebih. Selain itu jQuery juga mudah dipahami bagi para

pemula, oleh karena itu tidak salah apabila saat ini jQuery menjadi salah satu bahasa

pemrograman yang sangat disukai para developer blog/website.