Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Jquery, write less do more by weLaika
Similaire à Jquery, write less do more by weLaika (20)
Dernier
Dernier (20)
Jquery, write less do more by weLaika
- 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”
- 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
- 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