Ebook Jquery

[EBOOK PANDUAN BELAJAR JQUERY DASAR] www.malasngoding.
com
i
[EBOOK PANDUAN BELAJAR JQUERY DASAR] www.malasngoding.com
Ebook PANDUAN BELAJAR JQUERY DASAR di buat oleh admin www.malasngoding.com

dan di tujukan untuk siapa saja yang sedang belajar tentang JQuery Dasar. Silahkan menyebar
luaskan ebook ini tetapi mohon untuk tetap mencantumkan url aslinya yaitu
http://www.malasngoding.com
Oleh : MalasNgoding.com
ii
Daftar Isi
Belajar JQuery Part 1 : Pengertian Dan Cara Menggunakan JQuery ........................................................ 1
Pengertian Dan Cara Menggunakan JQuery ......................................................................................... 1
Pengertian JQuery................................................................................................................................. 1
Kelebihan JQuery .................................................................................................................................. 1
Cara Menggunakan JQuery ................................................................................................................... 2
Cara Menghubungkan file HTML atau PHP dengan JQuery secara offline ........................................... 2
Cara Menghubungkan file HTML atau PHP dengan JQuery secara online ........................................... 4
Belajar JQuery Part 2 : Belajar Pengenalan JQuery Dasar ........................................................................ 4
Belajar Pengenalan JQuery Dasar ......................................................................................................... 4
Pengertian Selector JQuery................................................................................................................... 5
Pengertian Event JQuery....................................................................................................................... 5
Belajar JQuery Part 3 : Mengenal Event Pada JQuery .............................................................................. 8
Belajar JQuery Mengenal Event Pada JQuery....................................................................................... 8
Belajar JQuery Mengenal Event Pada JQuery ....................................................................................... 8
Event click() ........................................................................................................................................... 8
Event dblclick().................................................................................................................................... 10
Event mouseleave() dan event mouseenter() ....................................................................................11
Belajar JQuery Part 4 : Mengenal Effect Pada JQuery ............................................................................ 13
Belajar JQuery Mengenal Effect Pada JQuery.....................................................................................13
Cara menggunakan dan membuat effect pada jquery ....................................................................... 14
Cara menggunakan effect toggle() pada jquery .................................................................................17
Cara Menggunakan Effect Slide Pada JQuery .....................................................................................18
Cara Menggunakan Effect Fade JQuery ..............................................................................................20
Belajar JQuery Part 5 : Callback Function Pada JQuery .......................................................................... 21
Belajar JQuery Callback Function Pada JQuery...................................................................................21
Belajar JQuery Part 6 : Chaining Function Pada JQuery.......................................................................... 24
Belajar JQuery Chaining Function Pada JQuery ..................................................................................24
Belajar JQuery Part 7 : Mendapatkan nilai dan value dengan JQuery....................................................27
iii
Mendapatkan nilai dan value dengan JQuery ....................................................................................27

Cara mendapatkan konten text dengan text()....................................................................................28
Cara mendapatkan element HTML dengan html() ............................................................................. 30
Cara mendapatkan nilai value pada element HTML dengan val() ......................................................31
Cara mendapatkan nilai atribut pada element dengan attr().............................................................33
Belajar JQuery Part 8 : Menetapkan Nilai dan Value dengan JQuery.....................................................35
Menetapkan Nilai dan Value dengan JQuery......................................................................................35
Cara menetapkan konten dengan fungsi .text() di jquery .................................................................. 35
Cara menambahkan element HTML dengan fungsi .HTML() di jquery...............................................37
Cara menambahkan value HTML dengan fungsi .HTML() di jquery ...................................................39
Belajar JQuery Part 9 : Menambah Element Dengan JQuery ................................................................. 41
Belajar JQuery Menambah Element Dengan JQuery.......................................................................... 41
Belajar JQuery Part 10 : Menghapus Element Dengan JQuery...............................................................45
Menghapus Element Dengan JQuery.................................................................................................. 46
Belajar JQuery Part 11 : Manipulasi Class Dengan JQuery ..................................................................... 48
Menambah dan Menghapus class dengan JQuery ............................................................................. 48
Belajar JQuery Part 12 : Menambahkan CSS Dengan JQuery ................................................................. 52
Belajar JQuery Menambahkan CSS Dengan JQuery............................................................................ 52
Cara menambahkan banyak css pada element HTML ........................................................................ 54
iv
Belajar JQuery Part 1 : Pengertian Dan Cara Menggunakan

JQuery
Pengertian Dan Cara Menggunakan JQuery
Setelah mempelajari tutorial belajar javascript dasar pada tutorial kategori javascript di
www.malasngoding.com, kali ini akan di bahas sebuah kelanjutan dari javascript. anda yang
sedang membaca tutorial ini pasti sudah sering mendengar tentang JQuery. bagi anda yang
belum mengetahui pengertian jquery dan bagaimana cara menggunakan jquery maka pada
tutorial kali ini di tutorial belajar jquery part 1 : pengertian dan cara menggunakan jquery ini
akan di jelaskan tentang apa itu pengertian jquery dan bagaimana cara menggunakan jquery.
Pengertian JQuery
JQuery adalah sebuah library framework javascript. jadi singkat ceritanya JQuery merupakan
pengembangan dari javascript yang sengaja di buat untuk memudahkan kita untuk mendevelop
sebuah website dan ingin membuat efek-efek dan keperluan penggunaan javascript lainnya di
dalam pengembangan sebuah website. sampai saat ini jQuery sudah sangat di kenal di dunia web
programming. sehingga banyak plugin-plugin web lainnya yang di bangun menggunakan JQuery
sebagai base nya. contohnya seperti plugin calender, grafik, export html to image, design
komponen web dan sebagainya.
Hampir semua developer dunia sekarang sudah aktif menggunakan jquery sebagai pengganti
javascript. artinya developer tidak perlu lagi mengetikkan syntax javascript yang terbilang cukup
panjang-panjang untuk sebuah event. oleh karena itu banyak yang sudah aktif menggunakan
jquery karena jquery juga merupakan pengembangan dari javascript. javascript sudah di bungkus
menjadi fungsi-fungsi yang tinggal di gunakan saja pada jquery. untuk menggunakan jquery
yang harus di lakukan adalah menghubungkan file jquery dengan file html atau php yang ingin
kita hubungkan. caranya sama dengan cara menghubungkan file js seperti biasa.
Kelebihan JQuery
Berikut ini akan di jelaskan tentang kelebihan dari jquery yang saya rasakan sendiri. dan
mungkin akan bertambah lagi bagi anda sendiri setelah mempelajari dan menggunakan
framework jquery. adapun beberapa kelebihan dari jQuery adalah
 Lebih mudah di mengerti.

 Lebih mudah di gunakan.
 Ringan.
1
 Penulisan syntax yang lebih pendek tetapi sudah memiliki kebergunaan yang besar.
 Free.
 Bisa di kembangkan untuk membuat plugin-plugin web lain.
Cara Menggunakan JQuery
Ada beberapa cara untuk menggunakan JQuery, adapun cara yang bisa di gunakan adalah
 Menggunakan JQuery secara offline

