Ebook Jquery [PDF]

Citation preview

---

[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

style.css 28



[EBOOK PANDUAN BELAJAR JQUERY DASAR] body{ } h1{ }



www.malasngoding.com



font-family: sans-serif;



text-align: center;



#tombol{ padding:10px; color: #fff; background: #34495E; 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. $('#tombol').click(function(){ var teks = $(".kata").text(); alert(teks); });



29



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



dapat anda perhatikan contoh penulsian fungsi text() jquery seperti contoh di atas. var teks = $(".kata").text(); 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



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

style.css body{ }



font-family: sans-serif;



30



[EBOOK PANDUAN BELAJAR JQUERY DASAR] h1{ }



www.malasngoding.com



text-align: center;



#tombol{ padding:10px; color: #fff; background: #34495E; 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



Tutorial belajar JQuery Part 7 : Mendapatkan nilai dan value dengan JQuery







Get Function JQuery | www.malasngoding.com



KLIK



31



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



style.css body{ } h1{



text-align: center;



} .nama{ }



font-family: sans-serif;



padding: 9px; font-size: 12pt;



#tombol{ padding:10px; color: #fff; background: #34495E; 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



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



kemudian mengambil isi pada form tersebut dengan fungsi val() jquery dan kemudian menampilkannya. $('#tombol').click(function(){ 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.



Tutorial belajar JQuery Part 7 : Mendapatkan nilai dan value dengan JQuery







Get Function JQuery | www.malasngoding.com



KLIK







style.css 33



[EBOOK PANDUAN BELAJAR JQUERY DASAR] body{ } h1{



font-family: sans-serif;



text-align: center;



} .nama{ }



www.malasngoding.com



padding: 9px; font-size: 12pt;



#tombol{ padding:10px; color: #fff; background: #34495E; 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 var nama = $(".nama").attr('type'); 34



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



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. var nama = $(".nama").attr('type');



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.



35



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



Tutorial belajar JQuery Part 8 : Menetapkan nilai dan value dengan JQuery







Set Function JQuery | www.malasngoding.com KLIK

style.css body{ } h1{ }



font-family: sans-serif;



text-align: center;



#tombol{ padding:10px; color: #fff; background: #34495E; border: none; }



36



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



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. $('#tombol').click(function(){ $('.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. KLIK

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



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



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



Tutorial belajar JQuery Part 8 : Menetapkan nilai dan value dengan JQuery







Set Function JQuery | www.malasngoding.com KLIK

style.css body{ } h1{



font-family: sans-serif;



text-align: center;



}



#tombol{ padding:10px; color: #fff; background: #34495E; border: none; } .kotak{ 38



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



}



www.malasngoding.com



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 belajar pemrogaman web di www.malasngoding.com



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



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



menetapkan nilai value pada element HTML. pada contoh ini kita akan menetapkan atau mengisi value pada sebuah form saat tombol si klik. index.html



Tutorial belajar JQuery Part 8 : Menetapkan nilai dan value dengan JQuery







Set Function JQuery | www.malasngoding.com KLIK

style.css body{ } h1{



text-align: center;



} .nama{ }



font-family: sans-serif;



padding: 9px; font-size: 16pt;



#tombol{ padding:10px; color: #fff; 40



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



}



www.malasngoding.com



background: #34495E; border: none;



perhatikan pada syntax jquery di atas. $('#tombol').click(function(){ $('.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



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



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



Tutorial belajar JQuery Part 9 : Menambah Element dengan JQuery







Add Function JQuery | www.malasngoding.com



ISI KOTAK



Tes after Tes before Tes append Tes prepend







$('.prepend').click(function(){ $('.kotak').prepend("contoh prepend") });



style.css body{ } h1{



text-align: center;



} .kotak{



}



font-family: sans-serif;



width: 300px; height: auto; background: orange; padding: 30px; color: #fff; margin-bottom: 20px;



.kotak span{ background: red; padding: 10px; } button{ color: #fff; 43



www.malasngoding.com



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



}



www.malasngoding.com



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("contoh after") }); $('.before').click(function(){ $('.kotak').before("contoh before") }); $('.append').click(function(){ $('.kotak').append("contoh append") }); $('.prepend').click(function(){ $('.kotak').prepend("contoh prepend") }); 44



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



jika tombol after di klik maka element “contoh after” akan di tambahkann pada sesudah element kotak seperti pada gambar yang hasil eksekusi di atas. dan jika yang di klik tombol before maka element “contoh before” akan muncul pada sebelum element kotak. jika tombol append di klik maka element “contoh append” akan di munculkan di dalam kotak tapi pada posisi awal dari semua isi pada element kotak. jika tombol prepend di klik maka element “contoh prepend” 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



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



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



Tutorial belajar JQuery Part 10 : Menghapus Element dengan JQuery







remove Function JQuery | www.malasngoding.com Tombol



INI ADALAH KOTAK







46



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



style.css body{ } h1{



text-align: center;



} .kotak{



}



font-family: sans-serif;



width: 300px; height: auto; background: orange; padding: 30px; color: #fff; margin-bottom: 20px;



.tombol{ color: #fff; background: #232323; border: none; padding: 10px; }



47



www.malasngoding.com



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



pada contoh di atas bisa di perhatikan bahwa fungsi remove() di gunakan untuk menghapus element html. Menghapus Element Dengan JQuery $('.tombol').click(function(){ $('.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



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



tambahkan maka class biru pada element lingkaran akan di hapus. perhatikan contoh menambah dan menghapus class dengan jquery berikut ini. index.html



Tutorial belajar JQuery Part 11 : Menambah dan Menghapus Class dengan JQuery







add and remove class Function JQuery | www.malasngoding.com Tambahkan class Hapus class

$('#hapus').click(function(){ $('.lingkaran').removeClass('biru'); $('.pesan').text('class biru di hapus'); });



style.css body{ } h1{



font-family: sans-serif;



text-align: center; 49



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



} .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; background: #232323; border: none; padding: 10px; }



dan saat tombol tambahkan class di klik maka class biru akan di tambahkan pada class lingkaran. 50



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



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. $('#tambah').click(function(){ $('.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



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



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



Tutorial belajar JQuery Part 12 : Menambahkan CSS dengan JQuery







CSS Function JQuery | www.malasngoding.com 52



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



Tambahkan CSS







style.css body{ } h1{ }



font-family: sans-serif;



text-align: center;



.lingkaran{ border-radius: 100%; width: 200px; height: 200px; background: orange; padding: 30px; color: #fff; margin-top: 20px; } .tombol{ color: #fff; background: #232323; 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



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



$('#tambah').click(function(){ $('.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



Tutorial belajar JQuery Part 12 : Menambahkan CSS dengan JQuery







CSS Function JQuery | www.malasngoding.com 54



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



Tambahkan CSS







style.css body{ } h1{ }



font-family: sans-serif;



text-align: center;



.lingkaran{ border-radius: 100%; width: 200px; height: 200px; background: orange; padding: 30px; color: #fff; margin-top: 20px; } .tombol{ color: #fff; background: #232323; border: none; padding: 10px; } perhatikan pada penulisan cara menambah banyak css dengan fungsi css() jquery. $('.lingkaran').css({"background":"blue","width":"400px","height":"400px"});



55



[EBOOK PANDUAN BELAJAR JQUERY DASAR]



www.malasngoding.com



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 PANDUAN BELAJAR JQUERY DASAR]



1



www.malasngoding.com