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
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