menggunakan jquery secara offline maksudnya adalah dengan cara mendownload file
jquery dan kemudian menghubungkan file html atau php dengan file jquery.
 Menggunakan JQuery secara online
menggunakan jquery secara online maksudnya adalah menggunakan jquery dengan cara
menghubungkan file HTML atau PHP dengan link online langsung dari jquery.
Cara Menghubungkan file HTML atau PHP dengan JQuery secara offline
Untuk anda yang jarang tersambung dengan koneksi internet cara ini sangat efektif karena anda
hanya perlu mendownload file jquerynya dan menyimpan file jquery nya pada project kerja anda,
kemudian hanya tinggal menghubungkannya. Cara untuk menggunakan jquery sangat lah
mudah. sama seperti cara menghubungkan file JS dengan HTML atau PHP. tahap awal yang
harus di lakukan adalah anda harus mendownload file library JQuery nya di website resmi
JQuery. Klik di sini atau langsung di sini untuk download library framework jQuery. kemudian
letakkan file jquery yang sudah di download kedalam folder project anda. untuk contoh tutorial
belajar jquery pengertian dan cara menggunakan jquery ini saya meletakkannya dalam folder
jquery di E:/DATA/malasngoding/tutorial/jquery/. karena untuk contoh ini saya hanya
menggunakan file HTML. bagi anda yang ingin menggunakan JQuery di PHP bisa di sesuaikan
dengan meletakkannya di localhost anda.
2
pengertian dan cara menggunakan jquery
Pada contoh ini saya membuat file index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 1 : Pengertian dan cara menggunakan jquery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
</body>
</html>
bisa di perhatikan pada contoh di atas. untuk menghubungkan file jquery dengan file html atau
php bisa menggunakan syntax berikut
<script type="text/javascript" src="lokasi file jquery anda"></script>
3
Cara Menghubungkan file HTML atau PHP dengan JQuery secara online
Seperti yang sudah di jelaskan pada situs resminya. untuk menghubungkan jquery secara
online anda dapat menghubungkannya dengan cara berikut.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
jika anda menghubungkan file jquery dengan cara ini maka anda harus terkoneksi dengan
internet karena file jquery yang di tuju berada di server jquery. atau bisa juga menghubungkan
jquery dengan HTML atau PHP dengan cara menghubungkannya dengan link yang di sediakan
oleh google bisa menggunakan:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
dan jquery yang di sediakan oleh microsoft:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
Belajar JQuery Part 2 : Belajar Pengenalan JQuery Dasar

Belajar Pengenalan JQuery Dasar
Setelah mempelajari tentang pengertian dan cara menggunakan jquery yang sudah di jelaskan
tentang cara menghubungkan file jquery dengan HTML atau PHP di tutorial sebelumnya
di www.malasngoding.com. maka pada tutorial kali ini akan di jelaskan tentang belajar
pengenalan jquery dasar. untuk penulisan syntax jquery sama seperti javascript. bisa di tuliskan
dalam satu file dengan file html atau php, dan bisa juga menulisakan syntax jquery secara
external atau meletakkan syntax jquery pada satu file .js dan kemudian menghubungkannya
dengan file html atau php anda.
4
Sebelum lebih jauh melangkah tentang tutorial jquery ada baiknya pada tutorial jquery dasar ini
di jelaskan terlebih dahulu tentang apa itu selector ? dan apa itu event pada jquery ? untuk
penjelasan mengenai selector dan event pada jquery silahka perhatikan penjelasan berikut.
Pengertian Selector JQuery
selector dapat di katakan sebagai pemilih. dalam artian kata pemilih di sini ialah pemilihan
terhadap element HTML yang akan di berikan method event atau aksi oleh si JQuery. seperti
yang sudah kita pelajari pada tutorial dasar HTML di www.malasngoding.com tentang
mengenal selector pada html yaitu class dan id. yang mana class di panggil dengan cara
memberikan tanda titik (.) dan id di panggil dengan cara menggunakan tanda pagar (#).
Pengertian Event JQuery
Event merupakan method atau aksi yang di lakukan oleh JQuery. contohnya seperti menambah
element, menyembunyikan element, menampilkan element, mengambil data pada atribut element
dan lainnya seperti yang dapat di lakukan oleh javascript yang telah kita pelajari pada tutorial
javascript dasar di www.malasngoding.com. event di tetapkan pada saat setelah menetapkan
selector yang ingin di berikan method atau aksi oleh jquery.
Perhatikan contoh selector dan event pada jquery berikut ini.
di sini saya akan mencoba membuat sebuah contoh tentang penggunaan dasar pada jquery.
sediakan sebuah file php atau html. di sini saya menggunakan file html dengan nama index.html.
file style.css dan kemudian sediakan library jquery yang sudah di jelaskan cara mendownload
dan menghubungkannya pada tutorial sebelumnya di www.malasngoding.com. klik di sini untuk
melihat tutorial belajar dasar jquery part 1 : pengertian dan cara penggunaan jquery.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 2 : Belajar pengenalan jquery dasar</title>
</head>
<body>
<h1>Tutorial JQuery Dasar www.malasngoding.com</h1>
<button id="tombol">TOMBOL</button>
<div class="box"></div>
5
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.tombol').click(function(){
$('.box').toggle();
});
});
</script>
</html>
style.css
body{
font-family: sans-serif;
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
}
#tombol{
padding:10px;
color: #fff;
background: #34495E;
border: none;
}
dapat di perhatikan pada contoh di atas bahwa saya telah membuat sebuah element yang saya
beri tanda dengan class yang bernama class ‘box’. dan membuat sebuah tombol yang saya beri
tanda dengan id ‘tombol’.
dan yang terpenting perhatikan pada contoh jquery di atas
$('#tombol').click(function(){
$('.box').toggle();
});
});
6
Syntax
$(document).ready()
di gunakan untuk memberitahukan bahwa jquery akan di jalankan pada saat halaman sudah siap
di load penuh 100%. dan penjelasan secara keseluruhannya berarti aksi jquery akan di jalankan
jika halaman sudah benar-benar siap. dan pada
$('.box').toggle();
});
syntax di atas memerintahkan untuk memberikan aksi atau event untuk element yang ber id
tombol (tombol) di klik. pada contoh ini untuk lebih memperjelas tentang selector dan event
jquery berarti selector di sini adalah id tombol yang di panggil dengan “#tombol” dan class box
yang di panggil dengan “.box”. toggle() adalah sebuah efek jquery untuk menampilkan dan
menyembunyikan element yang sudah di tentukan. pada contoh di atas element yang di
tampilkan dan di sembunyikan saat tombol di klik adalah element yang memiliki class box.
event click() hanyalah salah satu dari event di jquery, ada banyak event lainnya yang akan kita
pelajari pada tutorial belajar jquery dasar selanjutnya di www.malasngoding.com. pada tutorial
jquery selanjutnya akan di jelaskan juga tentang event dan efek lainnya dari jquery. silakan klik
7
pada tombol pada contoh demo berikut berikut untuk melihat efek toggle() jquery seperti yang
sudah di pelajari pada tutorial ini tentang belajar pengenalan jquery dasar.
Belajar JQuery Part 3 : Mengenal Event Pada JQuery
Belajar JQuery Mengenal Event Pada JQuery
Setelah membelajari dasar-dasar JQuery pada tutorial sebelumnya di www.malasngoding.com

