jQuery

 jQuery

4a25d6bbb0e5ea5e1cf777fa6ede1102?s=128

Ryan L. Cross

July 19, 2011
Tweet

Transcript

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

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

  3. Javascript • Scripting language • Not compiled • Traditionally client-side

    • Run on the user’s computer • Heavy Wednesday, September 19, 12
  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
  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
  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
  7. window html div#container section section p Wednesday, September 19, 12

  8. The DOM • A great way to semantically label and

    identify elements. • A great way to then access those elements Wednesday, September 19, 12
  9. Selecting Elements • CSS #box { background: white; } •

    jQuery $('#box') $('#box .phrase') Wednesday, September 19, 12
  10. A Few Examples • Change text • Add a class

    to an element • Move an element • Hide an element Wednesday, September 19, 12
  11. Events • Old and busted (inline Javascript) <div id="box"> <p

    onclick="javascript:this.style.color='red';">I like to <span class="phrase">do things and such</span>.</p> </div> • New hotness (unobtrusive jQuery) $('.phrase').click(function(){ $(this).css('color', 'red'); }); <div id="box"> <p>O hai!</p> </div> Wednesday, September 19, 12
  12. Demo! Wednesday, September 19, 12

  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
  14. Resources • Javascript • Javascript: The Good Parts • jQuery

    • http://docs.jquery.com • jQuery in Action • Ryan L. Cross (@slant) Wednesday, September 19, 12
  15. Enclave Discussions • Photoshop (August 16th) • Bob Crum (Midsummer

    Night’s Design) • Typography (September 20th) • Gordon Brander (Crowd Favorite) Wednesday, September 19, 12
  16. Thanks! Wednesday, September 19, 12