Sebelum menerapkan jquery kita perlu tahu apa itu jquery. JQuery bisa
disebut dengan librari atau framework javascript atau bisa dibilang jquery
pengembangan dari javascript. Tujuan dari jquery adalah untuk memudahkan
pembuatan sebuah website seperti memberi efek animasi pada javascript pada
umumnya.
Cara menerapkan jquery ada dua cara, yaitu online dan offline.
Online : Menghubungkan jquery langsung dari situsnya, artinya kita
perlu terhubung dengan internet.
Offline : Mengubungkan file jquery ke project kita, artinya kita hanya perlu
malampirkan tempat file jquery yg sudah ada.
Untuk memulai menerpkan jquery :
Download jQuery dari jquery.com atau bisa juga menyertakan jquery pada CDN.
Download jquery dengan masuk ke tab download dan “
Download the compressed,
production jQuery 3.1.1” pada ujicoba kali ini tidak perlu mengubah koding
pada file jquery.
Setelah di download atau di buat file jquery dengan ekstensi
javascript “.js” dan ditempatkan dengan 1 folder dengan html atau php. Adapun
pemanggilan jquery yaitu.
|
<head>
<script src="jquery-1.8.3.min.js"></script>
</head>
|
Cara lain penggunaan jquery :
Untuk inputan jquery tanpa melampirkan file jquery bisa
menggunakan syntax dibawah. File jquery yang sudah di sediakan oleh Google dan Microsoft.
|
<head>
<!--Google CDN-->
</head>
|
|
<head>
<!--Microsoft CDN-->
</head>
|
Contoh implementasi jquery
silahkan di copy:
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"
src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(400);
});
});
</script>
</head>
<body>
<h2>Hello</h2>
<p>Ini test penerapan jquery</p>
<button>Tutup</button>
</body>
</html>
|
 |
| Sebelum menekan tombol tutup |
 |
| Ketika tombol di eksekusi |
Penjelasan script :
<script type="text/javascript"
src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(400);
});
});
</script>
Pada script diatas diketahui beberapa fungsi pemanggilan jquery untuk menghilangkan isi pada tag “<p>”
dengan waktu menyembunyikan “400”
semankin besar angka maka semakin lambat.
Penggunaan fungsi lain jQuery
Untuk demo pada fungsi-fungsi lain jQuery, website
jQuery.com juga menyediakan
penjelasan maupun demo program pada tab
“API Documentation”
Seperti implentasi diatas tadi itu termasuk hasil dari penerapan dari website jquery bagian effect.
Sekian artikel Langkah-langkah penerapan dan implementasi jQuery pada html ataupun php. Semoga bermanfaat.
