Jquery at-webcamp

`

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


Documents

Jquery at-webcamp