JQuery Part 8 : Menetapkan Nilai Dan Value JQuery
MENETAPKAN NILAI DAN VALUE JQUERY
Pada tutorial sebelumnya saya sudah menjelaskan tentang Mendapatkan Nilai Dan Value Dengan JQuery. Sekarang kita akan menetapkan atau mengisi nilai dan value pada element HTML menggunakan fungsi yang sama seperti sebelumnya yaitu text(), html() dan val().
Fungsi .text(),html() dan val() juga memiliki kegunaan mengisi suatu nilai atau value pada element HTML selain kemampuanya mendapatkan nilai dan value HTML. Cara menetapkan nilai dan value pada HTML tidaklah terlalu susah. Kita tinggal . Sobat hanya perlu memasukkan nilai atau element yang ingin sobat didalam parameter masing-masing fungsi yang sudah saya sebutkan diatas
CARA MENETAPKAN KONTEN DENGAN FUNGSI .TEXT() JQUERY
Untuk cara konten pada element HTML dengan menggunakan fungsi tetx() silahkan perhatikan contoh berikut
index.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery Part 8 : Menetapkan Nilai dan Value 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<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button id="tombol">Klik Disini</button>
<p class="nama"></p>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.nama').text("Selamat Anda Mendapatkan 1M Rupiah")
});
});
</script>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
#tombol{
color: crimson;
background: transparent;
border: 1px solid crimson;
padding: 10px;
border-radius: 5px;
}
#tombol:hover{
color: white;
background: crimson;
border: 1px solid crimson
}
.kotak{
background: lightgrey;
width: 500px;
padding: 10px;
border-style: solid;
border-bottom-color: red;
border-left: transparent;
border-right: transparent;
border-top: transparent;
}
.nama{
border-radius: 5px;
border: 1px solid crimson;
padding: 10px;
} 
Perhatikan pada contoh diatas .text "Selamat Anda Mendapatkan 1M Rupiah" pada element paragaraf setelah tombol diklik. Karena pada event klik tombol saya menambahkan text tersebut pada element class nama.
$('#tombol').click(function(){
$('.nama').text("Selamat Anda Mendapatkan 1M Rupiah")
});
Sehingga text "Selamat Anda Mendapatkan 1M Rupiah" Akan ditambahkan pada element class nama.
<button id="tombol">Klik Disini</button>
<p class="nama"></p>
CARA MENAMBAH ELEMENT HTML DENGAN FUNGSI .HTML() JQUERY
Menambahkan element HTML dengan fungsi .html() JQuery juga sama seperti contoh cara penggunaan fungsi text(). Perbedaanya 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 diletakkan atau isi di dalam parameter fungsi .html()
.html("Letakkan element HTML yang ingin ditambah disini")Penggunaanya tidak terlalu susah. perhatikan pada contoh penjelasan fungsi .html() jquery berikut ini
index.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery Part 8 : Menetapkan Nilai dan Value 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<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button id="tombol">Klik Disini</button>
<p class="nama"></p>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.nama').text("Selamat Anda Mendapatkan 1M Rupiah")
});
});
</script>
</html>
style.css
Perhatikan pada contoh diatas. Pada saat tombol diklik kita menambahkan element HTML.
<div class='kotak'>Selamat Anda Mendapatkan Uang Tunai Sebesar 1M Rupiah</div>Sehinggal muncul element "kotak" yang classnya sudah saya setting dengan css menggunakan warna abu-abu dan memiliki border. Perlu sedikit di ingat bahwa fungsi .html() jquery ini mampu menambahkan element html. Perhatikan contoh dibawah
CARA MENAMBAHKAN VALUE HTML DENGAN FUNGSI .VAL() JQUERY
Cara penulisan dan penggunaanya masih sama dengan penggunaan fungsi text() dan html() pada jquery . Hanya saja yang membedakan disini ialah fungsi val() di gunakan untuk mendapatkan nilai value pada element HTML. Pada contoh ini kita akan menetapkan atau mengisi value pada sebuah form saat tombol diklik.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery Part 8 : Menetapkan Nilai dan Value 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<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button id="tombol">Klik Disini</button>
<input type="text" name="nama" class="nama"></input>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.nama').val("Uang Tunai 1M Rupiah");
});
});
</script>
</html>style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
#tombol{
color: crimson;
background: transparent;
border: 1px solid crimson;
padding: 10px;
border-radius: 5px;
}
#tombol:hover{
color: white;
background: crimson;
border: 1px solid crimson
}
.kotak{
background: lightgrey;
width: 500px;
padding: 10px;
border-style: solid;
border-bottom-color: red;
border-left: transparent;
border-right: transparent;
border-top: transparent;
}
.nama{
border-radius: 5px;
border: 1px solid crimson;
padding: 10px;
}Perhatikan pada syntax JQuery diatas.
$('#tombol').click(function(){Kita membuat intruksi bahwa ketika event klik terjadi pada tombol maka form yang memiliki class nama akan diisi dengan value "Uang Tunai 1M Rupiah" . Lihat pada contoh dibawah ini. Untuk menetapkan value dengan val() silahkan coba klik pada tombol berikut
$('.nama').val("Uang Tunai 1M Rupiah");
});
Dan jika ingin mengosongkan value pada sebuah form. Maka sobat bisa menetapkan value element tersebut dengan cara mengosongkan parameter fungsi val(). Seperti contoh berikut
$('.nama').val("");
KESIMPULAN
Jadi kesimpulan dari penjelasan tentang tutorial menetapkan isi dan value dengan JQuery ini adalah fungsi .text() JQuery ini digunakan untuk menetapkan html, html() digunakan untuk menetapkan element berbentuk HTML, dan val() untuk menetapkan nilai value pada element HTML.
Tidak ada komentar :
Posting Komentar