sassygrody/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> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
  <div class="mascot">
    <h1> My DBC Mascot </h1>
    <img src="dbchawk.png">
  </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  # using var doesn't work for me. works fine without though!
  bodyElement = $('body')
  h1 = $('h1')
  // mascot_text = $('div.h1')  somehow access the h1 element within the div


//RELEASE 2:
  // Add code here to modify the css and html of DOM elements
$('h1').css({'color': 'black'})
$('h1').css( "border", "5px solid blue");
// $('mascot_text').css("border", "10px solid blue");
$('h1').html("Night Hawks Mascot");

// SHIT what? Both of the text elements are in an H1 tag without IDs.


//RELEASE 3: Event Listener
  // Add the code for the event listener here
   $('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkB9jyInn2IwsOM_Ygr2Txti61OwLc2Qc3UiKPeegOTTlBRXnK')
  })

 $('img').on('mouseleave', function(f){
 	f.preventDefault()
 	$(this).attr('src', 'dbchawk.png')
 })

$(h1)
//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> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
	<div class="mascot">
	<h1> My DBC Mascot </h1>
	<img src="dbchawk.png">
	</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 # using var doesn't work for me. works fine without though!
	bodyElement = $('body')
	h1 = $('h1')
	// mascot_text = $('div.h1') somehow access the h1 element within the div


	//RELEASE 2:
	// Add code here to modify the css and html of DOM elements
	$('h1').css({'color': 'black'})
	$('h1').css( "border", "5px solid blue");
	// $('mascot_text').css("border", "10px solid blue");
	$('h1').html("Night Hawks Mascot");

	// SHIT what? Both of the text elements are in an H1 tag without IDs.


	//RELEASE 3: Event Listener
	// Add the code for the event listener here
	$('img').on('mouseover', function(e){
	e.preventDefault()
	$(this).attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkB9jyInn2IwsOM_Ygr2Txti61OwLc2Qc3UiKPeegOTTlBRXnK')
	})

	$('img').on('mouseleave', function(f){
	f.preventDefault()
	$(this).attr('src', 'dbchawk.png')
	})

	$(h1)
	//RELEASE 4 : Experiment on your own







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