jQuerywrite less, do more.

Alessandro Fazzi@Pioneer_Skies

Torino Coding Society26 maggio 2014

Filippo Gangi Dino@mukkoo

Jquery?

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

Javascript is boringjQuery is funny!

History

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”

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.”

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.

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

Ben Nolan (Behaviour creator)

“Jquery is like behaviour that has been sent back from the future by a

secret fucking government lab”

BarCampNYC january 2006 first jQuery release

“ this code revolutionizes the way you can get Javascript to interact with HTML”

aRound jQuery wOrld

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

Sizzle

jQuery galaxy

Learn jQuery in

30 days1 week1 hour

5 minutes!

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

These methods get and set CSS-related properties of elements.

2. CSS

.addClass()

.css()

.height()

.toggleClass()

.width()

.scrollLeft()

.scrollTop()

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()

Add animation to a web page.

4. Effects

.animate()

.fadeIn()

.slideToggle()

.show()

.toggle()

.delay()

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()

...and now

LIVE CODINGLIVE MAGIC

github.com/pioneerskies/tcs_jquery_excercises