jQuery('#knowledge').appendTo('#you');

jQuery Conference San Francisco Bay Area 2010 jQuery Project - jquery.org (Software Freedom Conservancy) jQuery Core jQuery UI jquery.com jqueryUI.com Sizzle JS QUnit sizzlejs.com qunitjs.com Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Using jQuery ‣ jquery.com Downloading ‣ api.jquery.com Documentation ‣ forum.jquery.com Community ‣ meetups.jquery.com Local Community ‣ plugins.jquery.com Extending ‣ jqueryui.com Project Supported UI Library Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Including jQuery ‣ Download jQuery.com ‣ Locations ‣ Self hosted Download and include in your project ‣ CDN Google, Microsoft, jQuery ‣ Forms ‣ Source vs. Miniﬁed Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Finding Something // Select By ID <div id=”foo”></div> <div></div> $(‘#foo’); <div id=”foo”></div> <div></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Finding Something // Select by class <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> $(‘.myClass’) <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Finding Something // Select by tag <ul> <li>Apple</li> <li>Pear</li> </ul> $(“li”); <ul> <li>Apple</li> <li>Pear</li> </ul> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Finding Something in Context ‣ Entire Document $(‘div’) ‣ Scope your selector $(‘selector’, <context>) $(‘#table’).ﬁnd(‘selector’) ‣ $(‘a’).click(function() { $(‘span’, this)... }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Do Something <p>One</p> <p>Two</p> <p>Three</p> // Find Something $(‘p’) // Do Something $(‘p’).hide(); // Generic Syntax $(‘p’) . <Method Name> ( [PARAMETERS] ); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Showing and Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Iteration <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.ﬂoor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Styling // HTML <p>One</p> <p class=”foo”>Two</p> <p>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Styling // HTML <p class=”enabled”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Styling // HTML <p class=”enabled”>One</p> <p class=”enabled”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Styling // HTML <p class=”enabled foo”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled foo”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Method Chaining $(‘tr:odd’).addClass(‘odd’) .ﬁnd(‘td.company’) .addClass(‘companyName’); $(‘tr:odd’).addClass(‘odd’) .ﬁnd(‘td.company’) .addClass(‘companyName’) .end(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Method Chaining $(‘tr’) .ﬁlter(‘:odd’) .addClass(‘odd’) .end() .ﬁnd(‘td.company’) .addClass(‘companyName’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Creating Elements // New in 1.4 $("<div/>", { class: "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }); // Clicking toggles the class <div class=”test”>Click me!</div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Inserting Elements // Before <p>Apple</p> <p>Orange</p> $(‘p’).after(‘<img src=”logo.png” />’); // After <p>Apple</p> <img src=”logo.png /> <p>Orange</p> <img src=”logo.png /> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Inserting Elements // Before <p id=”apple”>Apple</p> <p id=”orange”>Orange</p> $(‘<img src=”apple.png” />’).prependTo(‘#apple’); $(‘<img src=”orange.png” />’).appendTo(‘#orange’); // After <p id=”apple”><img src=”apple.png” />Apple</p> <p id=”orange”>Orange<img src=”orange.png” /></p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Removing Elements // Before <div> <p>Red</p> <p>Green</p> </div> // Removing Elements Directly $(‘p’).remove(); // After <div> </div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Wrapping Elements // Before <p>Hello world</p> <p>Foo bar</p> $(‘p’).wrap(‘<div></div>’); // After <div><p>Hello world</p></div> <div><p>Foo bar</p></div> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Unwrapping Elements (new in 1.4+) // Before <div><p>Hello world</p></div> <div><p>Foo bar</p></div> //Individually $(‘p’).unwrap(); // After <p>Hello world</p> <p>Foo bar</p> Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Click Event // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Click Event // HTML <p>One</p> <p style=”color: red”>Two</p> // Clicked! <p>Three</p> $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Hover Pseudo Event // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).hover(function(event) { $(this).css(‘color’, ‘red’); }, function() { $(this).css(‘color’, ‘’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Binding & Unbinding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Add event $(‘p’).bind(‘click’,function(event) { $(this).css(‘color’, ‘red’); }); // Remove event $(‘p’).unbind(‘click’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Binding Events with .bind() // Binding an event $('a.tab').bind('click',function(e){ // event handling code $(this).css(‘color’, ‘red’); }); // Unbinding an event $('a.tab').unbind('click'); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Binding Events // Bind an event to execute once $('a.tab').one('click',function(e){ // event handling code $(this).css(‘color’,‘red’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Making a Request $.get(‘page.php’, function(data) { $(data).appendTo(‘body’); }, ‘html’); var data = { fname: ‘Jonathan’ }; $.post(‘page.php’, data, function(data) { $(data).appendTo(‘body’); }, ‘html’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Making a Request JSON // Response {“names”: [“Jonathan”, “Mike”, “Rob”], “states”: {“NE” : “Nebraska”}, “year” : “2010” } $.getJSON(‘page.php’, function(json) { $(‘body’).append( json.names[0] ); $(‘body’).append( json.states.NE ); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Making a Request JSON // Response { “names”: [“Jonathan”, “Mike”, “Rob”] } $.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); }); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Writing your ﬁrst Plugin $.fn.elementCount = function() { alert(‘Element count: ’ + this.length); }; $(‘p’).elementCount(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Plugins and Iteration $.fn.elementCount = function() { // this is a jQuery Object this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); }; $(‘p’).elementCount(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Plugins and Chaining $.fn.elementCount = function() { // this is a jQuery Object return this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); }; $(‘p’).elementCount().addClass(‘active’);; Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 Plugins and Chaining // Plugin is required to return this $.fn.stPatricks = function() { return this.css(‘color’, ‘green’); }; $(‘p’).stPatricks().addClass(‘active’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 The Plugin Pattern (function($) { $.fn.elementCount = function() { return this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); }; })(jQuery); $(‘p’).elementCount(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 The Plugin Pattern (function($) { $.fn.elementCount = function(options) { return this.each(function(i) { var j = i + options.start; $(this).html($(this).html() +‘ ‘+ j); }); }; })(jQuery); $(‘p’).elementCount({start: 10}); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

jQuery Conference San Francisco Bay Area 2010 The Plugin Pattern (function($) { $.fn.elementCount = function(options) { var j; if ( $.isFunction(options.begin) ) { options.begin(); } return this.each(function(i) { j = i + options.start; $(this).html($(this).html() +‘ ‘+ j); }); }; })(jQuery); $(‘p’).elementCount( start: 10, begin: function() {alert(‘BEGIN!’)} }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY

http://mike-hostetler.com	144
http://www.slideshare.net	76
http://speakerrate.com	38
http://feeds.feedburner.com	24
http://translate.googleusercontent.com	1
http://dev.mike-hostetler.com	1
http://amountaintop.com	1
http://www.amountaintop.com	1
http://paper.li	1

jQuery('#knowledge').appendTo('#you');

by mikehostetler on Apr 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 287

Statistics

jQuery(’#knowledge’).appendTo(’#you’); — Presentation Transcript