jQuery For Beginners - jQuery Conference 2009

by Ralph Whitbeck on Sep 14, 2009

35,700 views

The first part of a three part beginner track, this talk is for the designer/developer that is just starting out with jQuery. Perhaps you’ve heard of jQuery or you’ve used it occasion- ally, this talk will help you understand the core jQuery library.
We will:
•Cover jQuery’s history
•Introduce you to the core team
•Explain how jQuery works
•Demonstrate how to set-up jQuery
•Explore core jQuery methods and structure • Look through a couple of real-world examples

Less

19 Embeds 22,109

http://web.enavu.com	16628
http://tutsvalley.com	3961
http://www.mysrc.de	1052
http://ralphwhitbeck.com	158
http://10.36.244.82	88
http://translate.googleusercontent.com	68
http://localhost:8080	61
http://www.slideshare.net	39
http://www.denisdeng.com	16
http://www.garunawebdesigner.com	9
http://coderwall.com	9
http://localhost	7
http://itzone.tistory.com	4
http://dibyendu-knowledgebase.blogspot.com	3
http://207.46.192.232	2
http://static.slidesharecdn.com	1
http://web.enavu.com.zurukko.jp	1
http://fanyi.youdao.com	1
http://www.future-needs.com	1

More...

Statistics

Favorites: 31
Downloads: 894
Comments: 4
Embed Views: 22,109
Views on SlideShare: 13,591
Total Views: 35,700

jQuery For Beginners - jQuery Conference 2009 — Presentation Transcript

Beginning

Introduction

Ralph Whitbeck

Senior Web Application Engineer

BrandLogic Corporation

http://brandlogic.com

Blog: http://ralphwhitbeck.com

Twitter: RedWolves

Introduction

Tip Jar is open

Tips can be sent via paypal

[email_address]

*Speaker Note*

Pause so audience can write down address

Setting Expectations

This begins the first part of a three part beginners track

Setting Expectations

This begins the first part of a three part beginners track

Beginning jQuery

Setting Expectations

This begins the first part of a three part beginners track

Beginning jQuery

Extending jQuery - Understanding plugins

Setting Expectations

This begins the first part of a three part beginners track

Beginning jQuery

Extending jQuery - Understanding plugins

Beginning jQuery UI

Setting Expectations

This talk is for those just starting out with jQuery

Setting Expectations

This talk is for those just starting out with jQuery

We'll explore jQuery's history

Setting Expectations

This talk is for those just starting out with jQuery

We'll explore jQuery's history

Meet the core team

Setting Expectations

This talk is for those just starting out with jQuery

We'll explore jQuery's history

Meet the core team

How jQuery works

Setting Expectations

This talk is for those just starting out with jQuery

We'll explore jQuery's history

Meet the core team

How jQuery works

Get jQuery on your page

Setting Expectations

This talk is for those just starting out with jQuery

We'll explore jQuery's history

Meet the core team

How jQuery works

Get jQuery on your page

Walk through a real-world examples

What is jQuery?

jQuery is JavaScript

What is jQuery?

With JavaScript show a hidden element

if (browserType == "gecko" ) document.poppedLayer =

eval('document.getElementById(”HiddenDIV")');

else if (browserType == "ie") document.poppedLayer =

eval('document.getElementById(”HiddenDIV")');

else

document.poppedLayer =

eval('document.layers[”HiddenDIV"]'); document.poppedLayer.style.visibility = "visible";

What is jQuery?

Show a hidden div using jQuery

$(“#HiddenDIV”).show();

What is jQuery?

jQuery is JavaScript

It's a light-weight library (19kb minified and GZIPed)

What is jQuery?

jQuery is JavaScript

It's a light-weight library (19kb minified and GZIPed)

Easy and fast HTML DOM Selection

What is jQuery?

jQuery is JavaScript

It's a light-weight library (19kb minified and GZIPed)

Easy and fast HTML DOM Selection

Built to work on all "modern" browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+)

What is jQuery?

jQuery is JavaScript

It's a light-weight library (19kb minified and GZIPed)

Easy and fast HTML DOM Selection

Built to work on all modern browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+)

It's Open Source

What can jQuery Produce?

High school students from Spotswood High School

Jamie Gilar

John Cicolella

Demo’d http:// www.jamie.strunex.net /homework/channel/

Benefits to jQuery

