Dom Dan Manipulasi Html

Untuk memanipulasi html dibutuhkan event/peristiwa sebagai pemicunya baik event load, ready, click atau event lainnya. Pembahasan mengenai event akan dibahas di pelajaran lainya. Metode metode dari jQuery yang sering di gunakan untuk memanipulasi html adalah sebagai berikut:

Show()

show() merupakan metode dari jQuery untuk memudahkan anda menampilkan suatu elemen html. Berikut contohnya:

Kode Html

<div class="artikel" style="display:none">qwertyuiop asdfghjkl zxcvbnm </div>
<button class="show">Tampilkan</button>

Kode jQuery

$(document).on("ready", function(){
      $('button.show').click(function(){ 
                 $('.artikel').show();
     });
});

Penjelasan Kode

Kode jQuery diatas akan dijalankan ketika DOM telah siap untuk berkomunikasi dengan jQuery dan ketika ada element button denganclass show di klik maka elemen dengan class artikel akan di tampilkan. Sekedar informasi html diatas tidak ditampilkan karena style displaynya adalah none.

Hide()

hide() merupakan metode dari jQuery untuk memudahkan anda untuk menyembunyikan suatu elemen html. metode ini adalah kebalikan dari metode show diatas. Berikut contohnya:

       $(<element>.hide()

       $('button.show').hide()

Html()

html() merupakan metode dari jquery untuk merubah html dari suatu element. Contoh:

  $('button.show').html('Tampilkan');

append()

append() adalah sebuah metode dari jquery untuk menambahkan suatu elemen dengan element lainnya. Berikut contoh penggunaanya :

$('button.continue').append('<span>aa</span>');

Penjelasan Kode jQuery akan memilih elemen button dengan class continue dan menambahkan elemen span didalamnya.

replaceWith()

replaceWith() digunakan untuk mengganti sebuah elemen dengan elemen lainnya. Berikut Contohnya:

$('button.continue').replaceWith('<span>aa</span>');

Penjelasan Kode jQuery akan memilih elemen button dengan class continue dan menggantinya dengan elemen span seperti contoh diatas

attr()

*attr() adalah metode jQuery untuk mendapatkan nilai dari sebuah atribut dan bisa di gunakan untuk mengganti suatu atribut dari elemen yang di pilih. Berikut contohnya:

$('button.continue').attr('class', 'selanjutnya');

Penjelasan Kode jQuery akan memilih elemen button dengan class continue dan mengganti atribut class dari continue menjadi selanjutnya.

attr() juga sangat berguna untuk mendapatkan nilai dari atribut dari sebuah elemen yang telah kita pilih. Berikut contohnya:

Html <a href="/index/" id="menu">menu1</a>

jQuery

$("a#menu").click(function(){
    url = $(this).attr('href');
    location = url;
});

Penjelasan Kode ketika link/elemen a dengan atribut id=menu di klik maka jquery akan mengubah location atau meredirect ke url yang di dapat dari attribut href element a diatas.

val()

*val() adalah metode jQuery untuk mendapatkan nilai/value dari input, textarea. Berikut contohnya:

 $('input#title').val();