12. • BASICS : Manipulating the DOM
• EVENTS
• EFFECTS
• AJAX : Processing in the Background
Thursday, February 28, 2013
13. JQuery
javascript library designed to simplify client sidescripting
Thursday, February 28, 2013
14. How to Use JQuery
• include jQuery library
• write your SCRIPTS !!!
Thursday, February 28, 2013
15. Querying the DOM
searching the DOM for the elements or objects
$([selectors]) $(‘li’);
[selectors] can be
id - ex. #container
class - ex. .list
element - ex. li
Thursday, February 28, 2013
16. .find() .children()
get the descendant of get the children of each
each element element
syntax: syntax:
$(‘.list’).find(‘li’); $(‘.list’).children(‘li’);
Thursday, February 28, 2013
17. .parents() .parent()
get the ancestors of each get the parent of each
element element
syntax: syntax:
$(‘.current’).parents(‘ul’); $(‘.current’).parent(‘ul’);
Thursday, February 28, 2013
18. .eq() .next()
select an element at get the following sibling element
index n .prev()
get the preceding sibling element
syntax:
$(‘.list’).find(‘li’).eq(2); syntax:
$(‘.list’).find(‘li’).eq(2).next();
$(‘.list’).find(‘li’).eq(2).prev();
Thursday, February 28, 2013
19. Manipulating the DOM
adding new elements, modifying, removing etc.
Thursday, February 28, 2013
20. .addClass() .removeClass()
add specified classes remove a single class
syntax: syntax:
$(‘.list’).children(‘li’).addClass $(‘.current’).removeClass
(‘red’); (‘current’);
Thursday, February 28, 2013
21. .attr()
return the value of an attribute
syntax:
$(‘.current’).find(‘a’).attr(‘href’);
Thursday, February 28, 2013
22. .before()
append content before an element
.after()
append content after an element
.append()
append content at the end of an
element
Thursday, February 28, 2013
25. JQuery
Events Handler
Thursday, February 28, 2013
26. 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
Thursday, February 28, 2013
28. 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!
Thursday, February 28, 2013
29. JQuery
Events Category
Thursday, February 28, 2013
36. Animation
JQuery has built in effects
Examples:
$(h1).hide(“slow”);
$(h1).fadeOut(2000);
$(h1).slideDown(“fast”);
You can chain them
Examples:
$(h1).fadeOut(1000). slideDown();
Thursday, February 28, 2013
37. Or roll your own
JQuery animate()
Syntax:
$(selector).animate({params}, speed, callback);
Example:
$(“#block”).animate({
width: “100px”,
opacity: 0.5,
fontSize: “3em”,
borderWidth: “10px”
}, 1500);
Thursday, February 28, 2013
39. 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.
Thursday, February 28, 2013
40. JQuery AJAX
Syntax:
$.ajax(url, settings); OR SIMPLY
$.ajax(settings);
where settings is a set of key/value pairs which JQuery
calls PlainObject
e.g.
{ key : value }
Thursday, February 28, 2013
42. url
the url to which the request is sent
type
the type of request to make
e.g.
POST, GET
data
the data to be sent to the server
e.g.
{ “name” : “Juan”, “lastname” : “Dela Cruz” }
or
“name=Juan&lastname=Dela Cruz”
Thursday, February 28, 2013
43. dataType
the type of data that you are expecting back from the
server
e.g.
xml, json, script, html, or text
error
a function to be called if the request fails
success
a function to be called if the request succeeds
complete
a function to be called when the request finishes (only
executes after success and error callbacks are executed)
Thursday, February 28, 2013