Well documented (http://docs.jquery.com)

Benefits to jQuery

Well documented (http://docs.jquery.com)

Thriving community of developers

Blogs

Twitter

Online Tutorials

Books

Conferences

Classes

Benefits to jQuery

jQuery is Extensible

Create/release your own plugins

Thousands of plugins available

Benefits to jQuery

jQuery is Extensible

Create/release your own plugins

Thousands of plugins available

jQuery works with other libraries

Prototype

Mootools

Who is using jQuery?

Google

Amazon

Microsoft

Netflix

Twitter

Dell, Inc.

Match

ESPN

Best Buy

jQuery's History

jQuery was released:

January 14, 2006

BarCampNYC

jQuery's History

Versions

1.0 - August 26, 2006

jQuery's History

Versions

1.0 - August 26, 2006

1.1 - January 14, 2007

jQuery's History

Versions

1.0 - August 26, 2006

1.1 - January 14, 2007

1.1.3 - July 5, 2007

jQuery's History

Versions

1.2 - September 10, 2007

jQuery's History

Versions

1.2 - September 10, 2007

jQuery UI released - September 16, 2007

jQuery's History

Versions

1.2 - September 10, 2007

jQuery UI released - September 16, 2007

1.2.6 - May 24, 2008

jQuery's History

Versions

Web site redesign - August 28, 2008

jQuery's History

Versions

Web site redesign - August 28, 2008

1.3 - January 14, 2009

jQuery's History

Versions

Web site redesign - August 28, 2008

1.3 - January 14, 2009

1.3.2 - February 20, 2009

jQuery's Core Team

Development

John Resig

Brandon Aaron

Ariel Flesler

Jörn Zaefferer

jQuery's Core Team

Evangelism

Rey Bango

Karl Swedberg

Cody Lindley

jQuery's Core Team

jQuery UI

Paul Bakaus

Richard D. Worth

Scott González

Todd Parker

Many others

jQuery's Core Team

Plugins

Yehuda Katz

Klaus Hartl

Mike Alsup

jQuery's Core Team

Web, Design and Infrastructure

Scott Jehl

Mike Hostetler

Jonathan Sharp

Setting up jQuery

Include jQuery on the page

Setting up jQuery

Include jQuery on the page

Download latest from jQuery.com <script src="jquery-1.3.2.min.js" type="text/javascript"></script>

Setting up jQuery

Include jQuery on the page

Download latest from jQuery.com <script src="jquery-1.3.2.min.js" type="text/javascript></script>

Include the latest from Google AJAX Libraries API <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Setting up jQuery

Set jQuery to run when the DOM is loaded.

$(document).ready(function(){

//put your jQuery code here.

});

How jQuery Works

$("div").show();

How jQuery Works

Initiate the jQuery Object

How jQuery Works

jQuery("div").show();

How jQuery Works

("div")

Select Elements

How jQuery Works

$("div")

$("div#intro h2")

$("div.section > p")

$("a[href='http://www.jquery.com']")

$("ul#nav li:first")

How jQuery Works

.show()

Do Something

How jQuery Works

Demo

(Demo based on: http://ejohn.org/apps/learn-jquery/ )

How jQuery is Structured

Core

Selectors

Attributes

Traversing

Manipulation

Events

AJAX

Effects

jQuery Core

.each()

.length()

.eq()

.get()

.index()

.data()

.removeData()

...and many more!

Selectors

element .class

:first

:last

:not(selector)

[attribute=value]

...and many more!

Attributes

.removeAttr()

.addClass()

.hasClass()

.removeClass()

.toggleClass()

.html()

.val()

...and many more!

Traversing

.not()

.add()

.children()

.context()

.next()

.prevAll()

.siblings()

...and many more!

Manipulation

.append()

.after()

.insertAfter()

.wrap()

.replaceWith()

.empty()

...and many more!

CSS

.width()

.innerHeight()

.height()

.outerHeight()

.offset()

.position()

.css()

...and many more!

Events

.ready()

.mouseout()

.trigger()

.hover()

.toggle()

.blur()

.live()

...and many more!

AJAX

.ajax()

.load()

.getJSON()

.getScript()

.serialize

.get()

.post()

...and many more!

Effects

.hide()

.show()

.fadeTo()

.slideToggle()

.toggle()

.slideUp()

.slideDown()

...and many more!

Putting it all together

Real-World Demo

(Demo based on: http://ralphwhitbeck.com/2007/11/20/PullingTwitterUpdatesWithJSONAndJQuery.aspx )

Thank You

Speaker rate

http://speakerrate.com/talks/1400-beginning-jquery

Thank You

Speaker rate

http://speakerrate.com/talks/1400-beginning-jquery

tower at tower thanks 1 year ago

Are you sure you want to Yes No

guest4abd20

<b>[Comment posted from</b> http://tutsvalley.com/tutorials/7-amazing-presentation-slides-to-teach-you-how-to-code-with-jquery/] 2 years ago

Mark Riffey This would be *so* much richer content with audio... 2 years ago

ko donghwi , Software Developer at home page 52 bug....
~~~
type='text/javascript> --> error
--------
type='text/javascript'> 2 years ago

jQuery For Beginners - jQuery Conference 2009

by Ralph Whitbeck on Sep 14, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

19 Embeds 22,109

Statistics

jQuery For Beginners - jQuery Conference 2009 — Presentation Transcript