JQuery is super cool. It helps web designers make their webpages a bit more fun. Here is a brief summary of some of the basics:
Focus 1 - show() and hide()
JQuery has two useful methods, show() and hide(). Look at the code below and the example on the right:
$("#showme").click(function(){
$("#message").show();
});
$("#hideme").click(function(){
$("#message").hide();
});
Hello!
Note that an event handler is used here. It is the click handler. When you click the button with an id of showme, the div with the id message is selected and shown.
Focus 2 - toggle()
A convenient method which allows you to show/hide elements in a webpage is the toggle() method.
$("#toggleme").click(function(){
$("#message").toggle();
});
Hello!
Again, we can use the click handler to activate the toggle method. We don't want any toggling to happen until the button is clicked, right?!
Focus 3 - hover()
As well as a click event handler, there is also a hover event handler. Something happens when the cursor hovers over the selected element.
$("#hovermsg").hover(function(){
$(this).css('opacity', '0.5');
});
Hover over me!
The element with id hovermsg is selected and a hover event means that the css applied to the element is updated! Cool!
Focus 4 - mouseover() and mouseleave()
To help us toggle the opacity in the example in Focus 3, we can use the mouseover() and mouseleave() methods
$("#msg").mouseover(function(){
$(this).css('opacity', '0.5');
});
$("#msg").mouseleave(function(){
$(this).css('opacity', '1');
});
Hover over me!
The element with id hovermsg is selected and a hover event means that the css applied to the element is updated! Cool!
Focus 5 - slideToggle()
Let's create a button and then create a div with some content in it. Let's not display the div content - use display:none; - but when we click the button, the div will show. However, an alternative to the toggle() method is the slideToggle() method.
$("button").click(function(){
$("#togglediv").slideToggle('slow');
});
Nice to see you!
The button's click handler activates the slideToggle method on the selected element, $("#togglediv")
Challenge
Do you remember back in Babies Again you created a super-basic web page introducing yourself?
Recreate your self-introduction by creating a funky, fun, foolish webpage using JQuery. Try to include images and video too. For example, maybe a div with an image of you slide-toggles when you click a nicely design button. Be creative!
