Pada pembahasan kali ini Mendapatkan Nilai Dan Value Dengan JQuery merupakan penjelasan tentang fungsi - fungsi. JQuery untuk mendapatkan nilai, value dan konten JQuery, JQuery memiliki fngsi-fungsi yang sangat mudah digunakan untuk mendapatkan sebuah value,atribut dan lainya dari sebuah element.
Adapun contoh fungsi-fungsi JQuery untuk mendapatkan nilai dan value pada JQuery adalah sebagai berikut
- text()
Adalah fungsi JQuery untuk mendapatkan kontent text pada element HTML - html()
Adalah fungsi JQuery untuk mendapatkan nilai element pada HTML - val()
Adalah fungsi JQuery untuk mendapatkan nilai value dari element HTML - attr()
Adalah fungsi JQuery untuk mendapatkan nilai dan atribut pada element HTML
CARA MENDAPATKAN KONTENT TEXT DENGAN TEXT()
Denan menggunakan fungsi text() pada JQuery ini memungkinkan kita untuk mendapatkan kontent text pada element HTML dengan mudah. Sebenarnya dengan fungsi ini juga bisa menetapan isi konten text. tetapi pada tutorial belajar JQuery kali ini hanya akan dijelaskan tentang cara mendapatkan konten saja. Untuk cara menetapkan nilai dan value pada element HTML akan kita pelajari pada tutorial yang akan datang
Lalu bagaimana cara mendapatkan kontent HTML dengan fungsi text() ? Silahkan sobat perhatikan contoh berikut ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>JQuery Part 7 : Mendapatkan Nilai dan Value</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Get Function JQuery <br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button id="tombol">Klik Disini</button>
<p class="kata">Contoh pertama belajar Nilai & Value JQuery</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: raleway;
}
h1{
text-align: center;
}
#tombol{
padding: 10px;
color: crimson;
background-color: transparent;
border-radius: 5px;
border: 2px solid crimson;
font-weight: bold;
}
#tombol:hover{
background-color: crimson;
color: white;
border: 2px solid crimson;
font-weight: bold;
}
.kata{
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
Perhatikan pada contoh diatas. Terdapat sebuah tombol dan paragraf yang berisi text. Isinya adalah "Contoh pertama belajar Nilai & Value JQuery". Dan dalam penggunaan fungsi text() JQuery ini kita mendapatkan isi konten dari element "kata". tersebut untuk dimasukkan dalam variabel "teks". Dan kemudian menampilkanya dalam fungsi alert(). Fungsi alert adalah fungsi JQuery untuk menampilkan data.
$(document).ready(function(){Dapat sobat perhatikan pada contoh penulisan fungsi text() JQuery seperti contoh diatas.
$("#tombol").click(function(){
var teks = $(".kata").text();
alert(teks);
});
});
CARA MENDAPATKAN ELEMENT HTML DENGAN HTML()
Penggunaan fugsi html() pada JQuery juga sama dengan penggunaan fungsi text() seperti yang sudah dijelaskan diatas. Untuk contoh penggunaan dari fungsi html untuk mendapatkan element html adalah sebagai berikut
index.html
<!DOCTYPE html>
<html>
<head>
<title>JQuery Part 7 : Mendapatkan Nilai dan Value</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Get Function JQuery <br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button id="tombol">Klik Disini</button>
<p class="kata">Contoh pertama belajar Nilai & Value JQuery</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: raleway;
}
h1{
text-align: center;
}
#tombol{
padding: 10px;
color: crimson;
background-color: transparent;
border-radius: 5px;
border: 2px solid crimson;
font-weight: bold;
}
#tombol:hover{
background-color: crimson;
color: white;
border: 2px solid crimson;
font-weight: bold;
}
.kata{
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
CARA MENDAPATKAN NILAI DAN VALUE PADA ELEMENT HTML DENGAN VAL()
Untuk mendapatkan nilai dan value element HTML dengan fungsi val() ini saya akan memberikan contoh sebuah form HTML. Disini saya membuat sebua form yang saya beri tanda dengan claa "nama". Kemudian kita akan mengambil isi value pada form dengan fungsi val() JQuery.
index.html
<!DOCTYPE html>
<html>
<head>
<title>JQuery Part 7 : Mendapatkan Nilai dan Value</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Get Function JQuery <br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<input type="text" name="nama" class="nama">
<button id="tombol">Klik Disini</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
var nama = $(".nama").val();
alert(nama);
});
});
</script>
</body>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
#tombol{
padding: 10px;
color: crimson;
background-color: transparent;
border-radius: 5px;
border: 2px solid crimson;
font-weight: bold;
}
#tombol:hover{
background-color: crimson;
color: white;
border: 2px solid crimson;
font-weight: bold;
}
.nama{
padding: 10px;
font-style: 12pt;
border: 1px solid crimson;
border-radius: 5px 5px 5px 5px;
box-shadow: 1px 1px 1px black;
}
Perhatikan pada contoh diatas. Pada saat tombol diklik maka isi dari form akan di tampilkan. Kenapa bisa seperti itu? Perhatikan pada form,pada class form dengan nama "nama".
<input type="text" name="nama" class="nama">Kemduain mengambil isi pada form tersebut dengan fungsi val() jquery dan kemudian menampilkanya.
$(document).ready(function(){Ketik terserah pada form berikut ini dan klk tombol untuk melihat hasil dari ketikan sobat
$('#tombol').click(function(){
var nama = $(".nama").val();
alert(nama);
});
});
CARA MENDAPATKAN NILAI ATRIBUT PADA ELEMENT DENGAN ATTR()
Fungsi attr() digunakan untuk mendapatkan isi atribut pada element. Untuk fungsi attr() pada JQuery dapat dilihat pada contoh dan penjelasan berikut.
index.html
<!DOCTYPE html>
<html>
<head>
<title>JQuery Part 7 : Mendapatkan Nilai dan Value</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Get Function JQuery <br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<input type="text" name="nama" class="nama" alt="Gagal Login">
<button id="tombol">Klik Disini</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
var nama = $('.nama').attr('alt');
alert(nama);
});
});
</script>
</body>
</html>style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
#tombol{
padding: 10px;
color: crimson;
background-color: transparent;
border-radius: 5px;
border: 2px solid crimson;
font-weight: bold;
}
#tombol:hover{
background-color: crimson;
color: white;
border: 2px solid crimson;
font-weight: bold;
}
.nama{
padding: 10px;
font-style: 12pt;
border: 1px solid crimson;
border-radius: 5px 5px 5px 5px;
box-shadow: 1px 1px 1px black;
}Seperti yang dapat dilihat pada contoh diatas. Kenapa yang muncul adalah "Ganteng" ? Karena kita telah menetapkan nilai atribut yang diambil adalah atribut alt pada form.
$(document).ready(function(){atribut alt
$('#tombol').click(function(){
var nama = $('.nama').attr('alt');
alert(nama);
});
});
<input type="text" name="nama" class="nama" alt="Ganteng">Perhatikan atribut alt pada element class"nama" diatas. Isinya adalah "Ganteng". Sobat bisa mendapatkan nilai dari atribut yang lain sesuai keinginan dengan menetapkannya pada fungsi attr() jquery
var nama = $('.nama').attr('alt');
KESIMPULAN
Bagaimana? Mudah atau susah? Jadi Dengan JQery ini kita dapat memanipulasi nilai dan value HTML seperti yang sudah saya jelaskan diatas dan pada contoh ini saya menggunakan fungsi alert() dan memadukanya dengan fungsi untuk mendapatkan nilai atau value seperti attr() diatas. Ya... sekian tutorial kali ini kita akan berjumpa pada waktu yang akan datang, Sekian Terima Kasih
EmoticonEmoticon