Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Intro to jQuery for Phase 0
<!DOCTYPE html>
<html>
<head>
<title>DOM manipulation with jQuery</title>
<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="http://scm-l3.technorati.com/12/12/13/73853/devbootcamp.png?t=20121213131231">
</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
bodyElement = $('body')
//RELEASE 2:
// Add code here to modify the css and html of DOM elements
$('h1').css({'color': 'blue'})
$('h1').css({'border': 'solid'})
$('h1').css({'visibility': 'hidden'})
$('h1').css({'visibility': 'visible'})
$('.mascot h1').html('Nighthawks')
//RELEASE 3: Event Listener
// Add the code for the event listener here
$('img').on('mouseover', function(){
$(this).attr('src', 'http://www.allaboutbirds.org/guide/PHOTO/LARGE/common_nighthawk_billbouton.jpg')
})
$('img').on('mouseout', function(){
$(this).attr('src', 'http://scm-l3.technorati.com/12/12/13/73853/devbootcamp.png?t=20121213131231')
})
//RELEASE 4 : Experiment on your own
$('.mascot').click(function() {
$('img').animate({
'width': '20%',
'padding-left': '+=50px'
}, 1500 );
});
$('h1').on('mouseover', function(){
$(this).css({'border': 'initial'})
})
$('h1').on('mouseout', function(){
$(this).css({'border': 'solid'})
})
}) // end of the document.ready function: do not remove or write DOM manipulation below this.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment