jQueryWhat is

?

Including itO N A P A G E

CDNContent Delivery Network

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

ABOVE THE </BODY>

YOUR SCRIPTS

<script src=“js/production.js”></script>

</body>

A L L S C R I P T S S H O U L D B E L O A D E D L A S T

Edge CasesCaveats& S O M E T I M E S I T H A S

T O G O I N T H E < H E A D ><script src=“js/production.js” defer=“defer”></script>

S O M E L I B R A R I E S M U S T B E L O A D E D B E F O R E T H E D O M O R C S S

DOMW H A T I S T H E

?Document Object Model

D O C U M E N T

H T M L

R O O T E L E M E N T

E L E M E N T

E L E M E N T T E X T

T E X T

T E X T

A T T R I B U T E

E L E M E N T

E L E M E N T

E L E M E N T

< H E A D >

< T I T L E > " M Y H E A D I N G ”

" M Y H E A D I N G ”

" C L I C K H E R E ”

H R E F

< H 1 >

< A >

< B O D Y >

Ready?$(‘document’).ready(function() {

// code goes here});

Selecting&Doing

$(‘.item’).hide();

SELECT DO

JQUERY jQuery(‘.item’).hide();

$(‘document’).ready(function() {// code goes here

});

JQUERY SELECT DO

SliderB U I L D I N G A

ProgrammerT H I N K L I K E A

1234

When the user clicks on the next button, go to the next slide.

When the user clicks on the previous button, go to the previous slide.

When the user is on the last slide and clicks on the next button, automatically go back to the beginning.

When the user is on the first slide and clicks on the previous button, automatically go to the end.

ProgrammerT H I N K L I K E A

567

Wait 3 seconds and automatically show the next slide.

When the user hovers over the rotator, pause it.

When the user mouses off the rotator, unpause it.

HeaderA N I M A T I N G A

O N S C R O L L

MobileC R E A T I N G

N A V I G A T I O N