Kali ini saya akan
membahas tentang pemrograman web yaitu mengambil nilai html dengan jquery. JQuery
adalah sebuah pustaka JavaScript kecil bersumber terbuka yang menekankan pada
interaksi antara JavaScript dan HTML. jQuery merupakan
javascript
Library yaitu
kumpulan kode/fungsi
Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat
kode Javascript. Secara standar,
apabila
kita membuat kode Javascript, maka diperlukan kode yang cukup panjang,
bahkan terkadang sangat sulit dipahami. Dengan jQuery akan
menyederhanakan
kode Javascript. Hal ini sesuai dengan slogannya “Write
less, do more” cukup
tulis sedikit, tapi bisa melakukan banyak hal.
Ada beberapa alasan mengapa lebih baik
menggunakan jQuery daripada library lainnya,
antara
lain:
·
Kompatibel dengan hampir seluruh browser
·
jQuery telah digunakan oleh
website-website raksasa
·
Kompatibel dengan seluruh versi CSS
(dari CSS 1 sampai CSS 3)
·
Didukung oleh banyak komunitas
·
Disupport oleh plugin yang lengkap
·
Filenya hanya satu dan ukurannya relatif
kecil, sekitar 20kb
·
Open source atau Free
·
jQuery lebih diminati oleh para
developer web saat ini
Mengambil nilai HTML dengan jQuery bisa
dilakukan dengan beberapa Method yaitu text(), html(), val(). Sebelum membuat
program jQuery sebaiknya download terlebih dahulu jQuery di http://jquery.com
atau bisa menggunakan pemanggilan secara online.
1.
Mengambil nilai HTML dengan menggunakan
method text()
<html>
<head>
<meta
charset="UTF-8">
<title>Belajar jQuery</title>
<script
src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function()
{
$("#tombol").click(function()
{
var nilai =
$("#paragraf").text();
alert(nilai);
})
});
</script>
</head>
<body>
<p id="paragraf">
Belajar <em> mengambil
nilai HTML</em> dengan <em>jQuery</em>
</p>
<button
id="tombol">Tampilkan text</button>
</body>
</html>
|
Output :
2.
Mengambil nilai HTML dengan menggunakan
method html()
Hasil dari method html()
akan tetap mempertahankan tag HTML yang ada di dalam element HTML tersebut.
<html>
<head>
<meta
charset="UTF-8">
<title>Belajar
jQuery</title>
<script
src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function()
{
$("#tombol").click(function()
{
var
nilai = $("#paragraf").html();
alert(nilai);
})
});
</script>
</head>
<body>
<p
id="paragraf">
Belajar
<em> mengambil nilai HTML</em> dengan <em>jQuery</em>
</p>
<button
id="tombol">Tampilkan text</button>
</body>
</html>
|
Output:
3.
Mengambil nilai HTML dengan menggunakan
method val()
<html>
<head>
<meta
charset="UTF-8">
<title>Belajar jQuery</title>
<script
src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function()
{
$("#tombol").click(function()
{
var nilai =
$("#nama").val();
alert(nilai);
})
});
</script>
</head>
<body>
Nama: <input
type="text" id="nama" placeholder="isi
text">
<button
id="tombol">Tampilkan text</button>
</body>
</html>
|
Output :
4.
Mengambil nilai HTML dengan form select
ke jQuery
<html>
<head>
<meta
charset="UTF-8">
<title>Belajar
jQuery</title>
<script
src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function()
{
$("#tombol").click(function()
{
var
nilai = $("#kota").val();
alert(nilai);
})
});
</script>
</head>
<body>
Pilih
Buah :
<select
id="kota" name="kota">
<option
value="Mangga">Mangga</option>
<option
value="Apel">Apel</option>
<option
value="Jeruk">Jeruk</option>
<option
value="Pepaya">Pepaya</option>
</select>
<button
id="tombol">Tampilkan Text</button>
</body>
</html>
|
Output :
5.
Mengambil nilai HTML dengan form
checkbox ke jQuery
<html>
<head>
<meta
charset="UTF-8">
<title>Belajar jQuery</title>
<script
src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function()
{
$("#tombol").click(function()
{
var nilai1 =
$("#jQuery:checked").val();
var nilai2 =
$("#CSS:checked").val();
var nilai3 =
$("#PHP:checked").val();
alert(nilai1+'
'+nilai2+' '+nilai3);
})
});
</script>
</head>
<body>
Saya sedang belajar:
<input type="checkbox" id="jQuery"
value="belajar jQuery"> jQuery
<input type="checkbox" id="CSS"
value="belajar CSS"> CSS
<input type="checkbox" id="PHP"
value="belajar PHP"> PHP
<br><br>
<button id="tombol">Tampilkan Text</button>
</body>
</html>
|
Output :
Sekian tutorial mengambil nilai HTML dengan
jQuery dari saya. Terima Kasih. Semoga bermanfaat.
