jrygh00/jquery_example.html

## jquery_example.html
<!DOCTYPE html>
<html>
<head>
  <title>DOM manipulation with jQuery</title>
  <!-- Add a link to jQuery CDN here script here -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery_example.js"></script>
</head>
<body>
  <h1 id="header"> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
  <div class="mascot">
    <h1 id="caption"> My DBC Mascot </h1>
    <img src="http://www26.myfantasyleague.com/fflnetdynamic2013/33308_franchise_icon0004.jpg">
  </div>

</body>
</html>

## jquery_example.js
$(document).ready(function(){

//RELEASE 0: Link this script and the jQuery library to the jquery_example.html file and analyze what this code does.
$('body').css({'background-color': 'pink'})
//RELEASE 1: Add code here to select elements of the DOM
 var bodyElement = $("body")

//RELEASE 2:
// Add code here to modify the css and html of DOM elements
$( '#header' ).click(function(e) {
  	var color = $( this ).css("color");
  	var border = $( this ).css("border");
  	var visibility = $( this ).css("visibility");

	//$( "#result" ).html(alert("color:"color "border: "+border "visibility: "+visibility));
});

$(document).ready(function(){
  $("h1:visible").css("background-color",'purple');
});
$(document).ready(function(){
  $("#header").css("color","orange");
  });


//RELEASE 3: Event Listener -  Add the code for the event listener here

 $('img').on('mouseover', function(e){
    e.preventDefault()
   	$(this).attr('src','http://www.goldenbearnet.org/images/goldbear.jpg')
 });

 $('img').on('mouseleave', function(e){
    e.preventDefault()
   	$(this).attr('src','http://www26.myfantasyleague.com/fflnetdynamic2013/33308_franchise_icon0004.jpg')
 });

//RELEASE 4 : Experiment on your own


})  // end of the document.ready function: do not remove or write DOM manipulation below this.
	<!DOCTYPE html>
	<html>
	<head>
	<title>DOM manipulation with jQuery</title>
	<!-- Add a link to jQuery CDN here script here -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery_example.js"></script>
	</head>
	<body>
	<h1 id="header"> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot">
	<h1 id="caption"> My DBC Mascot </h1>
	<img src="http://www26.myfantasyleague.com/fflnetdynamic2013/33308_franchise_icon0004.jpg">
	</div>

	</body>
	</html>
	$(document).ready(function(){

	//RELEASE 0: Link this script and the jQuery library to the jquery_example.html file and analyze what this code does.
	$('body').css({'background-color': 'pink'})
	//RELEASE 1: Add code here to select elements of the DOM
	var bodyElement = $("body")

	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	$( '#header' ).click(function(e) {
	var color = $( this ).css("color");
	var border = $( this ).css("border");
	var visibility = $( this ).css("visibility");

	//$( "#result" ).html(alert("color:"color "border: "+border "visibility: "+visibility));
	});

	$(document).ready(function(){
	$("h1:visible").css("background-color",'purple');
	});
	$(document).ready(function(){
	$("#header").css("color","orange");
	});




	//RELEASE 3: Event Listener - Add the code for the event listener here

	$('img').on('mouseover', function(e){
	e.preventDefault()
	$(this).attr('src','http://www.goldenbearnet.org/images/goldbear.jpg')
	});

	$('img').on('mouseleave', function(e){
	e.preventDefault()
	$(this).attr('src','http://www26.myfantasyleague.com/fflnetdynamic2013/33308_franchise_icon0004.jpg')
	});

	//RELEASE 4 : Experiment on your own






	}) // end of the document.ready function: do not remove or write DOM manipulation below this.