Date post: | 10-May-2015 |
Category: |
Software |
Upload: | filippo-dino |
View: | 167 times |
Download: | 0 times |
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