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

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


The jQuery Project

THE jOUERY COMPANY


jQuery Project - jquery.org
(Software Freedom Conservancy)

jQuery Core jQuery UI

jquery.com jqueryUI.com

Sizzle JS QUnit

sizzlejs.com qunitjs.com

THE jOUERY COMPANY


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

THE jOUERY COMPANY


Including jQuery

THE jOUERY COMPANY


Including jQuery
‣ Download jQuery.com

‣ Locations

‣ Self hosted Download and include in your project

‣ CDN Google, Microsoft, jQuery

‣ Forms

‣ Source vs. Miniﬁed

THE jOUERY COMPANY


Source

Miniﬁed
THE jOUERY COMPANY


Finding Something

THE jOUERY COMPANY


Finding Something
// Select By ID

<div id=”foo”></div>
<div></div>

$(‘#foo’);

<div id=”foo”></div>
<div></div>

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


Finding Something
// Select by tag
<ul>
<li>Apple</li>
<li>Pear</li>
</ul>

$(“li”);

<ul>
<li>Apple</li>
<li>Pear</li>
</ul>

THE jOUERY COMPANY


Finding Something in Context
‣ Entire Document
$(‘div’)

‣ Scope your selector
$(‘selector’, <context>)
$(‘#table’).ﬁnd(‘selector’)

‣ $(‘a’).click(function() {
$(‘span’, this)...
});

THE jOUERY COMPANY


Demo!

THE jOUERY COMPANY


Do Something

THE jOUERY COMPANY


Do Something
<p>One</p>
<p>Two</p>
<p>Three</p>

// Find Something
$(‘p’)
// Do Something
$(‘p’).hide();

// Generic Syntax
$(‘p’) . <Method Name> ( [PARAMETERS] );

THE jOUERY COMPANY


Showing and Hiding
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>

// Show the elements
$(‘p’).show();

// Hide the elements
$(‘p’).hide();

THE jOUERY COMPANY


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();
}
});

THE jOUERY COMPANY


Styling
// HTML
<p>One</p>
<p class=”foo”>Two</p>
<p>Three</p>

$(‘p’).addClass(‘enabled’);

$(‘p’).removeClass(‘foo’);

$(‘p’).toggleClass(‘foo’);

THE jOUERY COMPANY


Styling
// HTML
<p class=”enabled”>One</p>
<p class=”enabled foo”>Two</p>
<p class=”enabled”>Three</p>




THE jOUERY COMPANY


Styling
// HTML
<p class=”enabled”>One</p>
<p class=”enabled”>Two</p>
<p class=”enabled”>Three</p>




THE jOUERY COMPANY


Styling
// HTML
<p class=”enabled foo”>One</p>
<p class=”enabled foo”>Two</p>
<p class=”enabled foo”>Three</p>




THE jOUERY COMPANY


Method Chaining

THE jOUERY COMPANY


Method Chaining
$(‘tr:odd’).addClass(‘odd’)
.ﬁnd(‘td.company’)
.addClass(‘companyName’);

$(‘tr:odd’).addClass(‘odd’)
.addClass(‘companyName’)
.end();

THE jOUERY COMPANY


Method Chaining
$(‘tr’)
.ﬁlter(‘:odd’)
.addClass(‘odd’)
.end()
.addClass(‘companyName’);

THE jOUERY COMPANY


DOM Manipulation

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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 />

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


Removing Elements
// Before
<div>
<p>Red</p>
<p>Green</p>
</div>

// Removing Elements Directly
$(‘p’).remove();

// After
<div>
</div>

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


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>

THE jOUERY COMPANY


Binding Events

THE jOUERY COMPANY


Click Event
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>

$(‘p’).click(function(event) {
$(this).css(‘color’, ‘red’);
});

THE jOUERY COMPANY


Click Event
// HTML
<p>One</p>
<p style=”color: red”>Two</p> // Clicked!
<p>Three</p>

$(‘p’).click(function(event) {
});

THE jOUERY COMPANY


Hover Pseudo Event
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>

$(‘p’).hover(function(event) {
}, function() {
$(this).css(‘color’, ‘’);
});

THE jOUERY COMPANY


Binding & Unbinding
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>

// Add event
$(‘p’).bind(‘click’,function(event) {
});

// Remove event
$(‘p’).unbind(‘click’);

THE jOUERY COMPANY


Binding Events with .bind()
// Binding an event

$('a.tab').bind('click',function(e){
// event handling code
});

// Unbinding an event

$('a.tab').unbind('click');

THE jOUERY COMPANY


Binding Events
// Bind an event to execute once

$('a.tab').one('click',function(e){
// event handling code
$(this).css(‘color’,‘red’);
});

THE jOUERY COMPANY


Ajax

THE jOUERY COMPANY


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’);

THE jOUERY COMPANY


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 );
});

THE jOUERY COMPANY


Making a Request JSON
// Response
{ “names”: [“Jonathan”, “Mike”, “Rob”] }

$.getJSON(‘page.php’, function(json) {
$.each(json.names, function(i, val) {
$(‘body’).append( val );
});
});

THE jOUERY COMPANY


Writing Your First Plugin

THE jOUERY COMPANY


Writing your ﬁrst Plugin
$.fn.elementCount = function() {
alert(‘Element count: ’ + this.length);
};

$(‘p’).elementCount();

THE jOUERY COMPANY


Plugins and Iteration
// this is a jQuery Object
this.each(function(i) {
$(this).html($(this).html() +‘ ‘+ i);
});
};


THE jOUERY COMPANY


Plugins and Chaining
// this is a jQuery Object
return this.each(function(i) {
});
};

$(‘p’).elementCount().addClass(‘active’);;

THE jOUERY COMPANY


Plugins and Chaining
// Plugin is required to return this
$.fn.stPatricks = function() {
return this.css(‘color’, ‘green’);
};

$(‘p’).stPatricks().addClass(‘active’);

THE jOUERY COMPANY


The Plugin Pattern

THE jOUERY COMPANY


The Plugin Pattern
(function($) {
});
};
})(jQuery);


THE jOUERY COMPANY


The Plugin Pattern
(function($) {
$.fn.elementCount = function(options) {
var j = i + options.start;
$(this).html($(this).html() +‘ ‘+ j);
});
};
})(jQuery);

$(‘p’).elementCount({start: 10});

THE jOUERY COMPANY


The Plugin Pattern
(function($) {
$.fn.elementCount = function(options) {
var j; if ( $.isFunction(options.begin) ) { options.begin(); }
j = i + options.start;
$(this).html($(this).html() +‘ ‘+ j);
});
};
})(jQuery);
$(‘p’).elementCount( start: 10,
begin: function() {alert(‘BEGIN!’)}
});

THE jOUERY COMPANY


Thank You!
Mike Hostetler
@mikehostetler
http://mike-hostetler.com

THE jOUERY COMPANY

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

More Related Content

What's hot

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

Recently uploaded

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