Memahami Apa itu Jquery?

Memahami Apa itu Jquery, jQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library rule cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.

Library jQuery mempunyai kemampuan :

Kemudahan mengakses elemen-elemen HTML
Memanipulasi elemen HTML
Memanipulasi CSS
Penanganan event HTML
Efek-efek javascript dan animasi
Modifikasi HTML DOM
AJAX

Menyederhanakan kode javascript lainnya Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js Dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js kedalam kode javascript.

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

Contoh Sederhana Membuat Web Tab Scroll Contentdengan Jquery.

{getDownload} $text={Preview} $size={Size Text}

Kode Script

<html>
<head>
<script type="text/javascript" src="jquery-1.2.js"></script>
<script>
$(document).ready(function(){
$("#home").click(function(){
$("#konten").animate({ scrollTop: 0},"slow");
});
$("#about").click(function(){
$("#konten").animate({ scrollTop: 500},"slow");
});
$("#contact").click(function(){
$("#konten").animate({ scrollTop: 1000},"slow");
});
});
</script>
<style>
#konten{height : 500px;overflow: hidden;background-color : yellow;}
.box{height : 500px;margin:0;padding : 0;}
.link{cursor : pointer;background-color : #bdc3c7;padding : 3;}
body{overflow:hidden;}
#home{background-color :#3498db;}
#about{background-color : #f39c12;}
#contact{background-color : #7f8c8d;}
.aboutme{color :white;font-size : 26pt;font-family : garamond;}
</style>
</head>
<body>
<span class='link' id='home'>Home</span>
<span class='link' id='about'>About</span>
<span class='link' id='contact'>Contact</span>
<div id='konten'>
<div id='home' class='box'>
<br><b>Home</b><p>
<center>
<font size=7>HELLO WORLD!!</font></center>
</div>
<div id='about' class='box'>
<br><b>About Me</b>
<p>
<span class='aboutme'>Namaku Hello world</span>
</p>
<p>
<span class='aboutme'>Lahir di hello world tahun 1945</span></p>
<p>
<span class='aboutme'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet iaculis leo.
 In sagittis risus quis nisi suscipit, at tempus elit mollis. Nunc tempor lectus nec nibh fringilla, et facilisis ex suscipit.</span></p>
</div>
<div id='contact' class='box'>
<br><b>Contact</b>
<form method="POST" action="--WEBBOT-SELF--" style="padding:10">
<p>
Nama :<br>
<input type="text" name="T1" size="20"><br>
Emai : <br>
<input type="text" name="T2" size="20"><br>
Komentar :<br>
<textarea rows="6" name="S1" cols="24"></textarea><br>
<input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></p>
</form>
</div>
</div>
</body>
</html>

Selesai...

Memahami Apa itu Jquery?

Apradiz Renfaan

5 Comment

Memahami Apa itu Jquery?

Apradiz Renfaan

comment 5 Comment

5 Comment