SlideShare a Scribd company logo
1 of 54
Download to read offline
Richard D. Worth, jQuery Team
http://twitter.com/rworth
Open Source (MIT, GPL)
JavaScript Library
Richard D. Worth
John Resig, Author
Mozilla, JavaScript Evangelist
http://ejohn.org/
January 2006
BarCampNYC
History
Richard D. Worth
Minimal
Lightweight (19kb)
Unobtrusive
Richard D. Worth
Browser Compatible
IE6+
Safari 3+
Chrome
FF2+
Opera 9+
Richard D. Worth
reddit.com
espn.com
ibm.com
boxee.tv
bit.ly
twitpic.com
whitehouse.gov
microsoft.com
amazon.com
netflix.com
stackoverflow.com
bing.com
monster.com
tv.com
overstock.com
time.com
capitalone.com
wordpress.com
dell.com
twitter.com
w3.org
Who’s Using jQuery
Richard D. Worth
reddit.com
ddit.c
espn.com
n.com
ibm.com
i m
oxee.tv
boxe
bi
bit.ly
twitpic.com
whitehouse.gov
microsoft.com
c
amazon.com
am
netflix.com
bing.com
monster.com
tv.com
overstock.com
time.com
capitalone.com
wordpress.com
dell.com
twitter.com
w3.org
Who’s Using jQuery
Richard D. Worth
stackoverflow.com
Changes the way
you write
JavaScript
Richard D. Worth
var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++) {
var rows = tables[t].getElementsByTagName('tr');
for (var i = 1; i < rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += ' odd';
}
}
}
Richard D. Worth
jQuery('table tr:nth-child(odd)')
.addClass('odd');
Richard D. Worth
$ == jQuery
jQuery $ Alias
Richard D. Worth
jQuery Pattern
Find Things
Do Stuff
Richard D. Worth
$( )
. ();
jQuery Pattern
Find Things
Do Stuff
Richard D. Worth
$("div").hide();
$("button").remove();
$("form").submit();
$("p").addClass("special");
$("span").show("fast");
Richard D. Worth
<!DOCTYPE html><html><body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul');
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li');
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
jQuery('#nav a');
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
jQuery('#nav a').each(function(){
jQuery(this);
});
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
jQuery('#nav a').each(function(){
jQuery(this);
});
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a href="/home">home</a></li>
<li class="item"><a href="/about">about</a></li>
</ul>
<script src="jquery.js"></script><script>
jQuery('ul').attr('id', 'nav');
jQuery('#nav li').addClass('item');
jQuery('#nav a').each(function(){
jQuery(this).attr('href', '/' + jQuery(this).text());
});
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a href="/home">home</a></li>
<li class="item"><a href="/about">about</a></li>
</ul>
<script src="jquery.js"></script><script>
$('ul').attr('id', 'nav');
$('#nav li').addClass('item');
$('#nav a').each(function(){
$(this).attr('href', '/' + $(this).text());
});
</script>
</body></html>
Richard D. Worth
<!DOCTYPE html><html><body>
<ul id="nav">
<li class="item"><a href="/home">home</a></li>
<li class="item"><a href="/about">about</a></li>
</ul>
<script src="jquery.js"></script><script>
$('ul').attr('id', 'nav');
$('#nav li').addClass('item').find('a').each(function(){
$(this).attr('href', '/' + $(this).text());
});
</script>
</body></html>
Richard D. Worth
jQuery Object
Collection of DOM Elements
Array-like
Holds the methods
Richard D. Worth
Selectors
CSS 1-3 (better than most browsers)
Basic XPath via a plugin
Custom jQuery selectors
Richard D. Worth
$("div#nav")
$("form > table")
$("tr:even")
$("a strong")
$("a[href^=https://]")
Richard D. Worth
$(":hidden")
$("ul:visible")
$(":disabled")
$("td:first *")
$("fieldset:has(button)")
Richard D. Worth
Method Calls
Safe (0, 1, more elements)
No need for loop
Some operate on first element
Richard D. Worth
$("p").addClass("special")
.css("color", "red")
.append("hello")
.show("slow");
Chaining
Richard D. Worth
Some methods modify chain
.end() to get back to previous
Most methods are chainable
Chaining
Richard D. Worth
Concise, Natural, Consistent
Logical, Almost Guessable
Easy to read, understand, remember
jQuery API
Richard D. Worth
jQuery’s Focus
DOM Manip.
Ajax
Events
Animation
Richard D. Worth
.next() .prev()
.find() .children()
.parent() .parents()
.filter()
DOM Traversing
Richard D. Worth
.text() .html()
.attr() .removeAttr()
.remove() // returns element
.css()
Attributes
Richard D. Worth
.css(key, value)
.css({key: value, key: value})
.addClass() .removeClass()
.toggleClass()
CSS / Styles
Richard D. Worth
.append() .prepend()
.before() .after()
.insertBefore() .insertAfter()
$("<div>New Element</div>")
DOM Construction
Richard D. Worth
Overloaded
Richard D. Worth
$(selector)
$(HTML)
$(DOMElement)
$(function) // DOM Ready
$(selector, context)
Optional Context
Richard D. Worth
.click(fn) .click()
.toggle(fn, fn) .toggle()
.click(fn) -> .bind("click", fn)
.click() -> .trigger("click")
Events
Richard D. Worth
Event Handler/Callback
Callback gets context (this)
‘this’ is always a DOMElement
First parameter is Event object
Richard D. Worth
.load(url)
.load(url + " " + selector)
Ajax
Richard D. Worth
$.get()
$.post()
$.getJSON()
$.getScript()
Ajax
Richard D. Worth
$.ajaxSend()
$.ajaxStart() $.ajaxStop()
$.ajaxError() $.ajaxSuccess()
$.ajaxComplete()
Ajax Events
Richard D. Worth
.show() .hide() .toggle()
.fadeIn() .fadeOut() .fadeTo()
.animate() .stop() .queue()
.slideUp() .slideDown() .slideToggle()
Animations
Richard D. Worth
Richard D. Worth
Plugins Keep
The Core Lean
Richard D. Worth
Writing a jQuery
Plugin
Richard D. Worth
Extending the
Selector Engine
Richard D. Worth
Custom Events
Richard D. Worth
.data()
Richard D. Worth
Q&A
Books
Richard D. Worth
Learning jQuery (Packt)
jQuery in Action (Manning)
Karl Swedberg, Jonathan Chaffer
Bear Bibeault, Yehuda Katz

