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="logo.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
var bodyElement = $('body')
var all = $('*')
var logo = $(':image')
//RELEASE 2:
// Add code here to modify the css and html of DOM elements
$('h1').css({'color':'blue','border':'2px solid black', 'visibility':'inherit'});
$('div h1').html('Pocket Gophers')
//RELEASE 3: Event Listener
// Add the code for the event listener here
$('img').on('mouseover', function(e){
e.preventDefault()
$(this).attr('src', 'http://wdfw.wa.gov/living/species/graphics/t_gophers1.jpg')
})
$('img').on('mouseleave', function(e){
e.preventDefault()
$(this).attr('src', 'logo.png')
})
//RELEASE 4 : Experiment on your own
$('img').click(function(){
$(this).animate({
opacity: 0.50,
left: "+=50",
height: "400"
}, 5000, function() {
});
});
}) // 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
You can’t perform that action at this time.