jQuery practice

by Danielle Parkinson

HTML

<h1>JQuery Selectors</h1>
   <p>Just like when you write CSS, in <em>jQuery</em> you need to start by targeting the element you want to affect.  Luckily, when selecting elements with <em>jQuery</em> it is much like writing a CSS selector.</p>
   
   <button class="box"></button>
   <button class="box"></button>
   <div class="box"></div>
   <div class="box"></div>
  
   <table>
    <caption>JQuery CSS Reference</caption>
     <tr>
       <th>Selector</th>
       <th>Description</th>
     </tr>
     <tr class="selectors">
       <td>.className</td>
       <td>Selects all elements with the specified class</td>
     </tr> 
     <tr class="selectors">
       <td>#idName</td>
       <td>Selects an element with the specified ID</td>
     </tr> 
    <tr class="selectors">
       <td>*</td>
       <td>Universal selector: selects every element in the document</td>
     </tr>
     <tr class="selectors">
       <td>element</td>
       <td>Selects every element of the specified type</td>
     </tr>
     <tr class="selectors">
       <td>parent > child</td>
       <td>Selects all children of the parent element</td>
     </tr>
     <tr class="selectors">
       <td>anscestor descendant</td>
       <td>Selects all descendants of the parent element</td>
     </tr>
     <tr class="selectors">
       <td>previous + next</td>
       <td>Selects the next sibling of the previous element</td>
     </tr>
     <tr class="selectors">
       <td>previous ~ siblings</td>
       <td>Selects all siblings of the element</td>
     </tr>
     <tr class="filters">
       <td>:odd</td>
       <td>Filters the current selector to only include odd numbered elements</td>
     </tr>
     <tr class="filters">
       <td>:even</td>
       <td>Filters the current selector to only include the even numbered matches</td>
     </tr>
     <tr class="filters">
       <td>:first</td>
       <td>Filters the current selector to only include the first match</td>
     </tr> 
   <tr class="filters">
      ...

CSS

body {
  background-color: #191919;
  color: white;
  padding: 60px;
  height: 2000px;
}

h1 {
  font-weight: normal;
  margin: 0 0 30px 0;
}

em {
  color: #e56e09;
}

p {
  margin: 0 0 20px 0;
}

.box {
  width: 40px;
  height: 40px;
  margin: 30px 10px 20px 0;
  float: left;
  background-color: #38889b;
}

button.box:nth-of-type(1) {
  background-color: #6c9a61;
}

button.box:nth-of-type(2) {
  background-color: #6c9a61;
}

.new-box {
  width: 40px;
  height: 40px;
  margin: 50px 10px 20px 0;
  float: left;
  background-color: #00a3a1;
  display: inline-block;
}
/*------------ Table styles ---------*/

table {
  max-width: 600px;
  margin-top: 150px;
  clear: both;
}

  table a {
    color: #588ab4;
  }

    table a:visited {
      color: #0249ac;
    }

    table a:hover {
      color: #9accf5;
    }

caption {
  font-size: 1.4em;
  margin-bottom: 20px;
}

td {
  padding: 10px;
  background-color: #242424;
}

/*------------ Color Guides ---------*/

.selectors td:first-of-type, .selectors span {
  color: #ff8000;
}
.filters td:first-of-type, .filters span {
  color: #6c9a61;
}

JavaScript

$(".box").css("border", "1px solid white");

$(document).ready ( function() {
	var greenBox = $("button.box");
  var blueBox = $("div.box");
  var newBox = $("div.new-box");
  var n = newBox.length;
  
/*   greenBox.onclick(function () {
  (this).fadeOut();
  }); */
  
  greenBox.click(function() {
  	$(this).slideUp();
	});
  
  if (n === 0) {
    blueBox.hover(function() {
          $(this).after("<div class='new-box'></div>");
    });
  }
  else {
    blueBox.hover(function() {
      newBox.fadeOut();
    });
  }
});