Menetapkan Nilai Dengan JQuery

Menetapkan Nilai Dengan JQuery

50

Jika pada materi sebelumnya kita telah mempelajari bagaimana caranya mengambil nilai data dari elemen HTML menggunakan JQuery, maka pada materi kali ini, kita akan mempelajari cara untuk mensetting / menetapkan nilai pada elemen HTML dengan JQuery.

Sebenarnya, cara untuk mensetting nilai pada elemen adalah sama seperti ketika kita ingin mendapatkan nilai dari suatu elemen, yakni menggunakan method val(), html(), text(), dan attr(). Perbedaanya, jika ketika kita ingin mendapatkan nilainya kita tidak perlu menuliskan parameternya, sedangkan ketika ingin mensetting nilainya kita juga perlu mensetting nilai parameternya pada ke 4 method di atas. Parameter inilah yang nantinya akan menjadi nilai bagi elemen tersebut.

Contoh, ketika mensetting nilai pada input form, maka penulisan method val() – nya adalah : val( 21 ) / val(‘hallo dunia’) dan sebagainya.

Menambah elemen baru pada jquery dengan method html()

Untuk menambah konten baru dengan fungsi elemennya juga, anda dapat menggunakan method html(). Contoh :

XHTML

<!DOCTYPE html>

<html>

<head>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <div></div>

  <button>klik saya</button>

  

  <script>

    $(function(){

      $("button").click(function(){

        $("div").html("<p><a href="https://www.lautankode.com">Lautan Kode</a></p>");

      });

    });

  </script>

</body>

</html>

Di bawah ini adalah hasilnya ketika button sudah di klik. Dimana elemen <a> juga dapat berfungsi sebagai text link yang akan membuka halaman website RakitAplikasi.

metenapkan nilai pada jquery


Memberi nilai text menggunakan jquery dengan method text()

Sedangkan, jika anda hanya ingin mensetting kontennya saja tanpa fungsionalitas dari elemennya. Maka anda dapat menggunakan method text(). Contoh :

XHTML

<!DOCTYPE html>

<html>

<head>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <p>Teks lama</p>

  <button>klik saya</button>

  

  <script>

    $(function(){

      $("button").click(function(){

        $("p").text("Ini adalah teks baru");

      });

    });

  </script>

</body>

</html>

Dan di bawah ini adalah hasilnya, dimana ketika anda klik button di bawahnya, maka tulisan “Text Lama” akan digantikan dengan kalimat “Ini adalah teks baru”.

fungsi method text pada jquery


Memberi nilai pada JQuery menggunakan method val()

Dan jika anda ingin mensetting nilai ke dalam sebuah input form, method yang harus anda gunakan adalah method val(). Contoh :

XHTML

<!DOCTYPE html>

<html>

<head>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <form>

    Nilai Variable X <input type="text" name="x"><br>

    Nilai Variable Y <input type="text" name="y"><br>

  </form>

  <br>

  <button id="x">Set Variable X</button>

  <button id="y">Set Variable Y</button>

  

  <script>

    $(function(){

      $("button#x").click(function(){

        $("input[name=x]").val( 50 );

      });

      $("button#y").click(function(){

        $("input[name=y]").val( 100 );

      });

    });

  </script>

</body>

</html>

Gambar di bawah ini adalah hasilnya, dimana ketika anda klik kedua button di bawahnya, maka secara otomatis nilai akan tertambahkan ke dalam input form, yakni input variable x dan y.

fungsi method val() pada jquery


Memasukan nilai atribut pada JQuery dengan method attr()

Terakhir, jika anda ingin mensetting nilai sebuah atribut yang dimiliki oleh sebuah elemen. Maka, method yang harus anda gunakan adalah method attr(). Contoh :

XHTML

<!DOCTYPE html>

<html>

<head>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <a href="https://www.lautankode.com">Lautan Kode</a>

  <br><br>

  <button>Set Href Target</button>

  

  <script>

    $(function(){

      $("button").click(function(){

        $("a").attr("target", "_blank");

      });

    });

  </script>

</body>

</html>

Dan di bawah ini adalah hasilnya, namun saat kondisi tombol button belum di klik.

fungsi method attr() pada jquery

Sedangkan di bawah ini adalah kondisi ketika tombol button sudah di klik, dimana dapat anda lihat terdapat atribut target yang dimasukan ke dalam elemen <a>, dan bandingkan saja dengan gambar sebelumnya.

cara menginput nilai attribut


Demikian tutorial dari Menetapkan Nilai Dengan JQuery.

Keywords: nilai jquery, elemen nilai jquery

Share: