Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jquery, write less do more by weLaika

Jquery, write less do more by weLaika

Filippo Gangi Dino

July 31, 2014
Tweet

More Decks by Filippo Gangi Dino

Other Decks in Programming

Transcript

  1. jQuery write less, do more. Alessandro Fazzi @Pioneer_Skies Torino Coding

    Society 26 maggio 2014 Filippo Gangi Dino @mukkoo
  2. 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
  3. 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”
  4. 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.”
  5. 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.
  6. 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
  7. Ben Nolan (Behaviour creator) “Jquery is like behaviour that has

    been sent back from the future by a secret fucking government lab”
  8. BarCampNYC january 2006 first jQuery release “ this code revolutionizes

    the way you can get Javascript to interact with HTML”
  9. 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
  10. 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
  11. These methods get and set CSS-related properties of elements. 2.

    CSS .addClass() .css() .height() .toggleClass() .width() .scrollLeft() .scrollTop()
  12. 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()
  13. Add animation to a web page. 4. Effects .animate() .fadeIn()

    .slideToggle() .show() .toggle() .delay()
  14. 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()