filosofi1

Trik dasar memahami jquery #1

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Untuk pembahasan sekarang mari kita sama-sama belajar jquery kita mulai dari pembahasan yang paling dasar.
kita bisa lihat diwebsite resminya jQuery pada bagian dokumentasi akan ada banyak yang mesti kita pelajari untuk benar-benar menguasai jquery.
atau bisa disebut dengan jQuery API (Application Programming Interface). diantaranya:
1. jQuery Core
2. Selectors
3. Attributes
4. Traversing
5. Manipulation
6. CSS
7. Events
8. Effects
9. Ajax
10. Plugin jQuery UI(User interface)
11. Utilities

  • Filosofi jQuery

sebelum kita melanjutkan pada pembahasan yang lebih jauh, ada baiknya kita mengetahui dasar dari filosofi jquery. berikut kita pelajari sama-sama:

untuk dasar penulisan fungsi jquery dituliskan seperti berikut.

filosofi1

Pada dasarnya fungsi jQuery dituliskan “jQuery” namun pada umumnya fungsi “jquery” digantikan dengan tanda Dolar “$” , berikut analogi dari penulisan fungsi jQuery:

filosofi2

kalo dianalogikan intinya “fungsi jQuery akan mencari suatu element tertentu yang telah didefinisikan pada bagian body, kemudian melakukan sesuatu ¬†terhadap element tersebut” itulah filosofi dasar dari jQuery.

Berikut contoh dalam penerapan fungsi jquery:

1.  Buatlah file index.html dengan srtuktur sebagai berikut:

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery</title>
</head>
<body>
	<button class="sembunyi">sembunyi</button>
	<button class="tampil">tampil</button><br>
	<img id="foto" src="localhost.jpg" width="200px" height="200px">
</body>
</html>

2.  tambahkan script untuk load jQuery, file jquerynya tersebut bissa di download dari website resminya jQuery.

<script type="text/javascript" src="js/jquery.js"></script>

3. Tambahkan Fungsi jQuery pada bagian tag <head>, berikut

<script type="text/javascript">
		$(document).ready(function(){
			$(".sembunyi").click(function(){
				$("#foto").hide("slow");
			});

			$(".tampil").click(function(){
				$("#foto").show("slow");
			});

		});
	</script>

Berikut demo dari fungsi diatas:

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.