jQuery

Belajar jQuery Part 6 : Cara Mendapatkan Value dan Nilai

Halo salam jumpa kembali di pertemuan yang ke-6 di sesi belajar jQuery. Pada pertemuan ini saya akan mengulas tentang Mendapatkan Nilai dan Value pada jQuery.

jQuery memiliki banyak fungsi sehingga dapat memudahkan untuk mendapatkan sebuah atributvalue dan lainnya dari sebuah element.

Beberapa contoh fungsi jQuery untuk mendapatkan sebuah nilai dan value diantaranya adalah :

  • html
    Fungsi jQuery untuk mendapatkan nilai element pada html
  • text
    Fungsi jQuery untuk mendapatkan kontent text dari element html
  • val
    Fungsi jQuery untuk mendapatkan nilai value dari element html
  • attr
    Fungsi jQuery untuk mendapatkan nilai atribut pada element html

Sekarang kita mulai belajar menggunakan fungsi jQuery diatas untuk mendapatkan sebuah nilai dan value pada element html.

Baca: Chaining Function Pada jQuery


Tutorial Mendapatkan Konten Text dengan text()

Dengan menggunakan fungsi text(), kita bisa lebih mudah untuk mendapatkan konten text pada element html. Sebenarnya fungsi ini juga bisa menetapkan isi konten text, berhubungan kita sedang membahas cara mendapatkan nilai dan value, jadi yang akan kita pelajari hanya mendapatkan konten text saja.

Lalu bagaimana cara mendapatkan konten html dengan fungsi text()? Nah dibawah ini saya sudah menulis contoh kode programnya, silahkan tulis ulang di text editor teman – teman serta pahami kembali.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 6 : Mendapatkan Value dan Nilai</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Get Function JQuery | www.irvannurfazri.com</h1>	
	<button id="tombol">KLIK</button>
	<p class="kata">Belajar jQuery di www.irvannurfazri.com Semangat!!</p>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			var teks = $(".kata").text();
			alert(teks);
		});		
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

#tombol{
	padding:10px;
	color: #fff;
	background: #34495E;
	border: none;
}

Hasilnya.

Mendapatkan konten text html - #IRVANGEN
Mendapatkan konten text html – #IRVANGEN

Perhatikan kode program diatas, tepatnya pada bagian ini.

$('#tombol').click(function(){
			var teks = $(".kata").text();
			alert(teks);

Disini kita dapat simpulkan, jika id tombol di klik, maka akan memanggil sebuah variabel kata.

Dalam penggunaan fungsi text() kita mendapatkan konten text dari element kata dan kemudian ditampilkan sebagai alert. Fungsi alert adalah fungsi untuk menampilkan data

Isi dari variabel kata terdapat pada.

<p class="kata">Belajar jQuery di www.irvannurfazri.com Semangat!!</p>

Syntax dibawah ini memerintahkan untuk mendapatkan konten text dari element class kata

var teks = $(".kata").text();

Tutorial Mendapatkan element HTML dengan Fungsi html()

Fungsi html hampir sama dengan fungsi text() seperti apa yang sudah dijelaskan diatas. Lalu bagaimana untuk mendapatkan element HTML? Silahkan tulis kembali contoh kode program yang sudah saya buat dibawah ini.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 6 : Mendapatkan Value dan Nilai</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Get Function JQuery | www.irvannurfazri.com</h1>	
	<button id="tombol">KLIK</button>
	<p class="kata">Belajar jQuery di www.irvannurfazri.com Semangat</p>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			var teks = $(".kata").html();
			alert(teks);
		});		
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

#tombol{
	padding:10px;
	color: #fff;
	background: #34495E;
	border: none;
}

Sudah Irvan sebutkan diatas, bahwa penggunaan fungsi html dan text sama saja, sedikit perbedaan hanya terdapat pada bagian ini.

html()

var teks = $(".kata").html();

text()

var teks = $(".kata").text();

Tutorial Mendapatkan Nilai Value Pada Element HTML Dengan Val()

Cara mendapatkan nilai value dengan fungsi val() saya akan membuat contoh dengan form HTML. Saya membuat sebuah form yang diberi tanda dengan class input_nama kemudian kita mengambil isi value pada form dengan fungsi val(). Langsung saja teman – teman tulis kode programnya dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 6 : Mendapatkan Value dan Nila</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Get Function JQuery | www.irvannurfazri.com</h1>	
	<input type="text" name="input_nama" class="input_nama">
	<button id="tombol">KLIK</button>	
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			var input_nama = $(".input_nama").val();
			alert(input_nama);
		});		
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.input_nama{
	padding: 9px;
	font-size: 12pt;
}

#tombol{
	padding:10px;
	color: #fff;
	background: #34495E;
	border: none;
}

Hasilnya..

Mendapatkan nilai value dengan val() jQuery - #IRVANGEN
Mendapatkan nilai value dengan val() jQuery – #IRVANGEN

Setelah kita isi form dan menekan tombol klik langsung tampil sebuah alert, mengapa bisa seperti itu? Pada bagian form kita membuat sebuah class dengan nama “input_nama

<input type="text" name="input_nama" class="input_nama">

kemudian mengambil isi form tersebut dengan fungsi val() dan langsung menampilkannya.

$('#tombol').click(function(){
	var nama = $(".input_nama").val();
	alert(input_nama);
});

Tutorial Mendapatkan Nilai Atribut pada Element dengan Fungsi attr()

Fungsi attr digunakan untuk mendapatkan isi attribut pada element html. Contoh untuk penggunaan attr sudah saya tulis kode programny dibawah ini.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 6 : Mendapatkan Value dan Nilai</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Get Function JQuery | www.irvannurfazri.com</h1>	
	<input type="text" name="input_nama" class="input_nama">
	<button id="tombol">KLIK</button>	
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			var input_nama = $(".input_nama").attr('type');
			alert(input_nama);
		});		
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.nama{
	padding: 9px;
	font-size: 12pt;
}

#tombol{
	padding:10px;
	color: #fff;
	background: #34495E;
	border: none;
}

Hasilnya..

Mendapatkan nilai attribut dengan attr() jQuery - #IRVANGEN
Mendapatkan nilai attribut dengan attr() jQuery – #IRVANGEN

Pada gambar diatas mengapa yang muncul text? Karena disini kita telah menetapkan nilai atribut yang diambil adalah atribut type pada form

var nama = $(".input_nama").attr('type');

atribut type.

<input type="text" name="input_nama" class="input_nama">

Atribut type yang ada pada element class “input_nama” diatas isinya adalah, text. Sehingga data yang diambil adalah “text“. Kamu bisa mengambil atribut lain sesuai dengan keinginan dengan menetapkan pada fungsi attr() jQuery.

var nama = $(".input_nama").attr('type');

Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Belajar Mendapatkan Nilai dan Value pada jQuery. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.

Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.id Instagram : ig.com/irvan_gen Profile

Leave a Reply

Your email address will not be published. Required fields are marked *