yaitu tutorial belajar Pengenalan Jquery dasar yang telah membahas tentang pengertian event dan
selector pada jquery. silahkan baca tutorial sebelumnya tentang belajar pengenalan jquery dasar
di www.malasngoding.com sebelum melanjutkan mempelajari pada tutorial belajar jquery
mengenal event pada jquery ini. agar tidak anda lebih mudah memahami penjelasan pada tutorial
kali ini.
untuk mengingatkan kembali bayangan tentang pengertian event jquery akan di jelaskan kembali
secara singkat. event pada jquery merupakan suatu method atau aksi yang di lakukan pada
jquery. seperti contohnya misalnya click() yang berfungsi sebagai event atau method klik yang di
lakukan oleh pengguna, dblclick() untuk double click, mouseenter() untuk method saat pengguna
meletakkan cursor pada element tertentu, mouseleave() untuk method saat cursor mouse
meninggalkan element tertentu dan banyak lagi event jquery lainnya yang akan kita jelaskan
di tutorial belajar jquery mengenal event pada jquery ini.
adapun beberapa event jquery adalah sebagai berikut.
Belajar JQuery Mengenal Event Pada JQuery

Event click()
event click() adalah event atau method yang terjadi saat element di klik. perhatikan contoh
penggunaan event click() berikut ini. tidak di jelaskan lagi bagaimana cara menghubungkan
jquery dengan HTML atau PHP. klik di sini untuk membaca pengertian dan cara menggunakan
jquery.
8
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 3 : Mengenal Event Pada JQuery</title>
</head>
<body>
<h1>Mengenal Event pada JQuery | www.malasngoding.com</h1>
</body>
$('.box').toggle();
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
9
dapat di lihat pada contoh di atas terdapat sebuah tombol dan sebuah element yang kita bentuk
berupa kotak dengan css. dan kita memberkan event click() pada element tombol. yang berarti
saat tombol di klik maka akanmenghasilkan effect toggle() pada element box.
Event dblclick()
Sama seperti cara penggunaan event click(). hanya saja event dblclick() adalah sebuah method
double click. sehingga effect jquery akan di jalankan jika melakukan double click pada element
tersebut. contohnya :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 3 : Mengenal Event double click Pada JQuery</title>
</head>
<body>
<h1>Mengenal Event double click pada JQuery | www.malasngoding.com</h1>
</body>
$('#tombol').dblclick(function(){
10
$('.box').toggle();
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
Event mouseleave() dan event mouseenter()
event mouseenter() adalah method pada saat cursor mouse di letakkan atau memasuki element
dan eventmouseleave() adalah event atau method ketika cursor mouse meninggalkan element
tertentu. perhatikan contoh berikut ini untuk melihat contoh penggunaan event mouseleave() dan
event mouseenter().
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 3 : Mengenal Event Pada JQuery</title>
</head>
11
<body>
<h1>Event mouseenter() dan mouseleave() pada JQuery | www.malasngoding.com</h1>
</body>
$('#tombol').mouseenter(function(){
$('.box').show();
});
$('#tombol').mouseleave(function(){
$('.box').hide();
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
display: none;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
perhatikan pada css di atas. kita menetapkan element class box
display:none;
12
sehingga element class box di sembunyikan terlebih dulu. kemudian dengan event mouseenter()
kita menampilkan element box.
$('#tombol').mouseenter(function(){
$('.box').show();
});
effect show() adalah effect jquery untuk menampilkan element. jadi pada saat cursor mouse di
letakkan pada element tombol maka element box akan di tampilkan. dan saat element tombol di
tinggalkan oleh cursor mouse maka element box akan di sembunyikan.
$('#tombol').mouseleave(function(){
$('.box').hide();
});
effect hide() dalah effect jquery untuk menyembunyikan element. silahkan lihat pada contoh
berikut ini. letakkan cursor mouse pada tombol(tidak perlu di klik).
Adapun event lainnya yang dapat anda coba:
 hover() adalah event jquery pada saat posisi hover atau cursor di letakkan pada element.
 focus() adalah event jquery pada saat sedang dalam posisi focus.
 blur() adalah event jquery pada saat selesai dari posisi focus.
Belajar JQuery Part 4 : Mengenal Effect Pada JQuery

Belajar JQuery Mengenal Effect Pada JQuery
Setelah pada tutorial sebelumnya anda telah mempelajari tentang pengenalan event pada jquery.
klik di sini untuk membaca tutorial sebelumnya tentang pengenalan event pada jquery di
www.malasngoding.com. pada tutorialbelajar jquery mengenal effect pada jquery ini akan di
jelaskan tentang pengenalan effect pada jquery. fungsi effect pada jquery merupakan fungsi-
fungsi javascript yang sudah di rangkum menjadi fungsi jquery untuk memudahkan dalam
penggunaanya.
13
penggunaan fungsi effect pada jquery sangat mudah di gunakan karena memliki syntax yang
pendek dan mudah di mengerti. berikut adalah beberapa effect jquery:
 hide()
function effect jquery untuk menyembunyikan element.
 show()
function effect jquery untuk menampilkan element.
 toggle()
function effect jquery untuk menampilkan dan menyembunyikan element.
 fadeIn()
function effect jquery untuk menampilkan element dengan effect memudar.
 fadeOut()
function effect jquery untuk menyembunyikan element dengan effect memudar.
 fadeToggle()
function effect jquery untuk menampilkan dan menyembunyikan element dengan effect
memudar.
 slideDown()
function effect jquery untuk menampilkan element dengan effect slide.
 slideUp()
function effect jquery untuk menyembunyikan element dengan effect slide.
 slideToggle()
function effect jquery untuk menampilkan dan menyembunyikan element dengan effect
slide.
 animate()
function effect jquery untuk membuat effect animasi pada element.
dari penjelasan di atas pasti anda sudah mengetahui apa-apa saja function effect pada jquery.
masing-masing function effect jquery tersebut sudah memiliki fungsi atau kegunaannya masing-
masing. perhatikan contoh berikut ini untuk melihat cara penulisan dan penggunaan effect pada
jquery.
Cara menggunakan dan membuat effect pada jquery
cara membuat effect dengan jquery sangat lah mudah karena jquery sudah merangkum fungsi-
fungs effect kedalam beberapa fungsi effect yang bisa tinggal di gunakan seperti yang sudah di
jelaskan di atas.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery</title>
14

</head>
<body>
<h1>Efect pada JQuery | www.malasngoding.com</h1>
<button id="tombol">Tampilkan kotak</button>
<button id="tombol2">Sembunyikan kotak</button>
</body>
$('.box').show();
});
$('#tombol2').click(function(){
$('.box').hide();
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
display: none;
}
#tombol,
#tombol2{
padding:10px;
color: #fff;
border: none;
}
15
kemudian jalankan pada browser dan klik pada tombol tampilkan kotak untuk menampilkan
element box, dan klik pada tombol sembunyikan kotak untuk menyembunyikan kotak.
$('.box').show();
});
$('.box').hide();
});
pada contoh di atas tadi perhatikan untuk pemahaman tentang cara penulisan atau penggunaan
effect jquery. terdapat dua buah tombol yang kita beri tanda dengan id tombol(#tombol) dan id
tombol2 (#tombol2). kemudian memberikan event nya dengan event click. baca di sini untuk
tutorial event jquery. kemudian saat element tombol di klik maka kita memberikan effect pada
element yang kita inginkan.
$('.box').show();
effect di atas berarti menampilkan element box. Dan
$('.box').hide();
effect di atas berarti untuk menyembunyikan element box.
16
Cara menggunakan effect toggle() pada jquery
Effect toggle() adalah effect jquery untuk menampilkan dan menyembunyikan element
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="tombol">Tampilkan/Sembunyikan kotak</button>
</body>
$('.box').toggle();
});
17
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
display: none;
}
#tombol,
#tombol2{
padding:10px;
color: #fff;
border: none;
}
Cara Menggunakan Effect Slide Pada JQuery
untuk membuat effect slide dengan jquery caranya sangat mudah. sama seperti cara memuat
effect hide, show dan toggle, anda hanya perlu mengubah function effect nya saja seperti contoh
membuat effect slide pada jquery berikut ini. Belajar JQuery Mengenal Effect Pada JQuery
<!DOCTYPE html>
<html>
<head>
</head>
18
<body>
<button id="tombol">Tampilkan kotak (slideDown)</button>
<button id="tombol2">Sembunyikan kotak (slideUp)</button>
<button id="tombol3">Effect slide Toggle kotak (slideToggle)</button>
</body>
$('.box').slideDown();
});
$('.box').slideUp();
});
$('.box').slideToggle();
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
display: none;
}
#tombol,
#tombol2,
#tombol3{
padding:10px;
19
color: #fff;
border: none;
}
dan perhatikan contoh berikut untuk melihat hasil effect slide pada JQuery
Cara Menggunakan Effect Fade JQuery
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="tombol">Tampilkan kotak (fadeIn)</button>
<button id="tombol2">Sembunyikan kotak (fadeOut)</button>
<button id="tombol3">Effect slide Toggle kotak (fadeToggle)</button>
</body>
$('.box').fadeIn();
});
$('.box').fadeOut();
});
$('.box').fadeToggle();
});
});
</script>
</html>
20
style.css
body{
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
display: none;
}
#tombol,
#tombol2,
#tombol3{
padding:10px;
color: #fff;
border: none;
}
Belajar JQuery Part 5 : Callback Function Pada JQuery

