Fungsi text(), val(), dan html() merupakan tiga fungsi yang berguna pada jQuery untuk melakukan modifikasi pada tulisan di elemen HTML.
Fungsi text()
Fungsi text() digunakan untuk mengganti tulisan yang berada di elemen html seperti di heading atau di paragraf.
Contoh ketika tombol Replace ditekan, maka tulisan heading akan berubah.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery Tutorial 6</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h2 class="dope">You'll learn how to replace me</h2> <input type="button" value="Replace" id="btn_main" /> <input type="button" value="Change HTML" id="btn_new" /> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/insert.js"></script> </body> </html> |
insert.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#btn_main").on("click", function(){ $(".dope").text("This is new replacement text"); $("#btn_main").val("Double Click me"); }); $("#btn_main").on("dblclick", function(){ $(".dope").text("You'll learn how to replace me"); $("#btn_main").val("Replace"); }); $("#btn_new").on("click", function(){ $(".dope").html('<b class="cool"> Hey There This is HTML </b>'); }); |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.timestwo { font-size: 2em; } .colorful { color: pink; } .cool { font-size: 2em; color: green; } |
Fungsi val()
Fungsi val() digunakan untuk mengganti tulisan yang berada di dalam button atau text field, yang tidak bisa menggunakan fungsi text().
Ketika tombol Replace ditekan, tulisan di dalam button tersebut akan berubah jadi “Double Click Me”, dan ketika tombol tersebut di double click, tulisannya akan berubah lagi menjadi “Replace”.
Fungsi val() juga bisa digunakan untuk mengambil nilai. Misalnya dengan fungsi alert : alert($(“#btn_main”).val()) akan menampilkan tulisan yang berada di button ke layar.
Fungsi html()
Fungsi html() bisa digunakan untuk memodifikasi html termasuk dengan class css nya.
Dari insert.js di atas, ketika tombol “Change HTML” ditekan, maka isi textnya akan berubah dan class nya mengikuti apa yang ada di style.css
