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.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Tutorial belajar JQuery Part 2 : Belajar pengenalan jquery dasar</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Tutorial JQuery Dasar www.malasngoding.com</h1> <button id="tombol">TOMBOL</button> <div class="box"></div> </body> <script type="text/javascript"> $(document).ready(function(){ $('.tombol').click(function(){ $('.box').toggle(); }); }); </script> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
|
1 2 3 4 5 |
$(document).ready(function(){ $('#tombol').click(function(){ $('.box').toggle(); }); }); |
syntax
|
1 |
$(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
|
1 2 3 |
$('#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.
belajar pengenalan jquery dasar
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 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.
See the Pen qbRqQq by Malas Ngoding (@malasngoding) on CodePen.0
Terima kasih ..
Tutorial Menarik Lainnya
Membuat Pencarian Tanpa Reload Dengan PHP Dan Ajax JQuery
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
Show Hide Form Password Dengan JQuery
Membuat Animasi Form Dengan JQuery
