Tutorial JQUERY Part 2 : Function Dasar untuk Mengambil/Mengembalikan Nilai Jquery dan html

Artikel kali ini akan membahas berbagai jenis function dasar yang dimiliki oleh jQuery. JQuery memilik beberapa function yang berguna untuk mempermudah kita di dalam mengakses elemen dan atribut html. Berikut beberapa function dasasr yang dimili oleh jQuery:

text() => Mendapatkan nilai dari atau untuk html
html() => Mendapatkan nilai element dari html.
val()=> Mendapatkan nilai value dari element html
atrr() => Mendapatkan nilai attribut dari element html

Oke mari kita kupas satu persatu dari masing-masing function diatas. Namun sebelumnya pastikan anda sudah memahami dasar penulisan jquery. Silahkan kunjungi kembali artikel Dasar-dasar jQuery di pembahasan sebelumnya.

1. Function text()

Function text() digunakan untuk mendapatkan isi dari berupa karakter yang dimiliki oleh elemen html atau bisa juga untuk merubah isi dari elemen html. Maksudnya apa? Contoh sebuah elemen html <p>..</p>. Element tersebut memiliki konten yang kosong. Nah isi dari konten yang akan di set oleh function text. Perhatikan contohnya:

<head>
  <title>Belajar jQuery Barintek</title>
  <script src="jquery.3.6.3.js"></script>
</head>
<body>
  <h1>selamat Belajar</h1>
  <p id="paragraf"></p>
</body>
<script>
  $(document).ready(function () {
    $("#paragraf").text("Sedang Belajar jQuery di BARINTEK");
  });
</script>

Jalankan program dengan browser kesayangan anda. Sekarang akan tampil nilai text "Sedang Belajar jQuery di BARINTEK" di element <p>. sedangkan $("#paragraf") merupakan identitas dari element <P>. Perintah jQuaery diatas memberikan perintah agar element P di isi dengan text yagn ada di Jquery.

Function html()

Function html() di jQuery hampir sama kegunaannya dengan function text() yang telah dibahas di atas. Berikut contohnya.

<head>
  <title>Belajar jQuery Barintek</title>
  <script src="jquery.3.6.3.js"></script>
</head>
<body>
  <h1>selamat Belajar</h1>
  <p id="paragraf"></p>
</body>
<script>
  $(document).ready(function () {
    $("#paragraf").html("Sedang Belajar jQuery di Barintek");
  });
</script>

Jalankan program dan hasilnya masih terlihat sama dengan function text().

Function val()

Function val() merupakan function yang bertujuan untuk mendapatkan nilai value dari element html. Nilai value terdapat pada element input di html. Jadi untuk memahami tentang function ini kita harus memahami tentang prinsip from input html. Berikut contohnya:

<head>
  <title>Belajar jQuery Barintek</title>
  <script src="jquery.3.6.3.js"></script>
</head>
<body>
  <h1>selamat Belajar</h1>
  <input type="text" class="input" />
</body>
<script>
  $(document).ready(function () {
      $(".input").val('Input Nama');
  });
</script>

Function val() akan mengembalikan nilai yang ada di dalam jQuerry ke dalam value yang ada di html. Jadi seakan-akan form input kita tulis seperti berikut:

Function atrr()

Function satu ini hampir sama dengan function val(), bedanya fungsi attr()yang diambil adalah nilai dari sebuah attribut. Berikut contohnya:

<head>
  <title>Belajar jQuery Barintek</title>
  <script src="jquery.3.6.3.js"></script>
</head>
<body>
  <h1>selamat Belajar</h1>
  <input type="text" class="input"/>
</body>
<script>
  $(document).ready(function () {
        $(".input").attr("type");
  });
</script>

Jika dijalankan akan tampil tipe dari element input. Nilai dari type adalah text.

Itulah sederan function dasar yang dimiliki oleh jQuery yang berguna untuk mengambil dan menengembalikan nilai ke halaman html.

Tutorial JQUERY Part 2 : Function Dasar untuk Mengambil/Mengembalikan Nilai Jquery dan html

Baringin

Post a Comment

PEMOGRAMAN DASAR: Jenis-Jenis Operator dalam Bahasa Pemrograman (Bag 8)

Made with Love by

Contact form

Tutorial JQUERY Part 2 : Function Dasar untuk Mengambil/Mengembalikan Nilai Jquery dan html

Baringin

You Might Like

Post a Comment

Contact form