Belajar JQuery Callback Function Pada JQuery
Callback function pada JQuery adalah sebuah function yang dijalankan setelah effect selesai di
jalankan. misalnya pada saat anda menjalanka sebuah effect, dan anda ingin menjalankan sebuat
function lagi setelah effect selesai di jalankan. maka function yang di jalankan setelah selesai
menjalankan effect di sebut dengan callback function.
Untuk lebih memperjelas pemahaman tentang apa itu callback function pada jquery, akan saya
buatkan sebuah contoh. misalnya pada contoh ini kita akan menggunakan sebuah effect jquery,
21
sebut saja effect fadeIn(). dan setelah effect fadeIn() selesai di jalankan oleh browser maka akan
kita jalankan effect atau function lainnya.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 5 : Callback Function Pada JQuery</title>
</head>
<body>
<h1>Callback Function pada JQuery | www.malasngoding.com</h1>
<button id="tombol">KLIK</button>
<div class="kotak_biru">function callback di jalankan</div>
</body>
$('.box').fadeIn(800,function(){
$('.kotak_biru').show();
});
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
22
background: orange;
display: none;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
.kotak_biru{
padding:50px;
width: 400px;
display: none;
background: blue;
}
dapat di lihat pada contoh di atas kita membuat sebuah tombol, sebuah element kotak yang kita
beri class box, dan sebuah kotak lagi yang berwarna biru yang kita beri warna biru. kotak biru
kita setting dengan di sembunyikan dengan css. jadi untuk contoh callback function ini kita akan
membuat kotak box muncul setelah tombol di klik. dan setelah effect yang memunculkan kotak
box selesai selanjutnya akan di sambung dengan memunculkan kotak biru. jadi yang di sebut
sebagai callback function di sini ialah pada pemunculan kotak biru setelah effect yang
menampilkan kotak box selesai di jalankan.
23
dapat di lihat pada contoh callback function di atas kotak biru di tampilkan setelah effect yang
menampilkan kotak box selesai.
$('.box').fadeIn(800,function(){
$('.kotak_biru').show();
});
});
Belajar JQuery Part 6 : Chaining Function Pada JQuery

Belajar JQuery Chaining Function Pada JQuery
Pada tutorial sebelumnya anda telah mempelajari tutorial-tutorial jquery mengenal jquery dasar,
cara penggunaanjquery, mengenal effect dan event pada jquery, dan mengenal callback function
pada jquery. pada tutorial belajar jquery chaining function pada jquery ini kita akan mempelajari
tentang apa itu chaining function, bagaimana cara kerjanya dan bagaimana cara penulisan
24
chaining function pada jquery. berikut silahkan simak penjelasan tentangpengertian chaining
function pada jquery.
Chaining function pada jquery adalah metode menghubungkan action atau method jquery pada
sebuah element atau lebih dengan sebuah statement. jadi pada JQuery kita dapat mejalankan
banyak event atau method secara sekaligus. berikut ini contoh cara membuat chaining function
pada jquery.
Pada contoh ini kita akan membuat sebuah tombol lagi. kenapa di setiap tutorial belajar jquery
kita menggunakan tombol untuk contoh, karena metode ini tergolong mudah untuk di pahami
pada saat mempelajari jquery dasar. yang di kemudiannya bisa di kembangkan sendiri sesuai
keinginan. setelah membuat sebuah tombol kita juga membuat sebuah kotak yang akan kita beri
efek ganda atau chaining function.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 6 : Chaining Function Pada JQuery</title>
</head>
<body>
<h1>Chaining Function Pada JQuery | www.malasngoding.com</h1>
</body>
$('.box').fadeIn(800).slideUp(900).slideDown(300);
});
});
</script>
</html>
style.css
body{
}
25
h1{
text-align: center;
}
.box{
height: 300px;
width:300px;
background: orange;
display: none;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
belajar jquery chaining function pada jquery
dan perhatikan hasil dari chaining function yang sudah kita buat seperti di atas.
26
akan di jelaskan sedikit di sini pada contoh belajar jquery chaining function pada jquery ini.
perhatikan pada syntax jquery pada contoh.
$('.box').fadeIn(800).slideUp(900).slideDown(300);
});
});
pada contoh di atas kita memberikan event click pada tombol yang kemudian akan memberikan
effect fadeIn(), sildeUp() dan slideDown() sekaligus pada element .box. sekian tutorial belajar
jquery chaining function pada jquery.
Belajar JQuery Part 7 : Mendapatkan nilai dan value

dengan JQuery
Mendapatkan nilai dan value dengan JQuery
Pada pembahasan tutorial belajar jquery mendapatkan nilai dan value dengan JQuery ini
merupakan penjelasan tentang fungsi-fungsi JQuery untuk mendapatkan nilai, value dan konten
dengan dengan jquery. JQuery memiliki fungsi-fungsi yang sangat mudah di gunakan untuk
mendapatkan sebuah value, atribut dan lainnya dari sebuahelement.
Adapun contoh fungsi-fungsi jquery untuk mendapatkan nilai dan value pada jquery adalah
sebagai berikut.
 text()
