- What is jQuery? 3:10
- jQuery: History and Relevance Today 2:51
- jQuery vs. JavaScript 6:02
- Review: What is jQuery? 5 questions
- Animating Elements with jQuery 7:43
- jQuery Syntax and Animation Effects 2 objectives
- Blog Previewer: Changing Content Inside Elements 7:13
- Using text() and html() 3 objectives
- Blog Previewer: Getting Values from Form Fields 6:06
- Getting Values from Form Fields 2 objectives
- Introduction to jQuery Review 5 questions
Preview
Video Player
00:00
00:00
What is jQuery?
3:10Learn more about jQuery and how it's used.
[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