Skip to content

Instantly share code, notes, and snippets.

@jpark3000

jpark3000/jquery_example.html

Forked from dbc-challenges/jquery_example.html
Last active January 1, 2016 18:59
Show Gist options
  • Save jpark3000/8187809 to your computer and use it in GitHub Desktop.
Save jpark3000/8187809 to your computer and use it in GitHub Desktop.
Download ZIP
Intro to jQuery for Phase 0
Raw
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 style="position:relative;" src="logo.jpg">
</div>
</body>
</html>
Raw
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
$('h1').css({'color':'green', 'border':'5px solid red'})
$('.mascot h1').html("SQUIRRELS! WHAT! WHAT!")
//RELEASE 3: Event Listener
// Add the code for the event listener here
$('img').hover(
function() {
$(this).attr("src", "http://i.dailymail.co.uk/i/pix/2012/07/01/article-2167362-13E078B4000005DC-259_634x462.jpg");
}, function() {
$(this).attr("src", "logo.jpg");
});
//RELEASE 4 : Experiment on your own
$('img').on('mouseover', function(){
$(this).animate({left:'1000px'});
});
}) // 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