adalah fungsi jquery untuk mendapatkan konten text pada dari element HTML.
 html()
adalah fungsi jquery untuk mendapatkan nilai element pada HTML.
 val()
adalah fungsi jquery untuk mendapatkan nilai value dari element HTML.
 attr()
adalah fungsi jquery untuk mendapatkan nilai dari atribut pada element HTML.
27
langsung saja menuju contoh cara penggunaan fungsi text(), html() dan value() pada jquery
untuk mendapatkan nilai, element dan value pada element HTML.
Cara mendapatkan konten text dengan text()
dengan menggunakan fungsi text() pada jquery ini memungkinkan kita untuk mendapatkan
konten text pada element html dengan mudah. sebenarnya dengan fungsi ini juga bisa
menetapkan isi konten text. tetapi pada tutorial belajar jquery mendapatkan nilai dan value
dengan jquery ini hanya akan di jelaskan tentang cara mendapatkan konten saja. untuk cara
menetapkan nilai dan value pada element html akan kita palajari pada tutorial selanjutnya si
www.malasngoding.com.
lalu bagaimana cara mendapatkan konten html dengan fungsi text() ? silahkan anda perhatikan
contoh berikut ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 7 : Mendapatkan nilai dan value dengan
JQuery</title>
</head>
<body>
<h1>Get Function JQuery | www.malasngoding.com</h1>
<p class="kata">Selamat belajar jquery di www.malasngoding.com</p>
</body>
var teks = $(".kata").text();
alert(teks);
});
});
</script>
</html>
style.css
28
body{
}
h1{
text-align: center;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
perhatikan pada contoh di atas. terdapat sebuah tombol dan paragraf yang berisi text. isinya
adalah “selamat belajar jquery di www.malasngoding.com”. dan dalam penggunaan fungsi text()
jquery ini kita mendapatkan isi konten dari element “.kata” tersebut untuk di masukkan dalam
variabel “teks” . dan kemudian menampilkan nya dengan fungsi alert(). fungsi alert adalah fungsi
jquery untuk menampilkan data.
alert(teks);
});
29
dapat anda perhatikan contoh penulsian fungsi text() jquery seperti contoh di atas.

syntax di atas berarti kita memerintahkan untuk mendapatkan konten text dari element class kata.
Cara mendapatkan element HTML dengan html()
Penggunaan dari fungsi html() pada jquery juga sama dengan penggunaan fungsi text() seperti
yang sudah di jelaskan di atas. untuk contoh penggunaan dari fungsi .html untuk mendapatkan
element html adalah sebagai berikut.
index.html
<!DOCTYPE html>
<html>
<head>
JQuery</title>
</head>
<body>
<p class="kata">Selamat belajar jquery di www.malasngoding.com</p>
</body>
var teks = $(".kata").html();
alert(teks);
});
});
</script>
</html>
style.css
body{
}
30
h1{
text-align: center;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
Cara mendapatkan nilai value pada element HTML dengan val()
untuk mendapatkan nilai value element HTML dengan fungsi val() ini saya akan membuat
contoh dengan sebuah form HTML. lihat di sini untuk melihat tutorial cara membuat form
dengan html. di sini saya membuat sebuah form yang saya beri tanda dengan class “nama”.
kemudian kita akan mengambil isi value pada form dengan fungsi val() jquery.
index.html
<!DOCTYPE html>
<html>
<head>
JQuery</title>
</head>
<body>
<input type="text" name="nama" class="nama">
</body>
var nama = $(".nama").val();
alert(nama);
});
});
</script>
</html>
31
style.css
body{
}
h1{
text-align: center;
}
.nama{
padding: 9px;
font-size: 12pt;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
perhatikan pada contoh di atas. pada saat tombol di klik maka isi dari form akan di tampilkan.
kenapa bisa begitu ? perhatikan pada form, pada form saya membuat class dengan nama “nama”.
32
kemudian mengambil isi pada form tersebut dengan fungsi val() jquery dan kemudian
menampilkannya.
var nama = $(".nama").val();
alert(nama);
});
Ketik sesuatu pada form berikut ini dan klik tombol untuk melihat hasil dari penggunaa
Cara mendapatkan nilai atribut pada element dengan attr()
fungsi attr() di gunakan untuk mendapatkan isi atribut pada element. untuk contoh penggunaan
fungsi attr() pada jquery dapat di lihat pada contoh dan penjelasan berikut.
<!DOCTYPE html>
<html>
<head>
JQuery</title>
</head>
<body>
</body>
var nama = $(".nama").attr('type');
alert(nama);
});
});
</script>
</html>
style.css
33
body{
}
h1{
text-align: center;
}
.nama{
padding: 9px;
font-size: 12pt;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
seperti yang dapat di lihat pada contoh di atas. kenapa yang muncul adalah “text” ? karena kita
telah menetapkan nilai atribut yang di ambil adalah atribut type pada form. Mendapatkan nilai
dan value dengan JQuery
34
atribut type
perhatikan atribut type di pada element class “nama” di atas. isinya adalah text. sehingga yang
data yang di dapat adalah “text”. anda bisa mendapatan nilai dari atribut yang lain sesuai
keinginan dengan menetapkannya padafungsi attr() jquery.
Belajar JQuery Part 8 : Menetapkan Nilai dan Value

dengan JQuery
Menetapkan Nilai dan Value dengan JQuery
Menetapkan Nilai dan Value dengan JQuery. Pada tutorial sebelumnya sudah di jelaskan tentang
cara mendapatkan nilai dan value dari elemant HTML dengan menggunakan JQuery. klik di
sini untuk membaca tutorial sebelumnya tentang cara mendapatkan nilai dan value dari element
HTML dengan menggunakan fungsi .text(), .html(), .val() pada JQuery. Pada
tutorial menetapkan nilai dan value dengan JQuery akan di jelaskan bagaimana cara mengisi
nilai dan value pada element HTML dengan menggunakan fungsi-fugsi yang sama seperti
penjelasan pada tutorial belajar jquery pada part sebelumnya yaitu fungsi .text(), .html() dan
fungsi .val().
fungsi .text(), .html() dan .val() juga memiliki kegunaan untuk mengisi suatu nilai atau value
pada element HTML selain kemampuannya dalam mendapatkan nilai dan value dari element
HTML. cara menambahkan atau menetapkan nilai dan value pada element HTML sangat mudah.
anda hanya perlu memasukkan nilai atau element yang ingin anda tambahkan di dalam parameter
masing-masing fungsi yang sudah saya sebutkan di atas.
Cara menetapkan konten dengan fungsi .text() di jquery
untuk cara menetapkan konten pada element html dengan menggunakan fungsi text() silahkan
perhatikan contoh dan penjelasan berikut ini.
<!DOCTYPE html>
<html>
35
<head>
<title>Tutorial belajar JQuery Part 8 : Menetapkan nilai dan value dengan JQuery</title>
</head>
<body>
<h1>Set Function JQuery | www.malasngoding.com</h1>
<p class="nama"></p>
</body>
$('.nama').text("belajar pemrogaman web di www.malasngoding.com");
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
36
menetapkan nilai dan value dengan jquery
perhatikan pada contoh di atas. text “belajar pemrograman web di www.malasngoding.com”

pada element paragraf setelah tombol di klik. karena pada event klik tombol saya menambahkan
text tersebut pada element class nama.
$('.nama').text("belajar pemrogaman web di www.malasngoding.com");
});
sehingga text “belajar pemrogaman web di www.malasngoding.com” akan di tambahkan pada

