Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
How to include the jQuery library in your own projects.
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
In this section of the course, we're going
to create a simple spoiler reveal alert
0:04
that reveals a secret message
when you press a button.
0:08
Notice that after you click the button,
the button becomes hidden.
0:11
Through this project you'll be
introduced to a few new concepts.
0:15
How to create and insert new
elements into the DOM with jQuery,
0:18
event handling using the onMethod, as well
as the fundamentals of DOM traversal.
0:22
Before we dive into coding, let me show
you how to set up a project to use jQuery.
0:27
First we'll need the jQuery source file.
0:31
There are several ways to do this, but
0:34
one simple way is to visit jQuery.com and
download the jQuery file.
0:36
Then you'd include it in
the JS folder of this project,
0:48
just like you would any
other JavaScript file.
0:51
I've gone ahead and included this
file in the JS folder already.
0:54
Next we'll need to load
it into our project.
0:57
To hook up jQuery to our HTML file, head
to the bottom of the HTML document and
1:00
just before the closing
body tag open a script tag.
1:06
Then in a search attribute we'll
enter the path to the jQuery file,
1:11
in our case the file is
inside of this JS folder.
1:15
So we'll say JS and then the file name.
1:19
We include JavaScript at the bottom of
the page to ensure that the HTML and
1:27
CSS loads into the browser first.
1:32
This helps the page load faster, and
1:34
ensures that all the elements we might
wanna manipulate with JavaScript
1:37
exist on the page before we
start trying to work with it.
1:40
Take the green box we were hiding
in an earlier lesson for example.
1:44
You can't hide an element that hasn't yet
loaded into the browser.
1:48
Another way to include jQuery
in a project is using a CDN or
1:51
content delivery network.
1:55
When you use a CDN, a third party service
such as Google host the jQuery file,
1:57
and you link to the file
using an external URL.
2:03
We'll talk more about using a CDN
toward the end of this course.
2:06
I've also included an empty
app.js file in the workspace, and
2:10
that's where we'll be writing our code.
2:14
We'll need to hook up this app.js
file to the index.html page as well.
2:16
Make sure to add any scripts that
use jQuery after the jQuery file.
2:21
You wanna make sure that
jQuery loads first so
2:25
that it's available to
the code we write in app.js.
2:28
So below the jQuery file,
open another script tag and
2:31
hook up this app.js file.
2:37
Save and we're all ready to go.
2:40
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