JQuery Basics Refresh 

Javascript
The programming language of HTML and the Web.
Interaction with the user, animation, etc, 
typically all done with JavaScript. 
				
jQuery
jQuery is a library, or set of helpful add-ons, 
to the JavaScript programming language. 

jQuery is much better at giving you immediate, 
visual results than regular JavaScript. 

Clicking, fading, blinking, changing color, etc... 
all easily done with jQuery! 
				
How it works

To get the most out of jQuery, we should 
review how an HTML page is put together.

An HTML document is structured according to 
the Document Object Model, or “DOM”.

It’s by interacting with the DOM that jQuery 
is able to access and modify HTML.

The DOM consists of every element on the page, 
laid out in a hierarchical way that reflects 
the way the HTML document is ordered.

The DOM

Load jQuery
Two options:
1) Use Google’s hosted version

   find this by googling “jQuery Google”

 + Pros: Less steps to set up

 - Cons: If you’re offline, your local
   version won’t work

2) Download jQuery and link to your own
 + Pros: Will work if you’re offline

 - Cons: More steps to set up

Load a JS File

Load jQuery

It’s best to load any JavaScript 
before the closing body tag.

Option 1


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
	<body>
	<div></div>
	<script src="https://ajax.googleapis.com/ajax/
	libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/
	script.js"></script>
	</body>
</html>

Option 1


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
	<body>
	<div></div>
	<script src="https://ajax.googleapis.com/ajax/
	libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/
	script.js"></script>
	</body>
</html>

Option 2


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
	<body>
	<div></div>
	<script type="text/javascript" src="assets/js/
jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/
script.js"></script>>
	</body>
</html>

Option 2


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
	<body>
	<div></div>
	<script type="text/javascript" src="assets/js/
jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/
script.js"></script>>
	</body>
</html>	
 				
Document Ready

$() is special to jQuery. It says: 
“Hey, jQuery things are about to happen.”

Next, we’ll need to start up our jQuery 
magic using the 
$(document).ready(); 

syntax. It works like this:

$('document').ready(function(){
	// jQuery magic;
});
 				
Selectors

The first thing you’ll want to do is 
select elements from the DOM to do 
things with. Selecting in jQuery works 
just like selecting in CSS.

$('selector').someAction;
 				
For example

$('h1').hide();
$('h2 .small').fadeOut();
$('p.intro').show();

h1 { color: blue; }
h2 .small { font-size: 10px; }
p.intro { background: yellow; }
 				
For example

$('h1').hide();
$('h2 .small').fadeOut();
$('p.intro').show();

h1 { color: blue; }
h2 .small { font-size: 10px; }
p.intro { background: yellow; }
 				
Class Selector:
$('.yellow').show;

ID Selector:
$('#letterA').fadeIn;

Element Selector:
$('div').hide;
 				
Events

You can also tie changes to events the user 
performs such as clicks, scrolls, etc, etc.

$('thingToTouch').event(function() {
	$('thingToAffect').effect();
});

“Thing To Touch” is the HTML element you’ll 
click on, hover over, or otherwise interact 
with, and “thing to affect” is the HTML element 
that fades away, changes size, or undergoes 
some other transformation.
 			
Events — click

Click event example:

$('button').click(function() {
	$('.announcement').toggle();
});
http://jsfiddle.net/w0a3Lgx6/ 
Events — mouse
Mouse (enter and leave) example:

$('.red-circle').mouseenter(function() {
	$('.blue-square').fadeOut();
});

$('.red-circle').mouseleave(function() {
	$('.blue-square').fadeIn();
});
http://jsfiddle.net/cvyxp15z/ 
Events — hover
Hover example:

$('.red-circle').hover(function() {
	$('.blue-square').fadeOut();
}, function() {
	$('.blue-square').fadeIn();
});

Hover is very similar to mouse (enter and leave), 

just a little more elegant.
http://jsfiddle.net/o1udqwbm/ 
Events — scroll
Scroll example:

$('window').scroll(function() {
	alert('You just scrolled!');
});
http://jsfiddle.net/p0uxmv0n/ 
Events — keypress

Keypress example:

$('#input').keypress(function(e) {
	$('#output').append(String.fromCharCode(e.which));
	
	// the keycode for 'a' is 97
	if ( e.which == 97 ) {
		$('#output').addClass('special');
	}

});
http://jsfiddle.net/hamamoto/edjmfmno/ 
Adding and Removing Classes

add/remove class example:

$('#on').click(function(e) {
   $(‘#square’).addClass('rounded');
});

$('#off').click(function(e) {
   $('#square').removeClass('rounded');
});
http://jsfiddle.net/hamamoto/edjmfmno/2/ 
'this'


The 'this' keyword refers to the jQuery
object you’re currently doing something with.

$(this), and the event will only affect the 
element you’re currently doing something with 
(for example, clicking on or mousing over).

$('div').click(function() {
	$(this).fadeOut('slow');
});

jQuery Events Example