Skip to content

Latest commit

 

History

History
120 lines (99 loc) · 2.91 KB

solutions.md

File metadata and controls

120 lines (99 loc) · 2.91 KB
Raw

jQuery & DOM Exercises

Nature Drawing 101: Draw a Tree!

  • How many children does header have?
    • just one: the ul element
  • Name a direct child of the p element.
    • the a elment
  • Name a direct parent of the p element
    • the section element
  • What is the parent of the html element?
    • Trick question! It turns out that html belongs to the document object, which lives inside your browser (not your html)!

CSS Selector Challenge

  • #fancy
  • p#fancy
  • div p#fancy
  • .page #fancy
  • .page p#fancy
  • div.page p#fancy
  • div .small
  • div a.small
  • .small
  • div.page a.small
  • p a
  • div.page p a
  • .page p a
  • div p a
  • .mad-favs li
  • ul.mad-favs li
  • div.page ul.mad-favs li
  • .page .mad-favs li
  • .sparkles
  • p.sparkles
  • div p.sparkles
  • div.page p.sparkles
  • p a.small
  • p .small
  • div p .small
  • div.page p a.small

jQuery Selector Challenge

Using jQuery:

var $el = $("#greeting");
var $el = $("div");
var $el = $("div#greeting");
// note that using the "$" in the variable name `$el` is just a naming convention, it indicates to you, dear reader, that the value of `$el` is a jquery `object` and has special jquery methods.
  1. $("#greeting").text(); // get "Hello There"
  2. $("#greeting").text("Hola"); // set "Hola"
  3. $("body").prepend("<h1>A Spanish Greeting</h1>");
  4. $("body").append("<div>Que tal?</div>");
  5. $("div").addClass("blue");

Using Vanilla Javascript:

var el = document.querySelector("#greeting");
var el = document.querySelector("div");
var el = document.querySelector("div#greeting")

In the past you'd see alternative ways of grabbing DOM elements in javascript. There is no good reason to use these any more:

var el = document.getElementById("greeting");
var el = document.getElementByTagName("div");
var el = document.getElementByClassName("someclass")

  1. document.querySelector("#greeting").textContent; // get "Hello There"

  2. document.querySelector("#greeting").textContent = "Hola"; // set "Hola"

  3.     var bodyEl = document.querySelector("body");
    bodyEl.innerHTML = "<h1>Hola</h1>" + bodyEl.innerHTML;
  4.     var bodyEl = document.querySelector("body");
    bodyEl.innerHTML = bodyEl.innerHTML + "<div>Que tal?</div>";
  5.     // ahhhhhhhhhh
    var divEls = document.querySelectorAll("div");
    Array.prototype.slice.apply(divEls).forEach(function(el){
        el.classList.add("blue");
    })

Indiana Jones And the Temple of DOM

// title
$("h1#san-francisco_title").text("Indiana Jones and the Temple of DOM");
$("h1#san-francisco_title").append("<small>(Rated G)</small>")

// image swap
var $target = $("div.image-wrapper img").eq(0);
var new_image = "http://media2.giphy.com/media/MS0fQBmGGMaRy/giphy.gif";
$target.attr("src", new_image);