More Related Content

What's hot

Javascript built in String Functions
Javascript built in String FunctionsJavascript built in String Functions
Javascript built in String Functions
Avanitrambadiya
 
ASP.NET Web API
ASP.NET Web APIASP.NET Web API
ASP.NET Web API
habib_786
 
144 Rest Web Services
144 Rest Web Services144 Rest Web Services
144 Rest Web Services
GeneXus
 

What's hot (20)

Classic asp , VB.net insert update delete crud
Classic asp , VB.net insert update delete crudClassic asp , VB.net insert update delete crud
Classic asp , VB.net insert update delete crud
 
JavaScript - Chapter 10 - Strings and Arrays
 JavaScript - Chapter 10 - Strings and Arrays JavaScript - Chapter 10 - Strings and Arrays
JavaScript - Chapter 10 - Strings and Arrays
 
Soap and Rest
Soap and RestSoap and Rest
Soap and Rest
 
Istio's mixer policy enforcement with custom adapters (cloud nativecon 17)
Istio's mixer  policy enforcement with custom adapters (cloud nativecon 17)Istio's mixer  policy enforcement with custom adapters (cloud nativecon 17)
Istio's mixer policy enforcement with custom adapters (cloud nativecon 17)
 
An introduction to OAuth 2
An introduction to OAuth 2An introduction to OAuth 2
An introduction to OAuth 2
 
Code Refactoring Cheatsheet
Code Refactoring CheatsheetCode Refactoring Cheatsheet
Code Refactoring Cheatsheet
 
Vvvvvvvv
VvvvvvvvVvvvvvvv
Vvvvvvvv
 
REST & RESTful Web Service
REST & RESTful Web ServiceREST & RESTful Web Service
REST & RESTful Web Service
 
πρόταση - στίξη - τόνος
πρόταση - στίξη - τόνοςπρόταση - στίξη - τόνος
πρόταση - στίξη - τόνος
 
Javascript built in String Functions
Javascript built in String FunctionsJavascript built in String Functions
Javascript built in String Functions
 
What the Heck is OAuth and OpenID Connect - DOSUG 2018
What the Heck is OAuth and OpenID Connect - DOSUG 2018What the Heck is OAuth and OpenID Connect - DOSUG 2018
What the Heck is OAuth and OpenID Connect - DOSUG 2018
 
ASP.NET Web API
ASP.NET Web APIASP.NET Web API
ASP.NET Web API
 
Attacking REST API
Attacking REST APIAttacking REST API
Attacking REST API
 
Security for oauth 2.0 - @topavankumarj
Security for oauth 2.0 - @topavankumarjSecurity for oauth 2.0 - @topavankumarj
Security for oauth 2.0 - @topavankumarj
 
Css animation
Css animationCss animation
Css animation
 
144 Rest Web Services
144 Rest Web Services144 Rest Web Services
144 Rest Web Services
 
