1) Please download Class 14 Starter Code

2) Move the following into class-work:


3) Move the following into homework:


4) calculator-box-solution included

Class #11


jQuery (pt. 2)


• Final Projects:

⇒ Third deliverable due Monday, November 5th

⇒ HTML/CSS Rough Draft


Element visibility

Manipulating attributes with .attr()

$(this) keyword

Document traversal

Calculator Box Review

Element Visibility

Element Visibility

• Hiding/showing HTML is a common pattern

• Render more content w/out scroll or new page

• Useful for menus / tooltips / modals / overlays

• Hidden elements not destroyed - just not visible

• Ex: Bootstrap modal

Element Visibility with jQuery


⇒ Hides elements by setting their inline style to display: none;



⇒ Reveals elements by setting their inline style to its previous value


Element Visibility with jQuery

• Change the duration by providing an option:

⇒ String:



⇒ Number (milliseconds):



Element Visibility with jQuery

• jQuery provides alternatives to .hide() and .show():

.fadeIn() and .fadeOut()

.slideDown() and .slideUp()


• Each takes a duration option:




Element Attributes

Manipulating Element Attributes

• What are the attributes in the following:

  <img src="keanu-reeves.jpg" alt="World's coolest dude" />

• Use .attr() to change attributes:

  $('img').attr('src', 'gary-busey.jpg')

  <img src="gary-busey.jpg" alt="World's coolest dude" />


Exercise: jQuery City

• Open jquery-city in Sublime Text

• Clicking on a thumbnail changes the src of the <img id="big-image" /> to the src from the thumbnail

• Hint: use .attr()

5 minute break



• Open the following: CodePen

• What's going on here?

• How about turning the individual span red on click?


• Helps target specific element that started an event

• Refactor previous CodePen using $(this):

  fuction turnRed() {
    $(this).css('color', 'red')


• Now, the span that started the event turns red


• In JS, functions are called by an object

• This object can be accessed inside the function via this

this is the "context" of the function

• Refers to whatever object called it

• We can "wrap" this in jQuery: $(this)

• Surprise: DOM nodes (HTML elements) are JS objects!


Refactor jQuery City using $(this)

Document Traversal

Document Traversal

• Given an element, can I access elements around it?

• jQuery "walks the DOM"

• What do you think the following will do?


• Returns the elements nested inside of #wrapper

Document Traversal: HTML Review

  <div id="wrapper">

    <p id="one">
      <span>Some Text</span>

    <p id="two">
      <span>Some Text</span>


Document Traversal: It's all in the family


⇒ Get an element's child elements


⇒ Get an element's parent element


⇒ Get an element's sibling elements

Document Traversal: Siblings


⇒ Get the immediate following sibling element


⇒ Get the immediate preceding sibling element

Document Traversal: Find


⇒ Will find child elements matching a selector

  <div id="wrapper">
     <p class="post">Lorem ipsum dolor sit amet.</p>
     <p>Lorem ipsum dolor sit amet.</p>
     <p class="post">Lorem ipsum dolor sit amet.</p>

• What does this do?

  $('#wrapper').find('.post').css('color', 'red')


• Open accordian in Sublime Text

• Follow the instructions in js/app.js

On Deck: #15 - Conditional Statements

• Conditional statements

• Manipulating CSS Classes

• Chaining Functions

• Final Proect Convo's

Exit Tickets!