Brief intro to jQuery JavaScript library

1. Introduction to
jQuery
JavaScript Library

2. What can we do?
Traverse HTML documents
●
Handle events
●
Perform animations
●
Add Ajax interactions
●

3. Why jQuery?
Fully documented
●
Great Community/Lots of plugins
●
Lightweight
●
Crossbrowser
●
Total separation of layers
●
Easy to learn
●
Elegant coding
●

4. Workflow
Find some HTML element
●
(using CSS 1-
3/basic Xpath)
Do something with it
●

5. Find something
$(“div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

6. Find something
$(“#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

7. Find something
$(“div > div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

8. Find something
$(“div:has(div)”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

9. Do something with it
Change CSS styles:
$(“div”).css({
border: “1px solid green”,
height: “40px”
});

10. Do something with it
Animate:
$(“div”).animate({
left: “+50px”
top: “-50px”
}, 500);

11. Do something with it
Listen Events:
$('a.action_link').click(function(){
$(“#menu”).slideDown(“slow”);
return false;
}).;

12. Do something with it
Manipulate DOM:
$(“a[target]”).append(“ (Opens in New Window)”);

13. Do something with it
Do AJAX calls:
$.get('/page/', function(html){
$('#something').replaceWith($(html).find('#something'));
});