Google guava
Google guavaGoogle guava
Google guava
 
Entidades en drupal 8
Entidades en drupal 8Entidades en drupal 8
Entidades en drupal 8
 
Scala API - Azure Event Hub Integration
Scala API - Azure Event Hub IntegrationScala API - Azure Event Hub Integration
Scala API - Azure Event Hub Integration
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 

Viewers also liked

RedHat-System Administration I - RH124
RedHat-System Administration I - RH124RedHat-System Administration I - RH124
RedHat-System Administration I - RH124
Nikola Tokić
 
Php Security Workshop
Php Security WorkshopPhp Security Workshop
Php Security Workshop
Aung Khant
 
Web Technology – Web Server Setup : Chris Uriarte
Web Technology – Web Server Setup : Chris UriarteWeb Technology – Web Server Setup : Chris Uriarte
Web Technology – Web Server Setup : Chris Uriarte
webhostingguy
 
Effective communication
Effective communicationEffective communication
Effective communication
hussulinux
 
jQuery Plugins Intro
jQuery Plugins IntrojQuery Plugins Intro
jQuery Plugins Intro
Casey West
 
Scalable Internet Servers and Load Balancing
Scalable Internet Servers and Load BalancingScalable Internet Servers and Load Balancing
Scalable Internet Servers and Load Balancing
Information Technology
 
Safety LAMP: data security & agile languages
Safety LAMP: data security & agile languagesSafety LAMP: data security & agile languages
Safety LAMP: data security & agile languages
PostgreSQL Experts, Inc.
 

Viewers also liked (20)

SydPHP Security in PHP
SydPHP Security in PHPSydPHP Security in PHP
SydPHP Security in PHP
 
RedHat-System Administration I - RH124
RedHat-System Administration I - RH124RedHat-System Administration I - RH124
RedHat-System Administration I - RH124
 
Php Security Workshop
Php Security WorkshopPhp Security Workshop
Php Security Workshop
 
Your Inner Sysadmin - Tutorial (SunshinePHP 2015)
Your Inner Sysadmin - Tutorial (SunshinePHP 2015)Your Inner Sysadmin - Tutorial (SunshinePHP 2015)
Your Inner Sysadmin - Tutorial (SunshinePHP 2015)
 
Web Technology – Web Server Setup : Chris Uriarte
Web Technology – Web Server Setup : Chris UriarteWeb Technology – Web Server Setup : Chris Uriarte
Web Technology – Web Server Setup : Chris Uriarte
 
Php Security By Mugdha And Anish
Php Security By Mugdha And AnishPhp Security By Mugdha And Anish
Php Security By Mugdha And Anish
 
Effective communication
Effective communicationEffective communication
Effective communication
 
jQuery
jQueryjQuery
jQuery
 
Knolx j query-form-validation-slides
Knolx j query-form-validation-slidesKnolx j query-form-validation-slides
Knolx j query-form-validation-slides
 
Quick & Easy Dev Environments with Vagrant
Quick & Easy Dev Environments with VagrantQuick & Easy Dev Environments with Vagrant
Quick & Easy Dev Environments with Vagrant
 
Memphis php 01 22-13 - laravel basics
Memphis php 01 22-13 - laravel basicsMemphis php 01 22-13 - laravel basics
Memphis php 01 22-13 - laravel basics
 
HTML validation, microformats, jQuery
HTML validation, microformats, jQueryHTML validation, microformats, jQuery
HTML validation, microformats, jQuery
 
Red Hat Training México /// Calendario de cursos 2016
Red Hat Training México /// Calendario de cursos 2016Red Hat Training México /// Calendario de cursos 2016
Red Hat Training México /// Calendario de cursos 2016
 
jQuery Plugins Intro
jQuery Plugins IntrojQuery Plugins Intro
jQuery Plugins Intro
 
Scalable Internet Servers and Load Balancing
Scalable Internet Servers and Load BalancingScalable Internet Servers and Load Balancing
Scalable Internet Servers and Load Balancing
 
Safety LAMP: data security & agile languages
Safety LAMP: data security & agile languagesSafety LAMP: data security & agile languages
Safety LAMP: data security & agile languages
 
ClueCon2009: The Security Saga of SysAdmin Steve
ClueCon2009: The Security Saga of SysAdmin SteveClueCon2009: The Security Saga of SysAdmin Steve
ClueCon2009: The Security Saga of SysAdmin Steve
 
PHP
PHPPHP
PHP
 
RHCSA
RHCSARHCSA
RHCSA
 
CSS3 and jQuery
CSS3 and jQueryCSS3 and jQuery
CSS3 and jQuery
 

jQuery Stack Overflow DevDays DC 2009