jQuery Getting Started

app.js

/* 
We are going to look at a number of different jQuery methods and a small amount of basic javascript so hold on to your horses!

please search for these methods in the jQuery API: http://api.jquery.com/

.addClass()
.removeClass()
.html()
.css()
.fadeIn() / .fadeOut()
.show() / .hide() / .toggle()
.animate()

*/


//jQuery is just a layer ontop of javaScript to make your life soooooo nice and easy. This means that we have full access to use everything javascript related in conjunction with jQuery which is REALLY AWESOME!


//jQuery needs to know when the DOM has loaded and everything is ready to be enacted upon, for this we do:
$(function() {
	//Jquery is represented by the $ sign, any time you see this (when your using jquery ot JS) know that it is envoking the need for jquery.


	//jQ is always envoked the same way, a $ followed by the thing you want to select, see a full list of selectors here: http://api.jquery.com/category/selectors/

	//the stuff inside of the parens selects all of the <p> tags in your page. 
	//the .method, in this case fadeOut is what you want to do to that selector.
	//this makes all of the p tags fade out when the page is loaded. 
	$("p").fadeOut('slow');
	//fade in is just the opposite.

	//this hides the mainbox when the page is laded!
	$('#mainBox').hide();
	//show is the opposite.

	//adds a pre existing class onto your element, all of the p tags now have the class bigRed
	$(".foo").addClass('bigRed');
	//remove class is the opposite.

	//this just forces some css paramater onto the element, this does not need to be predefined. 
	$('h1').css('font-size', '100px');

	//.html pushes markup into what ever you have selected, very useful for swapping out content. notice the careful use of single and double quotes. 
	$('#juju').html("<p> what ever you put in here will be evaluated and injected as markup, check this <a href='http://google.com'>LINK TO GOOGLE</a> out </p>")

	//the jQ animate is great, but it is not as fast or efficent as CSS3 animations, check out animate.css library for a nice inbetween of speed and ease of use. 

	//selector, things you want to animate to be your ending paramaters, duration of the animation in milliseconds
	$('#juju').animate({'font-size': 60, 'color': '#938454'}, 5000)

	//++++++++//+++++++++//+++++++++//++++++++++//++++++++++//++++++++//++++++++++++//+++++++++++

	//we use handlers to do some stuff when an action happens, for a list of all the handlers look here: http://api.jquery.com/category/events/

	//Event Handler for a click
	$( "#dummy" ).click(function() {
		//do some stuff when the thing you selected got clicked, it dosent have to be a link, it could be anything!
	  console.log('dummy got clicked');
	  $("#juju").addClass('bigRed');

	}); //closes the click handler


	//handler for a mouseover event
	$(".foo").mouseover(function(event) {
		//do some stuff on mouseover
		console.log('mouseover happened')
		$('.foo').css('font-family', 'wingdings');
	}); //closes the mouseover handler


	//++++++++//+++++++++//+++++++++//++++++++++//++++++++++//++++++++//++++++++++++//+++++++++++
	//++++++++//+++++++++//+++++++++//++++++++++//++++++++++//++++++++//++++++++++++//+++++++++++
	//++++++++//+++++++++//+++++++++//++++++++++//++++++++++//++++++++//++++++++++++//+++++++++++
	//++++++++//+++++++++//+++++++++//++++++++++//++++++++++//++++++++//++++++++++++//+++++++++++

	//4 basic /essential programming concepts

	//#1 //////VARIABLES/////////
	var count = 0; //define a variable

	count = 3 ; //set the variable

	console.log('count: ' + count); //see this in the console


	///#2 /////For loop //////////////////////////

	var loopNum = 30; //set how many times to run the loop

	// this is the for loop it will do the code inbetween the {} how ever many times lopNum is set to.
	//note that it will start at 0
	for (var i = 0; i < loopNum; i++) {
		//do stuff loopNum amount of times:
		console.log('i: ' + i);

	};

	//#2a //////For loop with jquery //////////////////////////

	 //set how many times to run the loop up above in the loopNum variable

	// this is the for loop it will do the code inbetween the {} how ever many times lopNum is set to.
	//note that it will start at 0
	for (var i = 0; i < loopNum; i++) {
		//do stuff loopNum amount of times:
		
		//append attached it on the the previous one so we can push alot of things to the screen, using the i is a common way to push a folder full of images to the screen with the file names as integers.
		$("#juju").append("<div class='seeThisGotAppended'>THIS GOT APPENDED AND IS #" + i + "</div>");


	};

	/////#3 /////////////// Logic //////////////////

	//try turning these off and on.
	count = 9;
	count = 11;

	//conditionla logic, if some conditions are met, then do the code that is in the {}
	if (count > 10) {
		console.log('count is greater than 10');
	} 

	/////#3a /////////////// Logic in use //////////////////

	//Event Handler for a click
	$( "#dummy" ).click(function() {
		//do some stuff when the thing you selected got clicked, it dosent have to be a link, it could be anything!
		count = count + 1;
		console.log(count);

		// if the count is greater than 100 then hide foo. //this needs to be in here so that it gets evaluated each time that the dummy is clicked. 
		if (count > 25){
			$('.foo').hide();
		}


	}); //closes the click handler


	////#4 /////////Interval Loop//////////////

	//execute the code inside of the {} every XXXX milliseconds, defined at the end.
	setInterval(function (){
		//with animation based events in jquery you can do what is called 'method chaining' or using multiple actions. this is useful in this case where we want this element to 'blink'
		$("p").fadeIn('slow').fadeOut('slow');

	}, 2000);
	






	
});

index.html

<!DOCTYPE html>
</body>
</html>

<head>
<title>Test Jquery</title>

<link rel="stylesheet" href="style.css">

<!--
Location of google hosted CDN: https://developers.google.com/speed/libraries/devguide#jquery
get jQuery into your document, notice this is in the head tag
for local file work you will have to add the http, for remote you can generally keep it just "//"
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--link to our other javascript file, you could also do these in the body tag, but its nice practice to break them out so it is a little more clear-->
<script src="app.js"></script>

<!-- notice the order, load jquery then load your commands at jQ. your page needs to know that jQ exists before it can use the commands it enables! -->


</head>
<body>
   
   <a id="dummy" href="#">Dummy Link</a>
   
   <div id="mainBox">
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>


   <div class="foo">

   		<h1>THIS IS THE BEST!</h1>
   	
   </div>


     <div id="juju">
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   
   
   
</body>

style.css

body{
	background-color: black;
	color: white;
	font-family: monospace;
}



.bigRed{
	color: red;
	font-family: sans-serif;
	font-size: 20px;
}