JQuery Part 7 : Mendapatkan Nilai Dan Value Dengan JQuery

Jquery Yogi Prasetyawan Rabu, Februari 01, 2017 Tidak ada komentar

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

Langsung menuju contoh cara penggunaan fungsi text(), html(), dan value() pada JQuery untuk mendapatkan nilai, element dan value 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(){
        $("#tombol").click(function(){
            var teks = $(".kata").text();
            alert(teks);
        });
    });

Dapat sobat perhatikan pada contoh penulisan fungsi text() JQuery seperti contoh diatas.

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;
}

See the Pen mRzJBz by Yogi Prasetyawan (@bozzgok22) on CodePen.

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(){
        $('#tombol').click(function(){
            var nama = $(".nama").val();
            alert(nama);
        });
    });

Ketik terserah pada form berikut ini dan klk tombol untuk melihat hasil dari ketikan sobat

See the Pen RKePMq by Yogi Prasetyawan (@bozzgok22) on CodePen.

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(){
        $('#tombol').click(function(){
            var nama = $('.nama').attr('alt');
            alert(nama);
        });
    });

atribut alt

<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');

See the Pen Xpxboa by Yogi Prasetyawan (@bozzgok22) on CodePen.

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

Rabu, 01 Februari 2017

JQuery Part 7 : Mendapatkan Nilai Dan Value Dengan JQuery

Tidak ada komentar :

Posting Komentar

Subscribe Dapat Pahala

Mondar - Mandir

Naik Daun

Category

Formulir Kontak