Skip to content

Instantly share code, notes, and snippets.

@mattlewissf

mattlewissf/checkit.markdown

Forked from dbc-challenges/jquery_example.html
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattlewissf/9122362 to your computer and use it in GitHub Desktop.
Save mattlewissf/9122362 to your computer and use it in GitHub Desktop.
Download ZIP
Intro to jQuery for Phase 0
Raw
jquery_example.html
<!DOCTYPE html>
<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>
<div><h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1></div>
<div class="mascot">
<h2> My DBC Mascot </h2>
<img src="http://www.shsu.edu/~pin_www/pics/bobdole250.jpg">
</div>
</body>
</html>
</html>
Raw
jquery_example.js
$(document).ready(function() {
$('h1').click(function() {
$('h1').fadeOut('slow');
});
$("div").css("border", "solid");
$("div").css("color", "green");
$("h2").html("Fiery Skippers!");
$('img').on('mouseover', function(e){
e.preventDefault()
$(this).attr('src', 'http://casswww.ucsd.edu/archive/personal/ron/CVNC/bug_pics/fiery_skipper.jpg')
})
});
//RELEASE 1:
//Add code here to select elements of the DOM
//RELEASE 2:
// Add code here to modify the css and html of DOM elements
//RELEASE 3: Event Listener
// Add the code for the event listener here
//RELEASE 4 : Experiment on your own
//RELEASE 4 : Experiment on your own
}) // 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