Scribd
Upload
106 views

Documentation On Jquery

The document provides examples and explanations of different jQuery events and effects that can be used to manipulate HTML elements. Some key events and effects discussed include: 1. Common jQuery event syntax using .ready(), .click(), and other events to trigger effects on elements. 2. Using .effect() to directly trigger effects without an event. 3. Combining events like .click() and .hover() to trigger different effects on elements. 4. Introducing new events like .dblclick(), .focus(), and .keydown() and how to use them to trigger animations and other effects. 5. Animations like .animate() to move or change elements over time

Uploaded by

Craig Richardson
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
106 views

Documentation On Jquery

The document provides examples and explanations of different jQuery events and effects that can be used to manipulate HTML elements. Some key events and effects discussed include: 1. Common jQuery event syntax using .ready(), .click(), and other events to trigger effects on elements. 2. Using .effect() to directly trigger effects without an event. 3. Combining events like .click() and .hover() to trigger different effects on elements. 4. Introducing new events like .dblclick(), .focus(), and .keydown() and how to use them to trigger animations and other effects. 5. Animations like .animate() to move or change elements over time

Uploaded by

Craig Richardson
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

1.

Review of jQuery Events


You know a lot about jQuery events already, but it never hurts to review the basics.The
setup almost always looks like this:
$(document).ready(function() {
$('thingToTouch').event(function() {
$('thingToAffect').effect();
});
});

where "thing to touch" is the HTML element you'll click on, hover over, or otherwise
interact with, and "thing to affect" is the HTML element that fades away, changes size,
or undergoes some other transformation. Sometimes these elements are one and the
sameyou might hover over a<div> to change its opacity. Other times, you might
interact with a separate element; for example, you might click on a button to resize a
<div>.Sometimes if you want an effect to occur right away, without an event
like.click() or .hover(), you'll skip the second line in the above:
$(document).ready(function() {
$('thingToAffect').effect();
});

Before :

After :

2. Cutting to the Chase


Let's quickly review how to trigger an effect without a special event handler
like .click().we just want our effect to happen as soon as our document is.ready().
Before :

After :

3. Adding an Event Handler


Great! Now let's review how to make something happen with an event handler. In this
case, we'll use.click().

After it has clicked, it will fade


out. Output will be same as
above.

4. Combining .click() and .hover()


Well done! Let's add one more jQuery event to our "destruction of Krypton" simulation.
Krypton didn't just vanish, it exploded! Let's make it turn red.
$('div').hover(function(){
$('div').addClass('green');
});

1. Following the pattern we have been learning, we target Krypton, our$('div')


2. We then apply our hover event to our target.
3. Finally, we execute the code inside the function(){} which adds a class of green to our
target.

Before :

After:

5. The .dblclick() Event


Now that we've reviewed our jQuery event handlers, let's learn a new one.We might
want to cause a jQuery effect when a user double clicks on an element, rather than just
single-clicking. We can do this with the.dblclick() event handler.
Before :
After double click
the object will fade
out.

6. Hover
What if you wanted to create an effect when your mouse is on top of an object, then
have that effect vanish when your mouse moved away? You might notice this effect in
use on many site's navigation bars!
$('div').hover(
function(){
$(this).addClass('highlight');
},
function(){
$(this).removeClass('highlight');
}
);

1. We first select the element we want to modify $('div')


2. Secondly notice that our hover effect is able to take two functions(){} separated by a
comma. The comma is very important!
3. The first function(){} we pass will be run when we first mouse over our target. Here we
apply a class of highlight
4. The second function(){} will be called when our mouse leaves the object. This is where
we remove the class highlight
Your second function(){} doesn't have to be the opposite of the first function(){}, but it
would be very common!
Before :

After :

7. Let's .focus()!
Another event we can make use of is.focus(). We say an element has focus when we
click on it or tab over to it. If you've ever filled out a form on a web page and seen how
each text box lights up when you tab to it or click on it, you've seen focus in action!
The .focus() event handler only works on elements that can receive focusthe list of
these elements is a bit vague, but HTML elements like<textarea>s and <input>s are the
usual suspects.
Check out the form we've set up in the Result tab. If you click on the input field, you'll
see it automatically highlights in a delightful baby blue. Too bad baby blue is for babies!
We want our highlighting to be red.
We can do this with two tools:.focus() and our .css() function from the last section. We
want to write a bit of jQuery code that will change our 'input''s 'outlinecolor' to'red' when it gains focus.

Before :

After :

8. The .keydown() Event


You're not limited to mouse events in jQueryyou can trigger events using the
keyboard, as well! The .keydown() event is triggered whenever a key on the keyboard is
pressed. It only works on whatever page element has focus, so you'll need to click on
the window containing your div before pressing a key in order for you to see its
effects.Let's go ahead and combine our new event with a new effect: .animate()! We'll
use this to move an object on the screen whenever we press a
key.The .animate() effect takes two inputs: the animation to perform, and the time in
which to perform the animation. Here's an example:
$(document).ready(function() {
$('div').animate({left:'+=10px'},500);
});

This will take the first div it finds and move it ten pixels to the right. Remember, increasing
the distance from the left margin moves something to the right; the += bit is just a shorthand
for "take the existing number and add ten to it." In this case, it add ten pixels to the current
distance from the left margin.

Before :

After :

9. Filling Out the Cases


Now it's time to animate our character based on the user's input from the
keyboard.Every key press on a keyboard is translated into a number for the computer to
use. Don't worry about memorizing them, for now we've given you the basics
in script.js.
/ Left arrow key pressed
case 37:
('img').animate({left: "-=10px"}, 'fast');

1. The left arrow key on our keyboards translates to number 37 to the computer.
When that key is pressed, we animate our image to the left by subtracting 10px
2. To move up we subtract 10px from the top
3. To move right we add 10px to the left
4. Finally, to move down we add 10pxto the top

Before :

After :

1. Hiding an Object
Before :

After :
The object will
hide once the
.hide() code
used.

2. Practice with .animate()


Let's get in a little more practice with the .animate() effect. That's the one with the
slightly more complicated inputif we wanted to move a div 10 pixels down, we'd type
something like
$('div').animate({top:'+=10px'},500);

Where the bit between curly braces says "hey, jQuery! Add 10 pixels to the current top
margin," and the second input says "do it in 500 milliseconds!" (1,000 milliseconds =
one second.)
Before :

After :

3. Introducing: jQuery UI
jQuery UI includes a number of ultra-fancy animations you can use to make your
websites do incredible things.For instance, remember when we lamented that jQuery
didn't include a.blowUp() effect for our planet Krypton? Well, that's still true. But jQuery
UI has an .effect() effect, and we are totally going to give it the input'explode'.Note that
we've included an extra<script> tag in our HTML documents; this is used to include
jQuery UI in our webpages.

You might also like