element class nama.
Cara menambahkan element HTML dengan fungsi .HTML() di jquery
Cara menambahkan element HTML dengan fungsi .html() di jquery juga sama seperti contoh
cara penggunaan fungsi text(). perbedaannya adalah .text() hanya mampu menambahkan text dan
bukan yang berbentuk element html. tetapi fungsi .html() mampu menambahkan element html.
element HTML yang ingin di tambahkan hanya perlu di letakkan atau di isi di dalam parameter
fungsi .html()
.html(" letakkan element html yang ingin di tambah di sini ");
37
contoh cara penggunaan dan penulisan fungsi .html() di jquery caranya sangat mudah. silahkan
perhatikan pada contoh dan penjelasan fungsi .html() jquery berikut ini.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
$('.nama').html("<div class='kotak'>belajar pemrogaman web di
www.malasngoding.com</div>");
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
#tombol{
padding:10px;
color: #fff;
border: none;
}
.kotak{
38
padding:20px;
font-size: 12pt;
color: #fff;
background: orange;
width: 500px;
}
menambahkan element html dengan jquery
Perhatikan pada contoh di atas. pada saat tombol di klik kita menambahkan element html
<div class='kotak'>belajar pemrogaman web di www.malasngoding.com</div>
sehingga muncul element kotak yang class nya sudah kita setting dengan css menggunakan
warna orange dan memiliki text putih. perlu sedikit di ingat bahwa fungsi .html() jquery ini
mampu menambahkan element html.
Cara menambahkan value HTML dengan fungsi .HTML() di jquery
Cara penulisan dan penggunaannya masih sama dengan penggunaan fungsi text() dan html()
pada jquery. hanya saja yang membedakan di sini ialah fungsi val() di gunakan untuk
39
menetapkan nilai value pada element HTML. pada contoh ini kita akan menetapkan atau mengisi
value pada sebuah form saat tombol si klik.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
$('.nama').val("Malas Ngoding");
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.nama{
padding: 9px;
font-size: 16pt;
}
#tombol{
padding:10px;
color: #fff;
40
border: none;
}
perhatikan pada syntax jquery di atas.
$('.nama').val("Malas Ngoding");
});
kita membuat intruksi bahwa ketika event klik terjadi pada tombol maka form yang
memiliki class nama akan di isi dengan value “malas ngoding”. lihat pada contoh di bawah ini.
untuk mencoba menetapkan value dengan val() silahan coba klik pada tombol pada contoh
berikut.
dan jika anda ingin mengosongkan value pada sebuah form. maka anda bisa menetapkan value
element tersebut dengan cara mengosongkan parameter fungsi val(). seperti contoh berikut.
$('.nama').val("");
jadi kesimpulan dari penjelasan tentang tutorial menetapkan isi dan value dengan jquery ini
adlaha fungsi .text() jquery di gunakan untuk menetapkan html, html() digunakan untuk
menetapkan menetapkan element yang berbentuk HTML, dan val() untuk menetapkan nilai value
pada element HTML. sekian tutorial Menetapkan Nilai dan Value dengan JQuery
Belajar JQuery Part 9 : Menambah Element Dengan

JQuery
Belajar JQuery Menambah Element Dengan JQuery
JQuery memiliki fungsi untuk menambahkan element baru pada element HTML, bisa itu
menambahkan element sebelum element, sesudah element, sebelum element yang ada di dalam
41
nya atau sesudah element yang ada di dalamnya. adapun beberapa fungsi jquery yang bisa di
gunakan untuk menambah element dengan jquery adalah:
 after()
merupakan fungsi jquery untuk menambahkan element html pada sesudah element yang
di pilih.
 before()
merupakan fungsi jquery untuk menambahkan element html pada sebelum element yang
di pilih.
 prepend()
merupakan fungsi jquery untuk menambahkan element html pada sisi dalam element
yang di pilih tapi di awal isi element tersebut.
 append()
merupakan fungsi jquery untuk menambahkan element html pada sisi dalam element
yang di pilih tapi di akhir isi dari element tersebut.
Pasti anda bingung dengan penjelasan pengertian dari fungsi-fungsi jquery di atas yang di
gunakan untukmenambahkan element. alangkah lebih baiknya akan di jelaskan satu persatu
dengan di sisipkan masing-masing contoh agar lebih mudah di pahami. untuk contoh dari
penggunaan fungsi after, before, append dan prepend akan di gabungkan pada satu contoh agar
lebih mudah di pelajari dan di rasakan apa-apasaja perbedaan dari masing-masing fungsi jquery
tersebut.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 9 : Menambah Element dengan JQuery</title>
</head>
<body>
<h1>Add Function JQuery | www.malasngoding.com</h1>
<div class="kotak">
<span>ISI KOTAK</span>
</div>
<button class="after">Tes after</button>

