• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery('#knowledge').appendTo('#you');
 

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

on

  • 5,824 views

...


*
Dsc02922_small Mike Hostetler 4.07

CEO at appendTo, LLC
4 talks

Description:

This talk will be a quick but thorough introduction to the jQuery Javascript Library. If you have zero experience with jQuery, this is the talk to start with. We will begin with a brief overview of jQuery and its history. We'll then introduce basic jQuery concepts and principles. To wrap up the session, we'll build a basic jQuery plugin.

This talk will be composed mainly of live coding, showing off examples of how to work with jQuery.

The content of this talk will be quite a bit different from the jQuery training offered prior to the conference. Because of the available time, the training will explore jQuery concepts in great depth, while this talk will cover them briefly.

Statistics

Views

Total Views
5,824
Views on SlideShare
5,491
Embed Views
333

Actions

Likes
10
Downloads
0
Comments
1

11 Embeds 333

http://mike-hostetler.com 151
http://www.slideshare.net 76
http://feeds.feedburner.com 50
http://speakerrate.com 44
http://www.linkedin.com 6
http://paper.li 1
http://www.amountaintop.com 1
http://amountaintop.com 1
http://dev.mike-hostetler.com 1
http://translate.googleusercontent.com 1
http://www.netvibes.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi,

    Its really grate to have watch PPT like this.

    is it possible to save or download it.

    Please...???
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

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

  • jQuery Conference San Francisco Bay Area 2010 jQuery('#knowledge') .appendTo('#you'); Mike Hostetler @mikehostetler http://mike-hostetler.com Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 The jQuery Project Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • 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 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. Minified Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Source Minified Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Finding Something 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’).find(‘selector’) ‣ $(‘a’).click(function() { $(‘span’, this)... }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Demo! Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Do Something 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 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.floor( Math.random() * 1 ); if(rand > 1) { $(this).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.floor( Math.random() * 1 ); if(rand > 1) { $(this).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.floor( 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 Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Method Chaining $(‘tr:odd’).addClass(‘odd’) .find(‘td.company’) .addClass(‘companyName’); $(‘tr:odd’).addClass(‘odd’) .find(‘td.company’) .addClass(‘companyName’) .end(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Method Chaining $(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 DOM Manipulation 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 Binding Events 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 Demo! Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Ajax 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 First Plugin Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Writing your first 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 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
  • jQuery Conference San Francisco Bay Area 2010 Demo! Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY
  • jQuery Conference San Francisco Bay Area 2010 Thank You! Mike Hostetler @mikehostetler http://mike-hostetler.com Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY