Belajar jQuery (Part 4) - Manipulasi DOM dengan jQuery (Lanjutan)

Seperti yang telah saya janjikan

1. addClass()

Berfungsi untuk menambahkan class pada element yang dipilih. Contoh :

CSS :

.biru {

     color: blue;

}

HTML :

<p id=warnai>Tulisan ini akan berwarna biru.</p>

jQuery :

$(#warnai).addClass(blue);

2. removeClass()

Berfungsi untuk menghapusclass pada element yang dipilih. Contoh :

CSS :

.biru {

     color: blue;

}

HTML :

<p class=biru id=bukan-biru>Tulisan ini tidak lagi berwarna biru.</p>

jQuery :

$(#bukan-biru).removeClass(blue);

3. toggleClass()

Berfungsi untuk menambah/membuang class pada element yang dipilih. Jika class tersebut ada maka akan dihapus, dan jika tidak ada maka akan ditambahkan. Jadi hampir sama dengan addClass/removeClass, hanya saja tergantung kondisi.

4. css()

Berfungsi untuk mendapatkanstyle pada element yang dipilih, dan juga berfungsi untuk menimpa style sebelmunya. Contoh :

HTML :

<p style=color: blue; id=tulisan>Garuda Cyber Indonesia</p>

jQuery :

Untuk mendapatkan style,

var warna-sekarang = $(#tulisan).css(color);

Untuk menimpa style,

$(#tulisan).css(color, red);

atau juga bisa menimpa banyakstylesekaligus dengan,

$(#tulisan).css({font-size: 18pt, color: green});

5. remove()

Berfungsi untuk menghapus element yang dipilih. Contoh :

HTML :

<ul>

     <li id=merah>Mawar</li>

     <li id=kuning>Ini akan dihapus</li>

     <li id=hijau>Daun</li>

</ul>

jQuery :

$(#kuning).remove();

6. empty()

Berfungsi untuk mengosongkan element yang dipilih (child-nya). Contoh :

HTML :

<ul id=kosongkan>

     <li>Merah</li>

     <li>Hijau</li>

     <li>Biru</li>

</ul>

jQuery :

$(#kosongkan).empty();

7. width()

Berfungsi untuk mendapatkan lebar dari element yang dipilih (tidak termasuk padding, border, dan margin). Contoh :

var lebar = $(#tandai).width();

8. height()

Berfungsi untuk mendapatkan tinggi dari element yang dipilih (tidak termasuk padding, border, dan margin). Contoh :

var tinggi = $(#tandai).height();

9. innerWidth()

Berfungsi untuk mendapatkan lebar dari element yang dipilih (termasuk padding). Contoh :

var lebar2 = $(#tandai).innerWidth();

10. innerHeight()

Berfungsi untuk mendapatkan tinggi dari element yang dipilih (termasuk padding). Contoh :

var tinggi2 = $(#tandai).innerHeight();

11. outerWidth()

Berfungsi untuk mendapatkan lebar dari element yang dipilih (termasuk padding dan border). Jika ingin mendapatkan lebar element dengan padding, border, dan margin nya, maka penggunaannya dengan outerWidth(true). Contoh :

dengan padding dan border saja,

var lebar3 = $(#tandai).outerWidth();

dengan padding, border, dan margin,

var lebar4 = $(#tandai).outerWidth(true);

12. outerHeight()

Mendapatkan tinggi dari element yang dipilih (termasuk padding dan border). Jika ingin mendapatkan tinggielement dengan padding, border, dan margin nya, maka penggunaannya dengan outerHeight(true).

dengan padding dan border saja,

var tinggi3 = $(#tandai).outerHeight();

dengan padding, border, dan margin,

var tinggi4 = $(#tandai).outerHeight(true);

13. hide()

Berfungsi untuk menyembunyikan element yang dipilih. Contoh :

$(#sembunyikan).hide();

14. show()

Berfungsi untuk menampilkan element yang dipilih (jika sedang tersembunyi). Contoh :

$(#sembunyikan).show();

15. toggle()

Berfungsi untuk menyembunyikan element jika sedang tampil atau menampilkannya jika sedang sembunyi. Jadi hampir sama dengan hide/show, hanya saja tergantung kondisi. Fungsi ini juga bisa di-animasikan, tapi lain kali akan kita bahas tentang itu.

Nah, bagaimana ? Sudah mulai paham tentang penggunaan jQuery untuk manipulasi DOM ? Mungkin pada artikel berikutnya mungkin kita akan membahas tentang event-event yang dapat digunakan sebagai pemicu dalam memanipulasi DOM, seperti saat melakukan klik tombol misalnya. Jadi, silahkan tunggu artikel selanjutnya.

Penulis : Rizky Hady - Programmer