<button class="before">Tes before</button>
<button class="append">Tes append</button>
<button class="prepend">Tes prepend</button>
</body>
42
$('.after').click(function(){
$('.kotak').after("<h4>contoh after</h4>")
});
$('.before').click(function(){
$('.kotak').before("<h4>contoh before</h4>")
});
$('.append').click(function(){
$('.kotak').append("<h4>contoh append</h4>")
});
$('.prepend').click(function(){
$('.kotak').prepend("<h4>contoh prepend</h4>")
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: orange;
padding: 30px;
color: #fff;
margin-bottom: 20px;
}
.kotak span{
background: red;
padding: 10px;
}
button{
color: #fff;
43
background: #232323;
border: none;
padding: 10px;
}
dapat di perhatikan pada contoh di atas. terdapat empat buah tombol yang sudah kita beri tanda
masing-masing dengan nama after, before, append dan prepend. tujuan dari masing-masing
tombol yang saya buat sebagai contoh ini adalah untuk menambahkan element yang dapat juga
perhatikan pada syntax jquery berikut.
$('.after').click(function(){
$('.kotak').after("<h4>contoh after</h4>")
});
$('.before').click(function(){
$('.kotak').before("<h4>contoh before</h4>")
});
$('.append').click(function(){
$('.kotak').append("<h4>contoh append</h4>")
});
$('.prepend').click(function(){
$('.kotak').prepend("<h4>contoh prepend</h4>")
});
44
jika tombol after di klik maka element “<h4>contoh after</h4>” akan di tambahkann pada
sesudah element kotak seperti pada gambar yang hasil eksekusi di atas. dan jika yang di klik
tombol before maka element “<h4>contoh before</h4>” akan muncul pada
sebelum element kotak. jika tombol append di klik maka element “<h4>contoh append</h4>”
akan di munculkan di dalam kotak tapi pada posisi awal dari semua isi pada element kotak. jika
tombol prepend di klik maka element “<h4>contoh prepend</h4>” akan di munculkan atau di
tambahkan di dalam element class kotak tetapi pada terletak pada akhir semua element yang
terdapat di dalam element kotak.
sesuai dengan masing-masing contoh lokasi seperti pada gambar di atas. dan untuk lebih jelasnya
lagi dilahkan pelajari pada contoh berikut ini.
Belajar JQuery Part 10 : Menghapus Element Dengan

JQuery
45
Menghapus Element Dengan JQuery
Setelah ada tutorial sebelumnya di www.malasngoding.com anda mempelajari tentang

cara menambah element dengan JQuery, menetapkan nilai dan value pada element HTML, serta
belajar cara mendapatkan nilai dan value pada element HTML dengan menggunakan JQuery.
maka pada tutorial belajar JQuery Part 10 ini akan di jelaskan tentang cara menghapus element
HTML dengan JQuery.
Untuk menghapus element HTML dengan JQuery, JQuery telah menyediakan sebuah fungsi
yang berguna untuk menghapus element HTML yaitu bisa menggunakan fungsi remove(). fungsi
remove() pada JQuery adalah sebuah fungsi yang di sediakan oleh JQuery untuk menghapus
element HTML untuk keperluan sesuatu. untuk lebih jelasnya dan menambah pemahaman dari
fungsi remove untuk menghapus element HTML dengan JQuerysilahkan perhatikan contoh cara
menggunakan fungsi remove() pada jquery berikut ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 10 : Menghapus Element dengan JQuery</title>
</head>
<body>
<h1>remove Function JQuery | www.malasngoding.com</h1>
<button class="tombol">Tombol</button>
<div class="kotak">
<span>INI ADALAH KOTAK</span>
</div>
</body>
$('.kotak').remove();
});
});
</script>
46
</html>
style.css
body{
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: orange;
padding: 30px;
color: #fff;
margin-bottom: 20px;
}
.tombol{
color: #fff;
border: none;
padding: 10px;
}
47
pada contoh di atas bisa di perhatikan bahwa fungsi remove() di gunakan untuk menghapus
element html. Menghapus Element Dengan JQuery
$('.kotak').remove();
});
pada saat tombol di klik maka fungsi remove() di jalankan pada element html yang memiliki
class kotak untuk menghapus element kotak. sekian tutorial cara Menghapus Element Dengan
JQuery serta contoh penggunaannya. pada tutorial selanjutnya tentang jquery akan di bahas
tentang cara menambah class pada elemet html dan cara menghapus class pada element html
dengan menggunakan bantuan JQuery.
Belajar JQuery Part 11 : Manipulasi Class Dengan JQuery
Menambah dan Menghapus class dengan JQuery
Pada tutorial JQuery dasar ini saya akan membahas tentang cara memanipulasi class atau
cara menambah dan menghapus class dengan JQuery. misalnya kita ingin menambahkan sebuah
class kedalam sebuah element tanpa ingin mengotak-atik syntax HTML nya, maka solusinya
adalah bisa menggunakan fungsi JQuery untuk menambahkan class, yaitu bisa menggunakan
fungsi addClass(). dan untuk menghapus class tertentu dari sebuah element dengan JQuery maka
anda bisa menggunakan fungsi removeClass().
addClass() adalah sebuah fungsi yang di sediakan oleh jquery untuk mempermudah
penggunanya dalam hal memanipulasi class html khususnya untuk menambahkan class pada
element tersebut. dan removeClass() adalah fungsi JQuery yang di sediakan oleh jquery sendiri
untuk mempermudah kita dalam menghapus class yang di inginkan dari element yang di
inginkan. berikut adalah contoh cara penulisan fungsi addClass() dan removeClass()pada jQuery
untuk menambah dan menghapus class dengan JQuery.
pada contoh ini kita akan membuat ketetapan dalam sebuah class sebut saja class tersebut kita
beri nama dengan “biru”. dan kita membuat 2 buah tombol yaitu tombol yang berisi fungsi
addClass dan tombol yang berisi removeClass. jadi di sini pada saat tombol addclass di klik
maka class biru akan kita tambahkan pada element lingkaran. jika tombol removeclass di
48
tambahkan maka class biru pada element lingkaran akan di hapus. perhatikan contoh menambah
dan menghapus class dengan jquery berikut ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 11 : Menambah dan Menghapus Class dengan
JQuery</title>
</head>
<body>
<h1>add and remove class Function JQuery | www.malasngoding.com</h1>
<button class="tombol" id="tambah">Tambahkan class</button>

<button class="tombol" id="hapus">Hapus class</button>
<div class="lingkaran"></div>
<p class="pesan"></p>
</body>
$('#tambah').click(function(){
$('.lingkaran').addClass('biru');
$('.pesan').text('class biru di tambahkan');
});
$('#hapus').click(function(){
$('.lingkaran').removeClass('biru');
$('.pesan').text('class biru di hapus');
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
49
.lingkaran{
border-radius: 100%;
width: 200px;
height: 200px;
background: orange;
padding: 30px;
color: #fff;
margin-top: 20px;
}
.biru{
border-radius: 0;
background: blue;
}
.tombol{
color: #fff;
border: none;
padding: 10px;
}
dan saat tombol tambahkan class di klik maka class biru akan di tambahkan pada class lingkaran.
50
dapat di perhatikan pada contoh di atas bahwa class biru sudah kita setting dengan css untuk
membentuk kotak berwarna biru. dan saat tombol di klik maka class biru akan di tambahkan ke
class lingkaran sesuai dengan intruksi perintah jquery kita.
$('.lingkaran').addClass('biru');
$('.pesan').text('class biru di tambahkan');
});
$('#hapus').click(function(){
$('.lingkaran').removeClass('biru');
$('.pesan').text('class biru di hapus');
});
dan sebaliknya jika tombol hapus class di klik maka class biru pada class lingkaran akan di
hapus. perhatikan contoh berikut ini untuk lebih mudah memahami kegunaan cara menambah
dan menghapus class dengan jquery.
Lantas bagaimana cara penggunaan toggle atau classToggle() pada jquery ? cara nya sangat
mudah, sama seperti penggunaan toggle pada effect jquery. baca di sini tentang effect jquery di
www.malasngoding.com. class akan muncul dan hilang seperti halnya effect toggle.
51
Belajar JQuery Part 12 : Menambahkan CSS Dengan

JQuery
Belajar JQuery Menambahkan CSS Dengan JQuery
Pada tutorial sebelumnya di www.malasngoding.com sudah di jelaskan tentang pengertian dan

