How jQuery works?
First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). Then you need to write functions to tell jQuery what to do. The diagram below explains the detail how jQuery work:
jquery-how-it-works-sm.gif
How to get the element?
Writing jQuery function is relatively easy (thanks to the wonderful documentation). The key point you have to learn is how to get the exact element that you want to apply the effects.
$("#header") = get the element with id="header"
$("h3") = get all <h3> element
$("div#content .photo") = get all element with class="photo" nested in the <div id="content">
$("ul li") = get all <li> element nested in all <ul>
$("ul li:first") = get only the first <li> element of the <ul>
1. Simple slide panel
Let's start by doing a simple slide panel. You've probably seen a lot of this, where you click on a link and a panel slide up/down. (view demo)
sample1.gif
When an elment with class="btn-slide" is clicked, it will slideToggle (up/down) the <div id="panel"> element and then toggle a CSS class="active" to the <a class="btn-slide"> element. The .active class will toggle the background position of the arrow image (by CSS).
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
ساحة النقاش