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.
 |
| jQuery download |
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-->
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
</head>
|
|
<head>
<!--Microsoft CDN-->
<script src=”http://ajax.aspnetcdn.com/ajax/libs/jQuery/jquery-1.11.1.min.js”></script>
</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”
 |
| 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.
Tidak ada komentar:
Posting Komentar
Berkomentarlah secara relevan sesuai topic yang di bahas..
Pengunjung yang super selalu meninggalkan jejak di komentar.