Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Intro to jQuery for Phase 0
<!DOCTYPE html>
<title>DOM manipulation with jQuery</title>
<script src=""></script>
<script type="text/javascript" src="jquery_example.js"></script>
<h1> Hello. Welcome to the jQuery DOM Manipulation Challenge! </h1>
<div class="mascot">
<h1> My DBC Mascot </h1>
<img src="">
//Link this script and the jQuery library to the jquery_example.html file and analyze what this code does.
$('body').css({'background-color': 'pink'})
//Add code here to select elements of the DOM
bodyElement = $('body')
// Add code here to modify the css and html of DOM elements
$('h1').css({'color': 'blue'})
$('h1').css({'border': 'solid'})
$('h1').css({'visibility': 'hidden'})
$('h1').css({'visibility': 'visible'})
$('.mascot h1').html('Nighthawks')
//RELEASE 3: Event Listener
// Add the code for the event listener here
$('img').on('mouseover', function(){
$(this).attr('src', '')
$('img').on('mouseout', function(){
$(this).attr('src', '')
//RELEASE 4 : Experiment on your own
$('.mascot').click(function() {
'width': '20%',
'padding-left': '+=50px'
}, 1500 );
$('h1').on('mouseover', function(){
$(this).css({'border': 'initial'})
$('h1').on('mouseout', function(){
$(this).css({'border': 'solid'})
}) // 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