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

Read more

Dom - Memanipulasi Elemen

Setelah kita memilih elemen atau memiih id/class dari elemen yang kita kehendaki, kita bisa merubah element tersebut menggunakan JQuery. Berikut beberapa contohnya:

kita masih menggunakan 3 buah button di halaman html kita:

    <button>1</button>
    <button>2</button>
    <button>3</buton>

mengubah nilai 2 dari elemen button yang kedua menjadi 22 ? Contohnya seperti berikut:

 $("button:first").next().html('22');

Untuk menghapus elemen button yang pertama

 $("button:first").remove();

Read more

Dom - Memilih Elemen

Memilih Element

Untuk memilih elemen di jquery sangat mudah. Contohnya seperti dibawah ini:

     $('<nama element>')

Untuk membiasakan anda menulis kode jquery dalam memilih elemen silahkan ikuti perintah di bawah ini :

Tulis Perintah berikut di kolom di bawah ini

 $('button')  

Silahkan masukan perintah dibawah ini:

>

Untuk memilih salah satu elemen button yang di kehendaki. perhatikan contoh berikut:

    <button>1</button>
    <button>2</button>
    <button>3</buton>

Untuk memilih elemen button yang pertama. Contohnya seperti berikut:

 $("button:first")
 atau
 $("button:first").first()

Bagaimana jika ingin mengubah nilai 2 dari elemen button yang kedua menjadi 22 ? Contohnya seperti berikut:

 $("button:first").next().html('22');

Memilih Element Dengan Class dan Id

Bila elemen yang ingin dipilih memiliki id atau class, kita bisa memilih element tersebut berdasarkan id/atau classsnya. COntohnya seperti berikut:

     $('#<id>')
     atau
     $('.<class>')

Sebagai contoh dihalaman html kita memiliki 3 buah element Img

<img src="/media/jpg" id="img1" class="img1">
<img src="/media/jpg" id="img2" class="img2">
<img src="/media/jpg" id="img3" class="img3">

Untuk memilih element img no2 kita hanya perlu memilih id atau class nya. Contohnya silahkan ikuti perintah dibawah ini:

Tulis Perintah berikut di kolom di bawah ini

 $('#img2')  

Silahkan masukan perintah dibawah ini:

>

Anda juga bisa memilih beberapa elemen yang dan id sekaligus. Contoh

  $("img, #img2")




Read more

Dom - Document Object Model

Menurut Wikipedia, Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.

W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya. Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web.

Read more

Pendahuluan J-Query

Apa itu JQuery

JQuery adalah sebuah pustaka Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Yang Artinya : Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.

Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL.

Kita akan sedikit belajar tentang :

• DOM Traversal and Manipulation
• Event Handling
• Ajax
• Sedikit jQuery Api

Memasang JQuery

Untuk menyisipkan jquery di halaman html kita caranya cukup mudah, kita hanya perlu menulis seperti contoh berikut:

<script type='text/javascript' src='jquery-1.8.2.min.js'></script>  

Detail contohnya seperti berikut:

<html>
    <head>
        <script type='text/javascript' src='jquery-1.8.2.min.js'></script>
    </head>
    <body>
    </body>
</html>

Read more