12181632_Latihan jQuery_Desain Web

<!--Cara 1 Dengan Method Text-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Latihan JQuery</title>
<script src="jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$("#tombol").click(function() {
			var nilai = $("#paragraf").text();
			alert(nilai);
		})
	});
</script>
</head>
<body>
<p id="paragraf">
	Sedang Belajar <em>jQuery</em> di <b>Matakuliah Desain Web...</b>
</p>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

<!--Cara 2 Dengan Method html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Latihan JQuery</title>
<script src="jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$("#tombol").click(function() {
			var nilai = $("#paragraf").html();
			alert(nilai);
		})
	});
</script>
</head>
<body>
<p id="paragraf">
	Sedang Belajar <em>jQuery</em> di <b>Matakuliah Desain Web...</b>
</p>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

<!--Cara 3 Dengan Method val-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Latihan JQuery</title>
<script src="jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$("#tombol").click(function() {
			var nilai = $("#nama").val();
			alert(nilai);
		})
	});
</script>
</head>
<body>
Nama : <input type="text" id="nama" value="Desain Web...">
<button id="tombol">Ambil Mata Kuliah</button>
</body>
</html>

<!--Mengambil Nilai Pada elemen <select>-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Latihan JQuery</title>
<script src="jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$("#tombol").click(function() {
			var nilai = $("#kota").val();
			alert(nilai);
		})
	});
</script>
</head>
<body>
Pilih Kota :
<select id="kota" name="kota">
	<option value="jakarta">Jakarta</option>
	<option value="bandung">Bandung</option>
	<option value="bogor">Bogor</option>
</select>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

<!--Mengambil Nilai Pada checkbox-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Latihan JQuery</title>
<script src="jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$("#tombol").click(function() {
			var nilai1 = $("#bandeng:checked").val();
			var nilai2 = $("#cakalang:checked").val();
			var nilai3 = $("#tuna:checked").val();
			alert (nilai1+' '+nilai2+' '+nilai3);
		})
	});
</script>
</head>
<body>
Pilih Ikan :
	<input type="checkbox" id="bandeng" value="bandeng"> Ikan Bandeng
	<input type="checkbox" id="cakalang" value="cakalang"> Ikan Cakalang
	<input type="checkbox" id="tuna" value="tuna"> Ikan Tuna
<br><br>
<button id="tombol">Ambil Nilai</button>
</body>
</html>