Menerapkan berbagai fungsi elemen HTML dengan Script Jquery

Kelebihan Jquery

Kode atau bahasa yang digunakan dalam script JQuery lebih sederhana dibandingkan dengan Javascript meskipun dalam beberapa kondisi harus menggunakan kode karakter yang terlihat sulit.

Penggunaan JQuery

Untuk dapat menggunakan JQuery
Yang dibutuhkan hanyalah memasang sebuah link script di atas kode </head> untuk menautkan halaman dengan Library JQuery.
Dibawah ini beberapa sumber yang secara official digunakan JQuery untuk menyimpan link tersebut.

• Google CDN
• Microsoft CDN
• CDNJS CDN
• jsDelivr CDN

Berikut ini beberapa contoh penggunaan JQuery.

Menerapkan fungsi pada elemen yang sudah tersedia

Elemen induk dalam Jquery akan disebut sebagai document.
Sebuah fungsi yang diterapkan bisa menampung beberapa elemen sekaligus.
Elemen yang sudah tersedia diwakili oleh .ready

Penulisan :
$(document).ready(function(){..tugas fungsi..}

Menampilkan / menyembunyikan elemen (hide / show)

$('selector').hide(); : merupakan penulisan kode yang berfungsi untuk menyembunyikan elemen, dimana hasilnya akan sama dengan style='display:none' pada elemen yang ditargetkan.

Begitu sebaliknya pada kode:
$('selector').show(); : merupakan penulisan kode yang berfungsi untuk menampilkan elemen, dimana hasilnya akan sama dengan style='display:block' pada elemen yang ditargetkan.

Eksekusi kode

Demo

⇐ Sebelumnya

Selanjutnya ⇒