tRikSonic
Tema
Home / Tutorial jQuery
Menampilkan konten pada kategori Tutorial jQuery

Contoh Penerapan jQuery data Attribute

Terakhir diperbarui : 22 Mei 2018 - 10.05
Penerapan jQuery menggunakan attribute data TrikSonic - Contoh penerapan jquery data attribute. Artikel ini saya buat karena ada pertanyaan kepada saya melalui chat di Facebook saya. Persiapan : Pastikan library javascript jQuery sudah terpasang dengan benar, untuk tutorial ini saya menggunakan version 1.12.4 <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script> Contoh Penerapan jQuery menggunakan attribute data Contoh dengan mengambil data attribute < button class = "btn" data-tes = "111111" > Klik saya </ button > < button class = "btn" data-tes = "222222" > Klik saya </ button > < script > $( function ( ) { $( ".btn" ).click( function ( ) { var $ this = $( this ).attr( "data-tes" ); alert($ this ); //kode selanjutnya... }); }); </ script > <!DOCTYPE html> <html> ...
Baca selengkapnya

Fungsi jQuery toggle (), Belajar jQuery

Terakhir diperbarui : 23 Mei 2018 - 15.53
Tutorial jquery toggle() jquery toggle() digunakan untuk menyembunyikan dan menampilkan element (1 perintah yang mempunyai 2 fungsi) .hide() dan .show() dengan metode interaktif yang dilakukan oleh user, baik itu dengan metode klik fungsi, mouse fungsi, tombol fungsi pada komputer. Syntax: $( selector ).toggle(speed,callback); Contoh penerapan jquery toggle() Contoh 1 : $( function ( ) { $( "button" ).click( function ( ) { $( "#demo" ).toggle(); }); }); <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> .box { background: #ffbccb; padding: 15px; border: 1px solid gainsboro; border-radius: 4px; margin: 10px 0px; } </style> </head> <body> <button>Toggle DIV</button> <div class="box" id='demo'>Tekan tombol diatas</div> <script src="https://ajax.googleapis.com/a...
Baca selengkapnya

Fungsi jQuery hide (), Belajar jQuery

Terakhir diperbarui : 23 Mei 2018 - 15.56
Tutorial jquery hide() Fungsi hide() pada jQuery - jquery hide() digunakan untuk menyembunyikan atau menghilangkan element yang terlihat pada browser dengan metode interaktif yang dilakukan oleh user, baik itu dengan metode klik fungsi, mouse fungsi, tombol fungsi pada komputer dll. Syntax: $( selector ) .hide ( speed , callback ); Contoh penerapan jquery hide() Contoh 1 : $( function ( ) { $( ".hide" ).click( function ( ) { $( "#demo" ).hide(); }); }); <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> #demo { background: #ffbccb; padding: 15px; border: 1px solid gainsboro; border-radius: 4px; margin: 10px 0px; } </style> </head> <body> <button class="hide">hide</button> <div id="demo"> Tekan tombol Run untuk menyegarkan editor </div> <script src="https://a...
Baca selengkapnya

Fungsi jQuery show (), Belajar jquery

Terakhir diperbarui : 23 Mei 2018 - 15.59
Tutorial jquery show() Fungsi show() pada jQuery - jquery show() digunakan untuk menampilkan element yang tersembunyi dengan metode interaktif yang dilakukan oleh user, baik itu dengan metode klik fungsi, mouse fungsi, tombol fungsi pada komputer dll. Syntax: $( selector ) .show ( speed , callback ); Contoh penerapan jquery show() Contoh 1 : $( function ( ) { $( ".show" ).click( function ( ) { $( "#demo" ).show(); }); }); <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> #demo { background: #ffbccb; padding: 15px; border: 1px solid gainsboro; border-radius: 4px; margin: 10px 0px; } </style> </head> <body> <button class="show">show</button> <div id='demo' style="display:none;"> Tekan tombol Run untuk menyegarkan editor </div> <script src="https://aja...
Baca selengkapnya
BerandaPostingan Lama