1. jQuery - session 2
More about jQuery...

2. .eq()
.eq( index )
indexAn integer indicating the 0-based position of the element.
.eq( -index )
-indexAn integer indicating the position of the element, counting backwards from the last element in the set.
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li').eq(2).css('background-color', 'red');
The result: red background for item 3.
Note that the supplied index is zero-based, and refers to the position of the element within the jQuery object, not
within the DOM tree.

3. .addClass(), .removeClass()
● Dynamically add class to an element
$("p").addClass("myClass");
● Dynamically add multiple classes at a time to an element
$("p").addClass("myClass yourClass");
● Dynamically remove class from an element
$("p").removeClass("myClass");
● Dynamically remove multiple classes at a time from an element
$("p").removeClass("myClass yourClass");
● In overriding - the only thing that matters is the order of the css definitions
in the style sheet

4. .hasClass()
.hasClass( className )
className The class name to search for.
<div id="mydiv" class="foo bar"></div>
$('#mydiv').hasClass('foo') - return true
$('#mydiv').hasClass('bar') - return true
$('#mydiv').hasClass('quux') - return false

5. .toggleClass()
.toggleClass( className )
className One or more class names (separated by spaces) to be toggled for each element in the matched set.
.toggleClass( className, switch )
className One or more class names (separated by spaces) to be toggled for each element in the matched set.
switch A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
We have:
<div class="tumble">Some text.</div>
We do : $('div.tumble').toggleClass('bounce')
and get:
<div class="tumble bounce">Some text.</div>
We do again : $('div.tumble').toggleClass('bounce')
and get:
<div class="tumble">Some text.</div>
Applying .toggleClass('bounce spin') to the same <div> alternates between <div class="tumble bounce spin"> and <div class="
tumble">.

6. Accordion Menu
$(function () {
$('.menuitems').hide();
$('.menu').mouseover(function () {
$(this).next().slideDown('slow').siblings('.menuitems').slideUp(200);
});
});
<h3 class="menu">News</h3>
<ul class="menuitems">
<li><a href="http://www.example.com/story1">Story 1</a></li>
<li><a href="http://www.example.com/story2">Story 2</a></li>
</ul>

7. Collapsing Menu 1
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});

8. Collapsing Menu 2
$(document).ready(function(){
$(".accordion2 h3").eq(2).addClass("active");
$(".accordion2 p").eq(2).show();
$(".accordion2 h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});

9. Animated Hover 1
$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});

10. Animated Hover 2
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});

11. Image Replacement
$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false;
});
});