Cara Manipulasi Tag HTML dengan jQuery

belajar jquery

SeniKoding.com - JQuery memiliki kemampuan untuk memanipulasi tag HTML, seperti menghapus, menduplikat, dan menyisipkan tag baru.
Cara memanipulasi tag HTML dengan jQuery ada berbagai macam cara.

Belajar JQuery: Cara Manipulasi Tag HTML dengan jQuery


Berikut beberapa perintah jQuery yang digunakan untuk memanipulasi tag HTML:

clone() : digunakan untuk menduplikat suatu tag yang dipilih oleh selector.

Tentu masih ingat ya, bagaimana cara menuliskan kode selector dan event nya, ada di artikel Memahami Event dalam jQuery.

wrap() : digunakan untuk membungkus sebuah tag yang dipilih oleh selector dengan suatu tag baru.

unwrap() : digunakan untuk menghilangkan tag HTML yang membungkus tag yang dipilih oleh selector.

prepend() : digunakan untuk menyisipkan tag baru didalam tag yang dipilih oleh selector pada bagian awal.

append() : digunakan untuk menyisipkan tag baru didalam tag yang dipilih oleh selector pada bagian akhir.

prependTo() : digunakan untuk menyisipkan tag yang disebutkan oleh selector kedalam suatu tag pada bagian awal.

appendTo() : digunakan untuk menyisipkan tag yang disebutkan oleh selector kedalam suatu tag pada bagian akhir.

text() : digunakan untuk mengambil atau mengubah tulisan(text) / string didalam suatu tag.

html() : digunakan untuk mengambil atau mengubah script HTML didalam suatu tag.

val() : digunakan untuk mengambil atau mengubah nilai suatu input form.

before() : digunakan untuk menambahkan tag baru sebelum
tag yang dipilih oleh selector.

after() : digunakan untuk menambahkan tag baru setelah tag yang dipilih oleh selector.

replaceWith() : digunakan untuk mengganti tag yang dipilih oleh selector dengan tag baru.

next() : digunakan untuk memilih tag yang terletak setelah tag yang dipilih oleh selector.

prev() :  digunakan untuk memilih tag yang terletak sebelum tag yang dipilih oleh selector.

parent() : digunakan untuk memilih tag yang membungkus tag yang dipilih oleh selector.

Sebagai contoh, kita akan membuat perintah Before() dan After() jQuery:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#button1").click(function(){
                    $("p").before("<b>Before</b>");
                });

                $("#button2").click(function(){
                    $("span").after("<i>After</i>");
                });
            });
        </script>
    </head>
    <body>
        <p style="color:red;"></p>
        <span style="color:blue;"></span>
        <br/><br/>
        <button id="button1">Klik before</button>
        <button id="button2">Klik after</button>
    </body>
</html>

Dengan perintah Before(), akan membuat tag baru sebelum tag HTML yang dipilih, dan After(), akan membuat tag baru setelah tag HTML yang dipilih.

Untuk membuktikan dari kasus diatas, coba buat kode diatas dan tampilkan dibrowser kemudian di "Inspect Element". Kalau benar maka akan membentuk kode baru seperti pengertian fungsi Before dan After diatas.

Hasil inspect element:

belajar jquery
Benar ya, bahwa tag yang ditambahkan oleh fungsi "before()" akan membentuk tag baru sebelum tag yang dipilih, dilambangkan dengan gambar "biru".
Dan tag yang ditambahkan oleh fungsi "after()" akan membentuk tag baru setelah tag yang dipilih, dilambangkan dengan gambar "merah".

Cara Manipulasi Tag HTML dengan jQuery


Selain memanipulasi tag HTML, jQuery juga memiliki kemampuan untuk memanipulasi atribut suatu tag. Perintah yang digunakan untuk memanipulasi tag HTML adalah sebagai berikut:

attr() : digunakan untuk mengambil atau mengubah nilai atribut dari tag yang dipilih oleh selector.

removeAttr() : digunakan untuk menghapus atribut dari tag yang disebutkan oleh selector.

addClass() : digunakan untuk menambah class kedalam tag yang dipilih oleh selector.

removeClass() : digunakan untuk menghapus class yang disebutkan didalam kurung pada tag yang dipilih oleh selector.

toggleClass() : digunakan untuk menambah class baru pada tag yang dipilih oleh selector jika sebelumnya belum ada dan menghapusnya jika sebelumnya sudah ada.

Contoh kode toggleClass() jQuery:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("h1, h2, p").toggleClass("blue");
                });
            });
        </script>
        <style>
            .blue {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>Heading h1</h1>
        <h2>Heading h2</h2>

        <p>Belajar jQuery bersama www.senikoding.com</p>
        <p>Belajar Pemrogramman bersama www.senikoding.com</p>

        <button>Toggle class</button>
    </body>
</html>

Hasil browser:

toggle jquery

Selain Cara Manipulasi Tag HTML dengan jQuery diatas jQuery masih mempunyai banyak cara lagi, kunjungi web resminya www.jquery.com.

Selamat mencoba dan terus belajar, semoga bermanfaat.

- salam -

Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Cara Manipulasi Tag HTML dengan jQuery"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -