Learn jQuery in 6 minutes | How to Use a JavaScript Library | Code in 5

Sharing buttons:

jQuery is a library that contains lots

of methods which make it much easier to

manipulate HTML documents on animation

along with a bunch of other things

since jQuery is a library it has an API

that we can use to access its

functionality API stands for application

programming interface and it basically

states the methods or functions we can

call inside of our code if we import the

library for example let's say we had a

class named blue and made its elements

have blue text we could use the add

class method and add the blue class to

all the P elements with something

similar to this where we'd have P dot

add class blue this may be confusing

right now but don't worry we'll figure

it out to start we'll open sublime and

create an index.html file so we'll go

into XHTML and then we'll also create a

script J's file and so we'll save this

and we'll put it in a folder called GS

and so we'll have that and then we'll

call this script ojs and this will hold

all of our JavaScript and our jQuery

code and so going back to our HTML we'll

just add some boilerplate here and we'll

add a quick script tag here with j/s

slash script is close it up here and

just like we did for our bootstrap we're

going to need to import the JavaScript

library and so we'll go and look up the

link jQuery link and then add that into

our code here

scrolling down we have the CDN this is

what we want and since we're going to be

using jQuery and our script file we're

going to want to import this jQuery

first save that and then we'll add a

header inside of our body we'll call it

in each one and we're going to set some

styling to that and so basically we're

going to create this hidden header and

we're going to do some stuff to it and

so we'll have the style equal

text-align:center putting it in the

center and we'll give it the color white

so it's white text and it's hidden on

you know this page with a white

background then we'll give it the ID

hidden and we'll have the text be I was

hidden and then close that each one now

if we open this index.html in the web

page here we are you'll see nothing's

there but if I highlight I was hidden

that's there what if we can make it so

when I hover over this h1 this I was

hidden it reveals itself so maybe it

turns the text of this header black well

we can do this with CSS and jQuery and

so going back to our code we'll go to

our script and we're going to write some

jQuery code using you know it's

libraries it's methods here we go we'll

say document dot ready function open

close curly bracket and so basically

what will happen is this the inside of

this thing will be called when the

document is ready so you know load stuff

it's all ready to go and so what we'll

do is we'll add some code to be run once

you know this document is ready to go

and so we'll say hash tag and hover

function open closed parenthesis open

close curly bracket and what this does

is if I like hover over the thing with

the ID hidden the code inside of this

will be run and so basically this is

setting up like hey if I hover over

hidden like do this other stuff that's

here and so what we'll want to do is if

we hover over our header that has the ID

hidden we'll want to select that hidden

you know element and we'll want to say

this you know this hidden element we're

going to change its CSS and we're going

to set the color property equal to black

so now you can actually

see this hidden thing and so what

happens when I you know go away from the

thing so I move my mouse so it's no

longer hovering over this hidden element

well we'd want a place where we can add

code that could be run you know once I

move over my mouse and so this would be

a callback function and so once I stop

hovering over you know this hidden thing

then I would want this callback function

to be called and so here we go we're

running it function open closed


this is what would be run if I stop

hovering over this hidden thing and so

we don't want anything to happen just

yet and so we'll leave that callback

function empty but it's important you

have it and then we'll add these

semicolons save it up make sure this is

saved and then we'll go ahead and

refresh our index.html

and we hovered over it and now it's

hidden but of course when it doesn't

rehydrate but what if we wanted it to do

that well we could go back to our code

and we could actually hide it forever it

was one thing to make the text white but

if we go this dot hide open close

parenthesis and then add that semicolon

save now when i refresh this I'll hover

over it and then I'll leave it but now

when I try to find it again it's gone so

it's like a James Bond you know your

message self-destructs type of thing but

of course if i refresh the page I you

know saw it for like two seconds and

then it hit again and then you can do it

again you could keep it over this you go

away there you go back at our code the

hide function basically hides this

element by setting this display property

to none and so you could accomplish this

same you know hide thing if we did

display:none but of course this is you

know less code and so we use that

instead so we'll go ahead and comment

that out and if we go back to our

index.html we'll do one more example of

how to use jQuery and so if we add this

button and we'll say alert me button you

know save that up and we'll say button

dot click function open closed

parenthesis open closed curly bracket

and so what will happen here is if I

click the button any button on the page

it doesn't have to be one specific

button then this type of code will be

run if I wanted it to work for one

specific button I would do something

similar to this where I'd have a hash

tag you know name so it would be an ID

so that's only for one thing versus this

is a button it's an HTML element so any

button I click this will be run and so

inside of here we'll you know send out

an alert because our button says alert

me and so we'll go alerts I'm alerting

you that's what the alert is going to do

we'll save that go back here we have

this button we click it it alerts me

could we have done this with plain

vanilla JavaScript yes

but using the jQuery library makes a lot

of this much easier to code and easier

to read later on next week we'll talk

about angularjs

is a structural JavaScript framework

that helps you build dynamic web apps

for the first time in the series we will

not be hard coding our content but we'll

be getting it from somewhere else I hope

you learned something in this week's

episode and I'll see you next Friday