Helpers are so helpful

The helper functions, also often referred to as "shortcuts", let you easily set up events on a click or hover. You can also easily toggle events. We saw how useful the toggleClass() function was in the CSS Manipulation section; imagine being able to toggle more functions.

Most of the time, hover() will accomplish your needs, but if you want your event to be a click, then the toggle() function will probably work best. The toggle() function allows a bit more flexibility than hover because you can add in additional functions and not be constrained to just one or two functions.

Example

Syntax

Description

.click(functionName)

jQuery(".post")

Binds a function to the click

.click(function(){//

event type, executed on a

code});

single click.

.dbclick(functionName)

jQuery(".post")

Binds a function to the click

.dbclick(function(){//

event type, executed on a

code});

double click.

.hover(functionName1,

jQuery(".post")

Works with the mouseenter/

functionName2)

.hover(function(){//

mouseleave event types and

code});

binds just two functions to

the selected elements, to be

executed on mouseenter and

mouseleave.

.toggle(functionName1,

jQuery(".post")

Works with the click event

functionName2,

.toggle(function(){//

type and binds two or more

functionName3, etc)

code});

functions to the selected

elements, to be executed on

alternate clicks.

.mouseenter(functionN

jQuery(".post")

Binds a function to be executed

ame)

.mouseenter(function()

{//

when the mouse enters the

code});

selected elements.

.mouseleave(functionN

jQuery(".post")

Binds a function to be executed

ame)

.mouseleave(function()

{//

when the mouse leaves the

code});

selected elements.

Example

Syntax

Description

.keydown(functionName) jQuery(".post")

.keyup(functionName)

jQuery(".post")

Binds a function to the keydown event type, executed only when the selected element has a focus and keys are pressed down.

Binds a function to the keyup event type, executed only when the selected element has a focus and keys are pressed then released.

With events comes a more live and dynamic page. Let's set up a very simple hover on our sidebar navigation items:

jQuery(".widget-area li ul li").hover(function(){ jQuery(this).css("background", "#f60");

function(){

jQuery(this).css("background", "none");

f Search )

Recent Posis

Recent Com men ts

Archives

Categories

■ Uncategorized

Meta

Was this article helpful?

0 0
Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment