Skip to content

Instantly share code, notes, and snippets.

@thejessleigh
Forked from dbc-challenges/jquery_example.html
Last active January 3, 2016 13:29
Show Gist options
  • Save thejessleigh/8470012 to your computer and use it in GitHub Desktop.
Save thejessleigh/8470012 to your computer and use it in GitHub Desktop.
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>
<!-- Add a link to jQuery CDN here script here -->
<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="dbc_logo.jpg" id="logo">
</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.
var bodyElement = $('body')
bodyElement.css({'background-color': 'pink'})
//RELEASE 1:
//Add code here to select elements of the DOM
header = $('h1')
mascot = $('.mascot')
logo = $('#logo')
//RELEASE 2:
// Add code here to modify the css and html of DOM elements
header.css({'color': 'blue'});
header.css({'border-bottom': '3px solid green'})
header.css({'visibility': 'visible'})
//RELEASE 3: Event Listener
// Add the code for the event listener here
$('img').on('mouseover', function(e){
e.preventDefault()
$(this).attr('src', 'data:image/jpeg;base64,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')
})
$('img').on('mouseout', function(e){
$(this).attr('src', 'http://ebmedia.eventbrite.com/s3-build/images/1238516/37120493192/1/logo.jpg')
})
//RELEASE 4 : Experiment on your own
$('img').click(function(){
$('img').animate({'width': '25%'})
});
}) // 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