Frameworks: jQuery

jQuery adalah JavaScript frameworks. Tujuan jQuery adalah bagi memudahkan penggunaan JavaScript di dalam website. jQuery boleh diperolehi di jquery.com.

Cara memasukkan jQuery adalah dengan menambah file dari CDN (Content Delivery Network).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

jQuery menggunakan CSS syntax untuk element, id dan class selector.

 <script>
 $(document).ready(function(){
 $("#demo1").click(function(){
 $("#demo1").hide();
 });
 });
 </script> 
 <p id="demo1">Click this text.</p>

Effect hide dan show

 <script>
 $(document).ready(function(){
 $("#button1").click(function(){
 $("#demo2").hide();
 });
 $("#button2").click(function(){
 $("#demo2").show();
 });
 });
 </script> 
 <button id="button1">Hide</button>
 <button id="button2">Show</button>
 <p id="demo2">This text can hide and show.</p>

Effect lain adalah toggle(), fadeIn(), fadeOut(), fadeToggle(), fadeTo(), slideDown(), slideUp(), slideToggle()

 <script> 
 $(document).ready(function(){
 $("#flip").click(function(){
 $("#panel").slideToggle("slow");
 });
 });
 </script> 
 <div id="flip">Click to slide the panel down or up</div>
 <div id="panel">Hello world!</div>

Contoh: http://shahrulnizam.com/web/jquery.php

Penerangan lanjut di

  1. http://www.w3schools.com/jquery/jquery_selectors.asp
  2. http://www.w3schools.com/jquery/jquery_hide_show.asp
  3. http://www.w3schools.com/jquery/jquery_slide.asp

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.