jQuery

Transcript

1. Enclave Discussions by Ryan L. Cross Tuesday, September 18, 12
2. What is jQuery? j•Query noun \jā-ˈkwir-ē\ A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Tuesday, September 18, 12
3. The Players ‣ The jQuery object ‣ jQuery(document) ‣ $(document) ‣ Selectors ‣ $('div') ‣ Methods ‣ $('p').show() ‣ Method chaining ‣ $('p').val('Hello there').show() ‣ Functions ‣ function say(something) { alert(something) } ‣ (function(){ alert("Hello there!") })() Tuesday, September 18, 12
4. Selectors ‣ Element selector ‣ $('p') ‣ ID and Class selectors ‣ $('div#things') ‣ $('p.note') ‣ Attribute selectors ‣ $('input[type=text]') ‣ Pseudo selectors ‣ $('input:focus') ‣ $('input:blur') ‣ Pseudo selectors ‣ $(':has(p)') http://api.jquery.com/category/selectors An extremely powerful way to specify which elements you want. <p>first</p> <p>second</p> <div id="things"></div> <p class="note"></p> <input type="text" /> <input /> <div><p></p></div> Tuesday, September 18, 12
5. Effects ‣ Show and hide ‣ $('#box').hide() ‣ $('#box').show() ‣ Fade ‣ $('#box').fadeOut() ‣ $('#box').fadeIn() ‣ Animate ‣ $('#box').animate( { opacity: 0.5 }, 5000, function(){ alert('It moved!') } ) http://api.jquery.com/category/effects Making things look pretty Tuesday, September 18, 12
6. Events ‣ Events in general ‣ $('button').click(function(){ alert('Clicked!') }) ‣ $('input').focus(function(){ alert('Please type a thing.') }) ‣ A problem ‣ $('.add-li').click(function(){ $('ul').append('<li class="cats"></li>') }) ‣ $('.cats').click(function(){ alert('Clicked!') }) ‣ bind() and live() ‣ $(...).bind(...) ‣ $(...).live(...) ‣ Introducing on() ‣ $('button').on('click', function(){ alert('Clicked!') }) http://api.jquery.com/category/events Responding to user actions Tuesday, September 18, 12
7. Hey document, are you ready? ‣ document object ‣ $(document).ready() ‣ $(document).ready(function(){ // do things here }) Tuesday, September 18, 12
8. AJAX ‣ AJAX requests ‣ $.ajax({ url: 'http://example.com/users.json', data: { name: 'Ryan' }, type: 'post', complete: function(data, textStatus, jqxhr){ alert('Done!') } }) ‣ GET requests ‣ $.get('http://example.com/users.json') ‣ POST requests ‣ $.post( 'http://example.com/users.json', { name: 'Ryan' }, function(data){ alert('Done!') } ) ‣ load() ‣ $('#things').load('http://example.com/users.json') http://api.jquery.com/category/events How to communicate with an API Tuesday, September 18, 12
9. Live Demo Guaranteed to fail many times! Tuesday, September 18, 12
10. Fin Tuesday, September 18, 12
11. Ryan L. Cross github.com/cylence @slant Coming up next Oct 16, 2012 Backbone.js Nov 20, 2012 Node.js Tuesday, September 18, 12