#JQuery - #JQuery Dasar

Belajar JQuery Part 8 : Menetapkan Nilai dan Value dengan JQuery

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

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.

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 8 : Menetapkan nilai dan value dengan JQuery</title>

</head>

<body>

<h1>Set Function JQuery | www.malasngoding.com</h1>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.nama').text("belajar pemrogaman web di www.malasngoding.com");

});

</script>

</html>

style.css

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.

$('#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.0

Referensi source code untuk belajar

Source Code Sosial Media Dengan Notifikasi Real Time PHP PDO MySQLi & Ajax

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

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 8 : Menetapkan nilai dan value dengan JQuery</title>

</head>

<body>

<h1>Set Function JQuery | www.malasngoding.com</h1>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.nama').html("<div class='kotak'>belajar pemrogaman web di www.malasngoding.com</div>");

});

</script>

</html>

style.css

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.0

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

<!DOCTYPE html>

<html>

<head>

<title>Tutorial belajar JQuery Part 8 : Menetapkan nilai dan value dengan JQuery</title>

</head>

<body>

<h1>Set Function JQuery | www.malasngoding.com</h1>

</body>

$(document).ready(function(){

$('#tombol').click(function(){

$('.nama').val("Malas Ngoding");

});

</script>

</html>

style.css

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.

$('#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.0

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

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.