Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn more about jQuery and how it's used.
To succeed in this course, be sure you're familiar with basic JavaScript, HTML and CSS
Course prerequisite: JavaScript and the DOM
Suggested Resources:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
jQuery is a widely used JavaScript
library that helps you quickly and
0:04
easily add interactivity to web pages.
0:08
You can certainly add animations,
manipulate elements on a web page, respond
0:11
to user interactions, and make ajax
request with regular JavaScript, however,
0:16
jQuery adds some nice conveniences
that make DOM programming easier.
0:21
jQuery grew incredibly popular because
it addressed many of the headaches
0:26
that came with writing code that would
behave consistently across browsers.
0:30
While this is less necessary as modern
browsers become more standardized,
0:35
jQuery remains a simple, fun, and
intuitive way to interact with web pages.
0:39
Hi, I'm Treasure, a JavaScript
teacher here at Treehouse, and
0:45
I'm excited to share with you
the simplicity that jQuery has to offer.
0:49
In this course, we'll use jQuery to create
or enhance a series of small projects.
0:53
We'll build a simple blog previewer, and
a fun and interactive spoiler revealer.
0:59
We'll finish up by using
more advanced jQuery methods
1:03
to add some enhancements and
functionality to a simple news feed.
1:06
To get the most out of this course, you'll
need to be somewhat familiar with CSS
1:10
selectors using JavaScript to
interact with the DOM, and
1:14
event handling with JavaScript.
1:17
I'll quickly review these
topics as we come across them.
1:20
But if you're not sure what the DOM, or
event handling are, or need a more in
1:23
depth refresher be sure to check out
the pre-requisites for this course.
1:27
I've included links in the teachers notes.
1:31
I'll include helpful resources in the
teacher's notes throughout this course so
1:33
be sure to check those out as well.
1:37
The DOM, or Document Object Model,
is a representation of your webpage.
1:39
Sort of like a blueprint, containing all
of your web page's content and elements.
1:44
You can use JavaScript or jQuery to
access elements on this blueprint and
1:49
tell the browser how those element
should display and behave.
1:53
With jQuery, you use CSS selectors to
select HTML elements on a page and
1:57
do something with them.
2:02
You essentially say, please locate on my
webpage an HTML element or collection
2:03
of elements with the class of x or
the ID of y, and do something with them.
2:09
You can do any of a long list of things
like creating and insert HTML elements,
2:15
remove or hide them, make them grow
bigger or smaller on user click,
2:19
change the font size, texture, or color,
modify HTML attributes, and so on.
2:24
In this course, we'll learn about many
of the convenient methods jQuery offers.
2:30
I'll introduce different CSS
selectors you can use to choose and
2:34
manipulate elements on a webpage.
2:38
We'll learn how to handle events.
2:40
This means running code in
response to button clicks,
2:42
key presses, mouse overs, and so on.
2:44
We'll also learn about DOM traversal,
2:47
how jQuery lets you move easily from
one element on your page to another,
2:50
without having to know
an element's specific class or ID.
2:55
Before we dive into our coding projects,
join me in the upcoming videos to learn
2:58
a bit more about the history of
this wildly popular library, and
3:02
to take a look at how jQuery
differs from plain JavaScript.
3:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up