jQuery is a popular JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax much simpler. It was created in 2005 by John Resig and is now used on over 80% of the most visited websites. jQuery offers tools for selecting elements, modifying CSS properties, handling events, adding animation effects, and loading data from servers via Ajax without full page refreshes.

1. jQuery
write less, do more.
Alessandro Fazzi
@Pioneer_Skies
Torino Coding Society
26 maggio 2014
Filippo Gangi Dino
@mukkoo

2. Jquery?

3. Fast, small, and feature-rich JavaScript library
HTML document traversal and manipulation, event handling,
animation
Ajax much simpler with an easy-to-use API
Used by over 80% of the 10,000 most visited websites,
jQuery is the most popular JavaScript library in use today.
Plugins
Cross browser

4. Javascript is boring
jQuery is funny!

5. History

6. Created by this man in august 2005
John Resig
American developer with a
Computer Science degree
Working in Japan
Author of “Secrets of
the JavaScript Ninja”

7. In 2005 was Behaviour (JS Library)
“The premise for the library is as follows: Using the power of
Pseudo-CSS Selectors, bind your Javascript functions to
various HTML elements in the DOM.”
“Looking at how Behaviour works, I’ve never been completely
happy – it simply seems too tedious and verbose for everyday
use.”

8. You can’t do any heirarchical selectors. For example, binding to
“#foo bar” and “#foo bar .baz” fall under two completely
different statements. It seems as if this could/should be
streamlined.
The Behaviour object doesn’t provide any sort of binding-
enhancers to make attaching to an event (e.g. “click”) easier to
do.
The resulting Behaviour code is simply too verbose and too
ugly – there is an excess of characters/formatting which will
probably scare off a casual Javascript programmer.

9. Behaviour
Behaviour.register({
'#foo ol li': function(a) {
a.title = "List Items!";
a.onclick = function(){alert('Hello!');};
},
'#foo ol li.tmp': function(a) {
a.style.color = 'white';
},
'#foo ol li.tmp .foo': function(a) {
a.style.background = 'red';
}
});
$('#foo ol li')
.set('title','List Items!')
.bind('click',function(){alert('Hello!');})
.select('.tmp')
.style('color','white')
.select('.foo')
.style('background','red');
jQuery

10. Ben Nolan (Behaviour creator)
“Jquery is like behaviour
that has been sent back
from the future by a
secret fucking government
lab”

11. BarCampNYC january 2006
first jQuery release
“ this code revolutionizes the way you can
get Javascript to interact with HTML”

12. aRound jQuery
wOrld

13. There are two version already developed by jQuery team: 1 & 2
The main difference between two versions, more than
some deprecated functions, is the browser support.
Since the v2 first release was removed IE 6-8 support for
performance improvement and reduce filesize.
Versions

14. Sizzle
jQuery galaxy

15. Learn jQuery in
30 days
1 week
1 hour
5 minutes!

16. jQuery offers a powerful set of tools for matching a set of
elements in a document.
1. Selectors
class selector $(‘.class’)
element selector $(‘element’)
id selector $(‘#class’)
button selectors $(‘:button’), $(‘:checked’)...
...and more.
You can use all the CSS selectors

17. These methods get and set CSS-related properties of
elements.
2. CSS
.addClass()
.css()
.height()
.toggleClass()
.width()
.scrollLeft()
.scrollTop()

18. These methods are used to register behaviors to take effect
when the user interacts with the browser.
3. Events
.change()
.click()
.preventDefault()
.hover()
.mouseenter()
.resize()
.ready()

19. Add animation to a web page.
4. Effects
.animate()
.fadeIn()
.slideToggle()
.show()
.toggle()
.delay()

20. The functions and methods therein allow us to load data from
the server without a browser page refresh.
5. Ajax
.ajaxSend()
.ajaxComplete()
.ajaxError()
.ajaxSuccess()
.get()
.getJSON()

22. ...and now
LIVE CODING
LIVE MAGIC
github.com/pioneerskies/tcs_jquery_excercises