Skip to content

Instantly share code, notes, and snippets.

@rickarubio
Forked from dbc-challenges/jquery_example.html
Last active January 1, 2016 12:19
Show Gist options
  • Save rickarubio/8143662 to your computer and use it in GitHub Desktop.
Save rickarubio/8143662 to your computer and use it in GitHub Desktop.
Intro to jQuery for Phase 0
<!-- Live site may be seen at http://ricardo.io/portfolio/HTML_CSS_projects/jquery_intro/ -->
<!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 src="dbc_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.
// looks like I'm using a CSS selector on body and
// assigning the CSS value of pink to the body background color
$('body').css({'background-color': 'pink'})
//RELEASE 1:
//Add code here to select elements of the DOM
var bodyElement = $('body')
bodyElement.css({'background-color': 'white'})
var h1Element = $('h1')
h1Element.css({'color': 'yellow'})
var imgElement = $('img')
imgElement.css({'width': '500px'})
//RELEASE 2:
// Add code here to modify the css and html of DOM elements
var h1Element = $('h1')
h1Element.css({'color': 'gray', 'border-bottom': '2px solid black', 'visibility': 'visible'})
var seaLions = $('div h1')
seaLions.html('Sea Lions 2014')
//RELEASE 3: Event Listener
// Add the code for the event listener here
$('img').on('mouseenter', function(e) {
e.preventDefault()
$(this).attr('src', 'sea_lions.jpg')
})
$('img').mouseleave(function() {
$(this).attr('src', 'dbc_logo.png')
})
//RELEASE 4 : Experiment on your own
var divElement = $('div')
divElement.append('<h1>Mouse over the image above.</h1><h2>Do it.</h2><h3>Now.</h3>')
}) // end of the document.ready function: do not remove or write DOM manipulation below this.
@rickarubio
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment