Skip to content

Instantly share code, notes, and snippets.

@Databates

Databates/jquery_example.html

Forked from dbc-challenges/jquery_example.html
Last active January 3, 2016 21:39
Show Gist options
  • Save Databates/8523363 to your computer and use it in GitHub Desktop.
Save Databates/8523363 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Databates revised this gist Jan 20, 2014. 2 changed files with 46 additions and 0 deletions.
    1 change: 1 addition & 0 deletions jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,7 @@
    <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>
    45 changes: 45 additions & 0 deletions jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    $(document).ready(function(){

    var bodyElement = $('body')

    //RELEASE 0:
    //Link this script and the jQuery library to the jquery_example.html file and analyze what this code does.

    @@ -8,18 +10,61 @@ $('body').css({'background-color': 'pink'})
    //RELEASE 1:
    //Add code here to select elements of the DOM

    var header = $('h1');
    var mascot_class = $('.mascot');
    var div = $('div');

    //RELEASE 2:
    // Add code here to modify the css and html of DOM elements

    $('h1').css({
    'color': 'red',
    'border': '1px solid blue',
    'visibility': 'visible'//'hidden'
    });

    /*
    Or you could do it line by line if you want: $('h1').css({'color': 'red'});
    Or you can use the variable we set above header.css({'color': 'red'});
    To change ONLY the h1 nested in the div with class mascot use $('.mascot h1').css({'color': 'purple'});
    */

    //.html() method lets you set & get the html of an element:
    $('.mascot h1').html('DBC Fox')



    //RELEASE 3: Event Listener
    // Add the code for the event listener here

    $('img').on('mouseover', function(e){
    e.preventDefault()
    $(this).attr('src', 'http://www.vamers.com/wp-content/uploads/2013/09/Vamers-FIY-Ermahgerd-What-does-the-Fox-say-Ylvis-has-the-answer-Main-.jpg')
    })

    $('img').on('mouseout', function(e){
    e.preventDefault()
    $(this).attr('src', 'http://i.dailymail.co.uk/i/pix/2011/11/30/article-2067985-0EFB7E9000000578-738_636x677.jpg') //overrides original img.
    })





    //RELEASE 4 : Experiment on your own

    //borrowed from menor:
    $("#bigger").click(function() {
    $("img").animate(
    {"height": "+=50px"},
    "easein");
    });

    $("#smaller").click(function() {
    $("img").animate(
    {"height": "-=50px"},
    "easeout");
    });



  2. @dbc-challenges dbc-challenges created this gist Dec 14, 2013.
    18 changes: 18 additions & 0 deletions jquery_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>DOM manipulation with jQuery</title>

    <!-- Add a link to jQuery CDN here script here -->

    <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.jpg">
    </div>

    </body>
    </html>
    27 changes: 27 additions & 0 deletions jquery_example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    $(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


    //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






    }) // end of the document.ready function: do not remove or write DOM manipulation below this.