Jquery at-webcamp

transcript

Thursday, February 28, 2013

Want to keep up with best practices?

Want to make your site pop

with ?

Want to make your site pop

with ?fancy effects

Want to check if Javascript is enabled?

Want to add neat hover states?

Want to safely run your code when the page is loaded?

Don’t want to use that pesky CSS?

Don’t want to use boring vanilla Javascript?

Just use !You know when you’re doing it right when you’re loading 12 jQuery plugins.

JQuery

• BASICS : Manipulating the DOM

• EVENTS

• EFFECTS

• AJAX : Processing in the Background

JQuery javascript library designed to simplify client sidescripting

How to Use JQuery

• include jQuery library

• write your SCRIPTS !!!

Querying the DOMsearching the DOM for the elements or objects

$([selectors]) $(‘li’);

[selectors] can be

id - ex. #containerclass - ex. .listelement - ex. li

.find()get the descendant of each element

syntax:

$(‘.list’).find(‘li’);

.children()get the children of each element

syntax:

$(‘.list’).children(‘li’);

.parents()get the ancestors of each element

syntax:

$(‘.current’).parents(‘ul’);

.parent()get the parent of each element

syntax:

$(‘.current’).parent(‘ul’);

.eq()select an element at index n

syntax:

$(‘.list’).find(‘li’).eq(2);

.next()get the following sibling element

.prev()get the preceding sibling element

syntax:

$(‘.list’).find(‘li’).eq(2).next();$(‘.list’).find(‘li’).eq(2).prev();

Manipulating the DOM adding new elements, modifying, removing etc.

.addClass()add specified classes

syntax:

$(‘.list’).children(‘li’).addClass(‘red’);

.removeClass()remove a single class

syntax:

$(‘.current’).removeClass(‘current’);

.attr()return the value of an attribute

syntax:

$(‘.current’).find(‘a’).attr(‘href’);

.before()append content before an element

.after()append content after an element

.append()append content at the end of an element

$(‘.current’).append(‘<p>appended content</p>’);$(‘.list’).find(‘li’).eq(0).after(‘<li>content inserted by after</li>’);

api.jquery.com

JQueryEvents Handler

What are Events?These methods are used to register behaviors to take effect when the user iteracts with the browser, and to further manipulate those registered behaviors.

Examples:• moving a mouse over an element• selecting a radio button• clicking on an element

Javascript Events

JQuery Advantage✓ All of the out-of-the-box functionality in jQuery are in reality extensions.

✓ This includes all the shorthands, like click(), hover(), toggle(), etc., but also the core-methods like bind(), each(), animate(), and so on.

✓ This means that you can detach functionality you are not using, making the library even smaller--file-size wise, as well as memory-footprint wise.

✓ This is pure design-genius!

JQueryEvents Category

Event Handler Attachment

Browser Events

Document Loading

Form Events

Keyboard Events

Mouse Events

api.jquery.com

JQuery has built in effects

Examples:$(h1).hide(“slow”);$(h1).fadeOut(2000);$(h1).slideDown(“fast”);

You can chain them

Examples:$(h1).fadeOut(1000). slideDown();

Animation

JQuery animate()

Syntax:$(selector).animate({params}, speed, callback);

Example:$(“#block”).animate({ width: “100px”, opacity: 0.5, fontSize: “3em”, borderWidth: “10px”}, 1500);

Or roll your own

api.jquery.com

AJAX (Asynchronous Javascript and XML)

a technique used to send or retrieve data from a server in the background without interfering with the

current state of the page.

JQuery AJAXSyntax:$.ajax(url, settings); OR SIMPLY$.ajax(settings);

where settings is a set of key/value pairs which JQuery calls PlainObject

e.g.{ key : value }

Basic Settings

urlthe url to which the request is sent

typethe type of request to make

e.g.POST, GET

datathe data to be sent to the server

e.g.{ “name” : “Juan”, “lastname” : “Dela Cruz” }or“name=Juan&lastname=Dela Cruz”

dataTypethe type of data that you are expecting back from the server

e.g.xml, json, script, html, or text

errora function to be called if the request fails

successa function to be called if the request succeeds

completea function to be called when the request finishes (only executes after success and error callbacks are executed)

api.jquery.com

Jquery at-webcamp

Documents