Mendapatkan Nilai Dengan JQuery

Pada tutorial kali ini akan membahas sebuah cara untuk mendapatkan nilai dengan JQuery. Nilai yang diambil adalah nilai yang dimiliki sebuah elemen.

Dalam halaman website adakalanya kita sebagai seorang Developer ingin mengambil nilai yang ada pada halaman website tersebut untuk di olah kembali sehingga menghasilkan data baru yang di inginkan. Dalam hal ini JQuery sudah menyediakan method khusus untuk mendapatkan nilai dari sebuah elemen, yakni :

  • method html(), digunakan untuk mendapatkan atau mensetting konten dari elemen yang dipilih termasuk tag HTML tersebut.
  • Method text(), digunakan untuk mendapatkan atau mensetting text dari elemen terpilih.
  • Method val(), digunakan untuk mendapatkan atau mensetting nilai dari form control.

Mendapatkan konten dengan method html()

Dengan method html() anda dapat mengambil elemen HTML beserta kontennya dan juga tag yang ada di dalam elemen tersebut. Misal terdapat elemen <p> pada HTML, dan di dalam elemen <p> ini juga terdapat elemen <a>. Maka elemen <a> ini juga akan terambil. Contoh :

Di bawah ini adalah hasilnya, yakni ketika tombol button di klik.

fungsi method html pada jquery

Di bawah ini saya berikan contoh Live Preview nya, bisa anda edit – edit sendiri :

See the Pen
Fungsi Method HTML Pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan konten dengan method text()

Output yang dihasilkan dari method ini adalah tipe data String. Yakni konten yang berada di dalam elemen tersebut. Contoh, ada sebuah elemen <p>, dan di dalam elemen ini terdapat kalimat “Hallo Dunia”, maka konten yang akan menjadi outputnya adalah kalimat “Hallo Dunia” ini.

Saya akan menggunakan source code sebelumnya, yakni dari source code method html(), agar anda tau perbedaannya. Namun dalam hal ini saya hanya merubah method – nya saja. Yakni, dari :

menjadi

Berikut source code lengkapnya :

Dan di bawah ini adalah outputnya, yakni ketika tombol button text() di klik.

fungsi method text pada jquery

Dan berikut contoh Live Previewnya :

See the Pen
Fungsi Method Text Pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan nilai dengan method value()

Agar kita dapat mengambil nilai yang ada pada sebuah input form, method yang harus digunakan adalah berbeda dengan method html() atau text(), namun method yang digunakan adalah method value(), karena bisa jadi nilai dari data yang diambil itu, bertipe data integer.

Berikut contoh source codenya :

Dan di bawah ini adalah outputnya :

mendapatkan nilai dengan method get

Jika anda klik tombol val() maka akan muncul kotak dialog seperti ini :

alert pada jquery

Live Preview :

See the Pen
Fungsi method val() pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan nilai atribut dari elemen dengan method attr()

Terakhir, dengan JQuery kita juga dapat mengambil nilai dari attribute yang dimiliki oleh sebuah elemen. Untuk mengambil nilai atributnya, method JQuery yang dapat anda gunakan adalah method attr().

Berikut outputnya :

mendapatkan nilai attribut elemen

Dan berikut Live Previewnya :

See the Pen
Mendapatkan nilai atribut elemen dengan JQuery
by Lautankode (@lautankode)
on CodePen.


Demikian tutorial dari Mendapatkan Nilai Dengan JQuery.

Jika ada pertanyaan lebih lanjut, silahkan kirim komentar.

Leave a comment

Your email address will not be published. Required fields are marked *

2 thoughts on “Mendapatkan Nilai Dengan JQuery”

× Contact Us