Menurut pengalaman saya dan teman-teman lainnya, JQuery sangatlah ringan sehingga dengan menggunakan jQuery tidak akan membuat halaman web kita menjadi lambat untuk di load, dengan porsi yang tidak berlebihan, tentunya. Sebelum mempelajari jQuery, ada baiknya Anda sudah menguasai Dasar-dasar HTML, CSS serta JavaScript. Untuk dapat menggunakan library ini, Anda dapat mendownload jQuery dari situs resminya yaitu www.jquery.com lalu menaruhnya pada direktori tempat Anda menyimpan file halaman web, dan jangan lupa pula untuk memanggil file jQuery di setap halaman web diantara tag <head></head> Anda dengan cara:
<script type="text/javascript" src="jquery.js"></script>
Tulisan yang berwarna merah menandakan nama file, nama file tersebut harus di sesuaikan dengan nama file jQuery yang telah kita download. Untuk lebih lanjut mengenai tutorial dasar desain web dengan jQuery akan dibahas pada tutorial berikutnya.
Penting!
|==============|
Sintaks pada jQuery |
|==============|
sama seperti PHP, untuk mempraktikkan tutorial ini anda harus mempunyai Localhost dengan cara mengubah komputer / laptop anda menjadi Server terlebih dahulu dan meletakkan file jquery di dalam localhost.
jQuery --sama seperti halnya library lainnya-- juga memiliki sintaks, biasanya sintaks yang dipakai adalah untuk memilih elemen-elemen HTML lalu melakukan suatu aksi terhadap elemen tersebut atau elemen lain. Ini mirip dengan gaya bahasa visual basic yang pada visual basic diistilahkan dengan konsep 'even driven' dimana suatu reaksi terjadi jika suatu aksi tertentu dilakukan.
Analoginya begini, misal: kita menuangkan sirup strawberry kedalam gelas yang berisi air putih, maka air putih tersebut akan berubah warna dari putih (bening) menjadi merah. Nah, Yang kita lakukan yakni menuangkan sirup adalah aksi, sedangkan peristiwa berubahnya warna pada gelas dinamakan reaksi.
Sintaks pada jQuery adalah sebagai berikut: $(selector).action()
Penjelasan!
$ biasa saya sebut dengan "cash", digunakan untuk mendefinisikan jQuery
selector) digunakan untuk menunjukkan elemen yang dipilih atau dituju
action() adalah aksi yang akan dilakukan terhadap elemen yang telah di seleksi atau dipilih.
agar lebih jelas saya beri contoh sebagai berikut:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Web Design | ilmugrafis.com</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); });})</script></head><body><p>Tulisan ini akan bereaksi</p><button>Klik tombol ini</button></body></html><script type="text/javascript" src="jquery.js"></script>
Penjelasan!
Seperti yang telah dijelaskan pada tutorial sebelumnya baris ini digunakan untuk memanggil file jquery.js.
$(document).ready(function(){
Ini dimaksudkan kode javascript yang ada pada baris dibawahnya berjalan pada saat halaman web di load.
$("button").click(function(){
$("p").hide(1000);
});
Baris diatas bermakna: ketika elemen “button” di klik oleh pengguna, maka elemen “p” (paragraph) disembunyikan dengan kecepatan selama 1000 mili detik.
Hasilnya:
kok cuma gambar, tenang karena Sahabat blogger www.ilmugrafis.com telah menyiapkan Tester JQuery script di atas tersebut disini klik Test JQuery agar kalian bisa mengetahui maksud dari elemen “p” (paragraph) disembunyikan :)
Coba Anda ubah sendiri kode diatas, misalnya dengan mengganti angka 1000 menjadi 2000, mengubah selector dari “button” menjadi “p” atau sebaliknya, dan lain-lain. Selamat bereksplorasi. Sampai disini dulu pengenalan JQuery, semoga bermanfaat
Version English :
jQuery is a javascript library, jQuery provides a collection of ready-made scripts that simplify and accelerate our time to write javascript code, because we only call functions that we require which of course is already in jQuery, and no longer need to compile code from javascript 0. Surely this is in accordance with the slogan jQuery itself, ie
"Write less, do more".
JQuery is very lightweight so it will not be using jQuery to make our web pages to be slow for load, with a portion of moderation, of course. Before studying jQuery, it's good you've mastered the basics of HTML,CSS and JavaScript. In order to use this library, you can download from the official website ie jQuery www.jquery.com then put it in the directory where you saved the web page file, and do not forget also to call the jQuery file in a web page setap between <head> tag </ head > You by :
<script type="text/javascript" src="jquery.js"></script>
Writing in red indicates the file name, the file name must match the name on file that we downloaded jQuery. For more information about basic web design tutorials to jQuery will be discussed in the next tutorial.
|==============|
Sintaks pada jQuery |
|==============|
Important!
same as PHP, to practice this tutorial you should have Localhost by altering your computer / laptop to server first and put the jquery file in localhost.
jQuery - just like any other library - also has syntax highlighting, syntax normally used is to select HTML elements and then perform an action on the element or elements. This is similar to the style that the visual basic visual basic concept termed 'event driven' in which a reaction occurs if a particular action performed.
This analogy, ie we pour strawberry syrup into a glass of water, then the water will change color from white (clear) to red. Well, what we do that is pouring syrup is the action, while the color of the glass changes the events called reactions.
JQuery syntax is as follows: $ (selector). Action ()
Explanation!
$ I used to call "cash", is used to define jQuery
selector) is used to indicate the selected element or intended
action () is the action that will be performed on the elements that have been selected or elected.
to be more clear I give you an example as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Design | ilmugrafis.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); });})</script>
</head>
<body>
<p>Tulisan ini akan bereaksi</p>
<button>Klik tombol ini</button>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
Explanation!
As explained in the previous tutorial this line used to call the jquery.js file.
$ (document). ready (function () {
It is intended that existing javascript code on the line below it running at the moment the page loads.
$ ("button"). click (function () {
$ ("p"). hide (1000);
});
The above line means: when element "button" is clicked by the user, then the element "p" (paragraph) hidden at speeds over 1000 milli seconds.
Really just a picture, quiet because Sahabat blogger www.ilmugrafis.com has prepared Tester JQuery script above click Test JQuery is here so that you can know the intent of the element "p" (paragraph) hidden :)
Try to change your own code above, for example by changing the numbers 1000 to 2000, change the selector from the "button" to "p" or vice versa, and others. Congratulations explore. Up here first introduction JQuery, may be useful
Source : http://www.ilmugrafis.com/dreamweaver.php?page=pengenalan-jquery-website
Editing By : http://adhitezt12.blogspot.com/
1. Jangan Jadi SILENT READER ya Sob. :)
Bck2. Berkomentarlah sesuai dengan kewajaran dan bersifat membangun (NO SARA, NO PORN*)
3. Tidak Berisi Singgungan Terhadap Pihak Lain
4. Hindari Penggunaan Anchor Link (Link Aktif) seperti < href=namadomain> karena komentarnya tidak akan di moderasi
5. Gunakan Fasilitas Nama/Alamat URL sebagai alternatif Link Anchor
6. Blog ini tidak menggunakan vertifikasi kata demi kenyamanaan anda