cara-cara penggunaan effect pada jquery, event jquery, menambahkan element, manipulasi
class, menghapus elementdengan jquery dan banyak lagi yang telah di pelajari tentang JQuery
dasar. tetapi masih ada lagi fungsi jQuery yang tidak kalah bagus dan bergunanya, yaitu fungsi
CSS(). sehingga pada tutorial belajar jquery menambahkan css dengan jquery ini akan di bahas
tentang pengertian dari fungsi CSS() tersebut dan bagaimana cara menggunakan fungsi
CSS tersebut untuk menambahkan css pada element HTML.
fungsi CSS() pada jquery adalah fungsi yang di sediakan untuk menambahkan atau membuat css
pada element HTML. contohnya misalnya anda bisa menambahkan atau menyisipkan design css
dengan menggunakan fungsi css() milik jquery ini. dan cara penulisan fungsi css pada jquery ini
sangatlah mudah, caranya sama seperti penulisan fungsi jquery yang lain, yang membedakannya
hanya pada pengisian parameter fungsi css. berikut ini format penulisan fungsi css pada jquery.’
$('element html').css("property","value");
pertama pada bagian element HTML di isikan dengan element html yang ingin di tambahkan
syntax css. sesuai dengan penandaan id dan classnya. jika id di panggil dengan tanda pagar (#),
dan class di panggil dengan tanda titik (.). kemudian tambahkan fungsi css seperti contoh di atas,
dan masukkan property yang di inginkan misalnya background, color, border, width atau apa
saja, kemudian pada bagian valuenya isikan value dari property yang anda buat. silahkan
perhatikan contoh belajar jquery menambahkan css dengan jquery.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 12 : Menambahkan CSS dengan JQuery</title>
</head>
<body>
<h1>CSS Function JQuery | www.malasngoding.com</h1>
52
<button class="tombol" id="tambah">Tambahkan CSS</button>

</body>
$('.lingkaran').css("background","blue");
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.lingkaran{
width: 200px;
height: 200px;
background: orange;
padding: 30px;
color: #fff;
margin-top: 20px;
}
.tombol{
color: #fff;
border: none;
padding: 10px;
}
dapat di lihat pada contoh di atas bahwa terdapat lingkaran berwarna orange, dan pada saat
tombol di klik kita menginginkan lingkaran tersebut berubah menjadi warna biru.
untuk menambahkan css pada element lingkaran tersebut
53
$('.lingkaran').css("background","blue");
});
hasilnya pada tombol di klik maka element lingkaran akan berubah warna menjadi biru seperti
yang sudah kita setting pada fungsi css jquery di atas.
belajar jquery menambahkan css dengan jquery
Dan bagaimana cara menambahkan banyak css pada element html? perhatikan contoh berikut
ini.
Cara menambahkan banyak css pada element HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part 12 : Menambahkan CSS dengan JQuery</title>
</head>
<body>
<h1>CSS Function JQuery | www.malasngoding.com</h1>
54
<button class="tombol" id="tambah">Tambahkan CSS</button>

</body>
$('.lingkaran').css({"background":"blue","width":"400px","height":"400px"});
});
});
</script>
</html>
style.css
body{
}
h1{
text-align: center;
}
.lingkaran{
width: 200px;
height: 200px;
background: orange;
padding: 30px;
color: #fff;
margin-top: 20px;
}
.tombol{
color: #fff;
border: none;
padding: 10px;
}
perhatikan pada penulisan cara menambah banyak css dengan fungsi css() jquery.
$('.lingkaran').css({"background":"blue","width":"400px","height":"400px"});
55
per property dan value pisahkan dengan tanda koma(,). dan jangan lupa untuk menambahkan
tanda kurung kurawal “{” pada awal dan tanda kurung kurawal penutup pada akhir “}”. karena
ini berarti array. dan agar syntax css nya lebih rapi di lihat bisa mengubah penulisannya sebagai
berikut.
$('.lingkaran').css({
"background":"blue",
"width":"400px",
"height":"400px"
});
56

Ebook Jquery

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ebook Jquery

Diunggah oleh

Hak Cipta:

Format Tersedia

[EBOOK PANDUAN BELAJAR JQUERY DASAR] www.malasngoding.

Ebook PANDUAN BELAJAR JQUERY DASAR di buat oleh admin www.malasngoding.com

Mendapatkan nilai dan value dengan JQuery ....................................................................................27

Belajar JQuery Part 1 : Pengertian Dan Cara Menggunakan

 Lebih mudah di mengerti.

Cara Menggunakan JQuery

 Menggunakan JQuery secara offline

pengertian dan cara menggunakan jquery

Pada contoh ini saya membuat file index.html

<script type="text/javascript" src="lokasi file jquery anda"></script>

dan jquery yang di sediakan oleh microsoft:

Belajar JQuery Part 2 : Belajar Pengenalan JQuery Dasar

Pengertian Selector JQuery

Pengertian Event JQuery

Perhatikan contoh selector dan event pada jquery berikut ini.

dan yang terpenting perhatikan pada contoh jquery di atas

Belajar JQuery Part 3 : Mengenal Event Pada JQuery

Belajar JQuery Mengenal Event Pada JQuery

Setelah membelajari dasar-dasar JQuery pada tutorial sebelumnya di www.malasngoding.com

adapun beberapa event jquery adalah sebagai berikut.

Belajar JQuery Mengenal Event Pada JQuery

Event mouseleave() dan event mouseenter()

perhatikan pada css di atas. kita menetapkan element class box

Adapun event lainnya yang dapat anda coba:

Belajar JQuery Part 4 : Mengenal Effect Pada JQuery

Cara menggunakan dan membuat effect pada jquery

<link rel="stylesheet" type="text/css" href="style.css">

effect di atas berarti menampilkan element box. Dan

effect di atas berarti untuk menyembunyikan element box.

Cara menggunakan effect toggle() pada jquery

Cara Menggunakan Effect Slide Pada JQuery

Cara Menggunakan Effect Fade JQuery

Belajar JQuery Part 5 : Callback Function Pada JQuery

Belajar JQuery Part 6 : Chaining Function Pada JQuery

belajar jquery chaining function pada jquery

Belajar JQuery Part 7 : Mendapatkan nilai dan value

Cara mendapatkan konten text dengan text()

var teks = $(".kata").text();

Cara mendapatkan element HTML dengan html()

Cara mendapatkan nilai value pada element HTML dengan val()

<input type="text" name="nama" class="nama">

Cara mendapatkan nilai atribut pada element dengan attr()

var nama = $(".nama").attr('type');

<input type="text" name="nama" class="nama">

var nama = $(".nama").attr('type');

Belajar JQuery Part 8 : Menetapkan Nilai dan Value

Cara menetapkan konten dengan fungsi .text() di jquery

menetapkan nilai dan value dengan jquery

perhatikan pada contoh di atas. text “belajar pemrograman web di www.malasngoding.com”

sehingga text “belajar pemrogaman web di www.malasngoding.com” akan di tambahkan pada

Cara menambahkan element HTML dengan fungsi .HTML() di jquery

.html(" letakkan element html yang ingin di tambah di sini ");

menambahkan element html dengan jquery

<div class='kotak'>belajar pemrogaman web di www.malasngoding.com</div>

Cara menambahkan value HTML dengan fungsi .HTML() di jquery

perhatikan pada syntax jquery di atas.

Belajar JQuery Part 9 : Menambah Element Dengan

<button class="after">Tes after</button>

Belajar JQuery Part 10 : Menghapus Element Dengan

Menghapus Element Dengan JQuery

Setelah ada tutorial sebelumnya di www.malasngoding.com anda mempelajari tentang

Belajar JQuery Part 11 : Manipulasi Class Dengan JQuery

Menambah dan Menghapus class dengan JQuery

<button class="tombol" id="tambah">Tambahkan class</button>