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.
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 8 : Menetapkan nilai dan value dengan JQuery</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Set Function JQuery | www.malasngoding.com</h1> <button id="tombol">KLIK</button> <p class="nama"></p> </body> <script type="text/javascript"> $(document).ready(function(){ $('#tombol').click(function(){ $('.nama').text("belajar pemrogaman web di www.malasngoding.com"); }); }); </script> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body{ font-family: sans-serif; } h1{ text-align: center; } #tombol{ padding:10px; color: #fff; background: #34495E; border: none; } |

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.
1 2 3 |
$('#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.
1 2 |
<button id="tombol">KLIK</button> <p class="nama"></p> |
See the Pen eJgKbO by Malas Ngoding (@malasngoding) on CodePen.
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()
1 |
.html(" letakkan element html yang ingin di tambah di sini "); |
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
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 8 : Menetapkan nilai dan value dengan JQuery</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Set Function JQuery | www.malasngoding.com</h1> <button id="tombol">KLIK</button> <p class="nama"></p> </body> <script type="text/javascript"> $(document).ready(function(){ $('#tombol').click(function(){ $('.nama').html("<div class='kotak'>belajar pemrogaman web di www.malasngoding.com</div>"); }); }); </script> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
body{ font-family: sans-serif; } h1{ text-align: center; } #tombol{ padding:10px; color: #fff; background: #34495E; border: none; } .kotak{ 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
1 |
<div class='kotak'>belajar pemrogaman web di www.malasngoding.com</div> |
sehingga muncul element kotak yang class nya sudah kita setting dengan css menggunakan warna orange dan memiliki text putih. perlu sedikit di ingat bahwa fungsi .html() jquery ini mampu menambahkan element html. perhatikan contoh di bawah
See the Pen NxdzJO by Malas Ngoding (@malasngoding) on CodePen.
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 menetapkan nilai value pada element HTML. pada contoh ini kita akan menetapkan atau mengisi value pada sebuah form saat tombol si klik.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Tutorial belajar JQuery Part 8 : Menetapkan nilai dan value dengan JQuery</title> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Set Function JQuery | www.malasngoding.com</h1> <button id="tombol">KLIK</button> <input type="text" name="nama" class="nama"> <p class="nama"></p> </body> <script type="text/javascript"> $(document).ready(function(){ $('#tombol').click(function(){ $('.nama').val("Malas Ngoding"); }); }); </script> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body{ font-family: sans-serif; } h1{ text-align: center; } .nama{ padding: 9px; font-size: 16pt; } #tombol{ padding:10px; color: #fff; background: #34495E; border: none; } |
perhatikan pada syntax jquery di atas.
1 2 3 |
$('#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.
See the Pen JGEZqR by Malas Ngoding (@malasngoding) on CodePen.
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.
1 |
$('.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
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

