Dom Dan Manipulasi Html - Hallo sahabat pemerogaman, Pada kesempatan kali ini admin pemerogaman akan sharing yang berjudul Dom Dan Manipulasi Html, saya telah menyediakan artikel yang cocok untuk belajar para progamer. mudah-mudahan isi postingan pemerogaman yang saya tulis ini dapat anda pahami. okelah, ini dia artikel pemerogamannya.

Judul Artikel : Dom Dan Manipulasi Html
Artikel : Dom Dan Manipulasi Html

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

Demikianlah Artikel Dom Dan Manipulasi Html

Sekian Artikel pemerogaman Dom Dan Manipulasi Html, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan pemerogaman kali ini.

Anda sedang membaca artikel Dom Dan Manipulasi Html dan artikel ini url permalinknya adalah http://pemerogaman.blogspot.com/2014/05/dom-dan-manipulasi-html.html Semoga artikel ini bisa bermanfaat.

Tweet