$30 off During Our Annual Pro Sale. View Details »

jQuery

 jQuery

Ryan L. Cross

July 19, 2011
Tweet

More Decks by Ryan L. Cross

Other Decks in Programming

Transcript

  1. jQuery
    a bad-ass Javascript framework
    Wednesday, September 19, 12

    View Slide

  2. Where
    Javascript ends and
    jQuery begins
    Wednesday, September 19, 12

    View Slide

  3. Javascript
    • Scripting language
    • Not compiled
    • Traditionally client-side
    • Run on the user’s computer
    • Heavy
    Wednesday, September 19, 12

    View Slide

  4. jQuery
    • What is it?
    • A Javascript framework
    • What’s a Javascript framework?
    • A library of pre-written
    Javascript code to allow for
    easier development.
    Wednesday, September 19, 12

    View Slide

  5. It’s dangerous to go alone...
    take this.
    • Understand the DOM
    • jQuery is primary used to
    manipulate the DOM.
    • How to wrap jQuery code
    • We’ll see this in the demo
    Wednesday, September 19, 12

    View Slide

  6. The DOM
    • DOM: Document Object Model
    • Used in HTML, XHTML and XML
    • Used to describe and provide
    access to all elements in a markup
    document.
    Wednesday, September 19, 12

    View Slide

  7. window
    html
    div#container
    section
    section
    p
    Wednesday, September 19, 12

    View Slide

  8. The DOM
    • A great way to semantically label
    and identify elements.
    • A great way to then access those
    elements
    Wednesday, September 19, 12

    View Slide

  9. Selecting Elements
    • CSS
    #box {
    background: white;
    }
    • jQuery
    $('#box')
    $('#box .phrase')
    Wednesday, September 19, 12

    View Slide

  10. A Few Examples
    • Change text
    • Add a class to an element
    • Move an element
    • Hide an element
    Wednesday, September 19, 12

    View Slide

  11. Events
    • Old and busted (inline Javascript)

    I like to class="phrase">do things and such.

    • New hotness (unobtrusive jQuery)
    $('.phrase').click(function(){
    $(this).css('color', 'red');
    });

    O hai!

    Wednesday, September 19, 12

    View Slide

  12. Demo!
    Wednesday, September 19, 12

    View Slide

  13. Alternative
    Frameworks
    • MooTools
    • Prototype and Scriptaculous
    • Dojo
    • Ext JS
    • YUI
    • Lots more...
    http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
    Wednesday, September 19, 12

    View Slide

  14. Resources
    • Javascript
    • Javascript: The Good Parts
    • jQuery
    • http://docs.jquery.com
    • jQuery in Action
    • Ryan L. Cross (@slant)
    Wednesday, September 19, 12

    View Slide

  15. Enclave Discussions
    • Photoshop (August 16th)
    • Bob Crum (Midsummer Night’s Design)
    • Typography (September 20th)
    • Gordon Brander (Crowd Favorite)
    Wednesday, September 19, 12

    View Slide

  16. Thanks!
    Wednesday, September 19, 12

    View Slide