jQuery Essentialsby Marc Grabanskiv2.We needed a hero to get these guys in line.jQuery ppt

Selector Examples$“li:first” get first list item... Selector Examples$“li:first” get first list item... jQuery Factory Method $You can also pass $ a functionto run the function after the

jQuery Essentials

by Marc Grabanski

v2

We needed a hero to get these guys in line

jQuery rescues us by working the same in all browsers!

Easier to write jQuery than pure JavaScript

HTML is tied to JavaScript

jQuery Philosophy

#1 Find some HTML jQuery Philosophy

#1 Find some HTML

#2 Do something to it jQuery Philosophy

Find

elements

Give $() a selector

Give $() a selector

$(“ #myId ”)

Give $() a selector

$(“ #myId ”) $(“ myClass ”)

Give $() a selector

$(“ #myId ”) $(“ myClass ”) $(“ table ”)

Selector Examples

Selector Examples

$(“li:first”) get first list item

Selector Examples

$(“li:first”) get first list item

Selector Examples

$(“li:first”) get first list item

get all links who’s target is “_blank”

Selector Examples

$(“li:first”) get first list item

You can also string selectors together

You can also string selectors together

$(“ #myId, myClass, table ”)

Find

Do addClass(“ redbox ”);

$(“div”)

Find

jQuery API Spice

Two things that make the API HOT

Chain Methods

Chain Methods

.fadeOut();

$( ) html();

One Method, Many Uses

$( ) html();

One Method, Many Uses

jQuery Methods

• Moving Elements:

append (), appendTo (), before (), after (),

jQuery Factory Method $()You can also pass $() a function

to run the function after the page loads

jQuery Factory Method $()

You can also pass $() a function

to run the function after the page loads

});

jQuery Factory Method $()

You can also pass $() a function

to run the function after the page loads

});

code here will execute after DOM is ready

jQuery Factory Method $()

You can also pass $() a function

to run the function after the page loads

});

Note: This is essentially the same as

code here will execute after DOM is ready

jQuery Factory Method $()

You can also pass $() a function

to run the function after the page loads

});

Note: This is essentially the same as

code here will execute after DOM is ready

you will see this in tutorials around the net

Move paragraphs to element with id “foo”

Moving Elements Examples

Move paragraphs to element with id “foo”

Moving Elements Examples

.appendTo(“#foo”);

Attributes

Get

.attr(‘id’)

Get

.html()

.attr(‘id’, ‘foo’)

.val(“new val”)

.width()

.css(“top”)

.attr(‘id’, ‘foo’)

.val(“new val”)

.width()

.css(“top”) .css(“top”, “80px”)

.attr(‘id’, ‘foo’)

.val(“new val”)

.width() .width(60)

.css(“top”) .css(“top”, “80px”)

Attributes

$( ) css (“ border ”, “ 1px solid black ”); Set border to 1px black

Attributes

$( ) css (“ border ”, “ 1px solid black ”); Set border to 1px black

Set various css properties.

$( ) css (“ border ”, “ 1px solid black ”);

Set border to 1px black

Set various css properties.

$( ) html (“ <p>I’m new</p> ”);

Replace HTML with a new paragraph.

Attributes

$( ) html (“ <p>I’m new</p> ”);

Replace HTML with a new paragraph.

Attributes

<div>whatever</div> turns into

<div> <p>I’m new</p> </div>

$( ) html (“ <p>I’m new</p> ”);

Replace HTML with a new paragraph.

Set checkboxes attribute “checked” to checked.

$(“ :checkbox ”) attr (“ checked ”,” checked ”);

Attributes

<div>whatever</div> turns into

<div> <p>I’m new</p> </div>

$( ) html (“ <p>I’m new</p> ”);

Replace HTML with a new paragraph.

Set checkboxes attribute “checked” to checked.

$(“ :checkbox ”) attr (“ checked ”,” checked ”);

$( ) val (“ 3 ”);

Set input value to 3.

Attributes

<div>whatever</div> turns into

<div> <p>I’m new</p> </div>

$( ) html (“ <p>I’m new</p> ”);

Replace HTML with a new paragraph.

Set checkboxes attribute “checked” to checked.

$(“ :checkbox ”) attr (“ checked ”,” checked ”);

<div>whatever</div> turns into

<div> <p>I’m new</p> </div>

Events Examples

Events

$(“ button ”) click ( function(){

something();

} );

When a button is clicked, do something

Events

$(“ button ”) click ( function(){

something();

} );

When a button is clicked, do something

Setup a custom event and trigger it.

$(“ button “) bind (“ expand ”, function(){ something();

});

$(“ button:first “) trigger (“ expand ”);

Events

$(“ button ”) click ( function(){

something();

} );

When a button is clicked, do something

Setup a custom event and trigger it.

$(“ button “) bind (“ expand ”, function(){ something();

});

$(“ button:first “) trigger (“ expand ”);

Events

$(“ button “) unbind (“ expand ”);

Unbind custom event.

Event Delegation

$(“ button ”) live (‘ click ’, function(){

$(“ button ”) live (‘ click ’, function(){

something();

} );

Event Delegation

Attach events to document

Attach event delegation to elements

$(“ form “) delegate (“ button ”, ” click ”, function(){ something();

});

Effects / Animation

Examples

Animation / EffectsTypes of Effects

Animation / Effects

#1 Hide and ShowTypes of Effects

Animation / Effects

#2 Fade In and Out

#1 Hide and ShowTypes of Effects

Animation / Effects

#2 Fade In and Out

#1 Hide and Show

#3 Slide Up and Down Types of Effects

Animation / Effects

$(“ div:first ”) slideToggle ();

});

With each click, slide up / slide down a div.

Animate elements to 300px wide in 5 seconds.

$( ) animate ({ “ width ”: “ 300px ” }, 500 );

Animation / Effects

$(“ div:first ”) slideToggle ();

});

With each click, slide up / slide down a div.

Animate elements to 300px wide in 5 seconds.

Traversing Examples

Ajax Examples

Ajax Examples

$( ) get (“tag.php”, { “ bar ”: “ baz ” });

Post data, “bar” equals “baz” to tag.php using get.

Ajax Examples

$( ) get (“tag.php”, { “ bar ”: “ baz ” });

Post data, “bar” equals “baz” to tag.php using get.

Post data, “foo” equals “bar” to send.php, then

alert the response

$ post (“ send.php ”, { foo : ” bar ” },

function(response){

alert(response);

} );

Ajax Examples

Extending jQuery

<div> you used myPlugin! </div>

<div> you used myPlugin! </div>

</body>

</html>

$(“div”).myPlugin();

Plugin Example

Wait, There’s More!

jQuery isn’t only about simpler code

jQuery isn’t only about simpler code

jQuery isn’t only about simpler code

It is also about

jQuery isn’t only about simpler code

It is also about

great community

pluginsopen (free) license

speed

light weight code

+javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1

Led to World Domination

jQuery

Usage Across Top 10,000 Sites

http://trends.builtwith.com/javascript

Video Training

Thank you!

Marc Grabanski:

http://marcgrabanski.com