26 0 929 KB
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
i
www.malasngoding.com
[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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
pengertian dan cara menggunakan jquery Pada contoh ini saya membuat file index.html index.html
Tutorial belajar JQuery Part 1 : Pengertian dan cara menggunakan jquery
bisa di perhatikan pada contoh di atas. untuk menghubungkan file jquery dengan file html atau php bisa menggunakan syntax berikut
3
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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.
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:
dan jquery yang di sediakan oleh microsoft:
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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
Tutorial belajar JQuery Part 2 : Belajar pengenalan jquery dasar
Tutorial JQuery Dasar www.malasngoding.com TOMBOL
5
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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 $(document).ready(function(){ $('#tombol').click(function(){ $('.box').toggle(); }); }); 6
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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 $('#tombol').click(function(){ $('.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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
index.html
Tutorial belajar JQuery Part 3 : Mengenal Event Pada JQuery
Mengenal Event pada JQuery | www.malasngoding.com TOMBOL
style.css body{ } h1{ } .box{
}
font-family: sans-serif;
text-align: center;
height: 300px; width:300px; background: orange;
#tombol{ padding:10px; color: #fff; background: #34495E; border: none; } 9
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
Tutorial belajar JQuery Part 3 : Mengenal Event double click Pada JQuery
Mengenal Event double click pada JQuery | www.malasngoding.com TOMBOL
style.css body{ } h1{ } .box{
}
});
www.malasngoding.com
$('.box').toggle();
font-family: sans-serif;
text-align: center;
height: 300px; width:300px; background: orange;
#tombol{ padding:10px; color: #fff; background: #34495E; 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
Tutorial belajar JQuery Part 3 : Mengenal Event Pada JQuery
11
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
Event mouseenter() dan mouseleave() pada JQuery | www.malasngoding.com TOMBOL
$('#tombol').mouseleave(function(){ $('.box').hide(); });
style.css body{ } h1{ } .box{
}
font-family: sans-serif;
text-align: center;
height: 300px; width:300px; background: orange; display: none;
#tombol{ padding:10px; color: #fff; background: #34495E; border: none; } perhatikan pada css di atas. kita menetapkan element class box display:none; 12
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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 fungsifungsi javascript yang sudah di rangkum menjadi fungsi jquery untuk memudahkan dalam penggunaanya.
13
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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 masingmasing. 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 fungsifungs effect kedalam beberapa fungsi effect yang bisa tinggal di gunakan seperti yang sudah di jelaskan di atas. index.html
Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery
14
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
Efect pada JQuery | www.malasngoding.com Tampilkan kotak Sembunyikan kotak
$('#tombol2').click(function(){ $('.box').hide(); });
style.css body{ } h1{ } .box{
}
font-family: sans-serif;
text-align: center;
height: 300px; width:300px; background: orange; display: none;
#tombol, #tombol2{ padding:10px; color: #fff; background: #34495E; border: none; } 15
www.malasngoding.com
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
kemudian jalankan pada browser dan klik pada tombol tampilkan kotak untuk menampilkan element box, dan klik pada tombol sembunyikan kotak untuk menyembunyikan kotak. $('#tombol').click(function(){ $('.box').show(); }); $('#tombol2').click(function(){ $('.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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
Cara menggunakan effect toggle() pada jquery Effect toggle() adalah effect jquery untuk menampilkan dan menyembunyikan element index.html
Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery
Efect pada JQuery | www.malasngoding.com Tampilkan/Sembunyikan kotak
style.css body{ } h1{ } .box{
}
font-family: sans-serif;
text-align: center;
height: 300px; width:300px; background: orange; display: none;
#tombol, #tombol2{ padding:10px; color: #fff; background: #34495E; 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
Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery
18
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
Efect pada JQuery | www.malasngoding.com Tampilkan kotak (slideDown) Sembunyikan kotak (slideUp) Effect slide Toggle kotak (slideToggle)
$('#tombol3').click(function(){ $('.box').slideToggle(); });
style.css body{ } h1{ } .box{
}
font-family: sans-serif;
text-align: center;
height: 300px; width:300px; background: orange; display: none;
#tombol, #tombol2, #tombol3{ padding:10px; 19
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
}
www.malasngoding.com
color: #fff; background: #34495E; border: none;
dan perhatikan contoh berikut untuk melihat hasil effect slide pada JQuery
Cara Menggunakan Effect Fade JQuery index.html
Tutorial belajar JQuery Part 4 : Mengenal Effect Pada JQuery
Efect pada JQuery | www.malasngoding.com Tampilkan kotak (fadeIn) Sembunyikan kotak (fadeOut) Effect slide Toggle kotak (fadeToggle)
20
$('#tombol3').click(function(){ $('.box').fadeToggle(); });
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
style.css body{ } h1{ } .box{
}
font-family: sans-serif;
text-align: center;
height: 300px; width:300px; background: orange; display: none;
#tombol, #tombol2, #tombol3{ padding:10px; color: #fff; background: #34495E; 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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
sebut saja effect fadeIn(). dan setelah effect fadeIn() selesai di jalankan oleh browser maka akan kita jalankan effect atau function lainnya. index.html
Tutorial belajar JQuery Part 5 : Callback Function Pada JQuery
Callback Function pada JQuery | www.malasngoding.com KLIK
function callback di jalankan
style.css body{ } h1{ } .box{
font-family: sans-serif;
text-align: center;
height: 300px; width:300px; 22
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
}
www.malasngoding.com
background: orange; display: none;
#tombol{ padding:10px; color: #fff; background: #34495E; 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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
dapat di lihat pada contoh callback function di atas kotak biru di tampilkan setelah effect yang menampilkan kotak box selesai. $('#tombol').click(function(){ $('.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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
Tutorial belajar JQuery Part 6 : Chaining Function Pada JQuery
Chaining Function Pada JQuery | www.malasngoding.com KLIK
style.css body{ }
font-family: sans-serif;
25
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
h1{ } .box{
}
www.malasngoding.com
text-align: center;
height: 300px; width:300px; background: orange; display: none;
#tombol{ padding:10px; color: #fff; background: #34495E; border: none; }
belajar jquery chaining function pada jquery dan perhatikan hasil dari chaining function yang sudah kita buat seperti di atas.
26
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
akan di jelaskan sedikit di sini pada contoh belajar jquery chaining function pada jquery ini. perhatikan pada syntax jquery pada contoh. $(document).ready(function(){ $('#tombol').click(function(){ $('.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
[EBOOK PANDUAN BELAJAR JQUERY DASAR]
www.malasngoding.com
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
Tutorial belajar JQuery Part 7 : Mendapatkan nilai dan value dengan JQuery
Get Function JQuery | www.malasngoding.com KLIK
Selamat belajar jquery di www.malasngoding.com
Selamat belajar jquery di www.malasngoding.com