Skip to content

Instantly share code, notes, and snippets.

@ameliapadua

ameliapadua/jquery_example.html

Forked from dbc-challenges/jquery_example.html
Last active August 29, 2015 13:56
Show Gist options
  • Save ameliapadua/9215546 to your computer and use it in GitHub Desktop.
Save ameliapadua/9215546 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>
<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 id="mascot_label"> My DBC Mascot </h1>
<img src="dbc_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:
bodyElement = $('body');
mascot = $('.mascot');
//RELEASE 2:
$('h1').css({'color': '#2e0460', 'border': 'dotted 2px', 'visibility': 'visible'});
$('#mascot_label').html("Grasshoppers");
//RELEASE 3: Event Listener
$('img').on('mouseover', function(e){
e.preventDefault()
$(this).attr('src', 'https://scontent-b-ord.xx.fbcdn.net/hphotos-prn2/t1/960219_10202696527363575_2130135885_n.jpg')
});
$('img').on('mouseout', function(e){
e.preventDefault()
$(this).attr('src', 'dbc_logo.jpg')
});
//RELEASE 4 : Experiment on your own
$('img').animate({
border: '8px solid #FFF',
height: '200px',
width: '200px'
});
}); // 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