HELLO

1) Please download Class 14 Starter Code

2) Move the following into class-work:

jquery-city

3) Move the following into homework:

accordian

4) calculator-box-solution included

Class #11

10/31/2018

jQuery (pt. 2)

Announcements

• Final Projects:

⇒ Third deliverable due Monday, November 5th

⇒ HTML/CSS Rough Draft

Agenda

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

.hide()

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


  $('p').hide()

.show()

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


  $('p').show()

Element Visibility with jQuery

• Change the duration by providing an option:

⇒ String:


  $('p').hide('slow')

  $('p').show('fast')

⇒ Number (milliseconds):


  $('p').hide(700)

  $('p').show(300)

Element Visibility with jQuery

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

.fadeIn() and .fadeOut()

.slideDown() and .slideUp()

.slideToggle()

• Each takes a duration option:


  $('p').fadeIn('fast')

  $('p').slideUp(900)

CodeAlong

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

CodeAlong

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

$(this)

$(this)

• Open the following: CodePen

• What's going on here?

• How about turning the individual span red on click?

$(this)

• Helps target specific element that started an event

• Refactor previous CodePen using $(this):


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

  $('span').click(turnRed)

• Now, the span that started the event turns red

$(this)

• 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!

CodeAlong

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?


  $('#wrapper').children()

• Returns the elements nested inside of #wrapper

Document Traversal: HTML Review

  <div id="wrapper">

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

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

  </div>

Document Traversal: It's all in the family

.children()

⇒ Get an element's child elements

.parent()

⇒ Get an element's parent element

.siblings()

⇒ Get an element's sibling elements

Document Traversal: Siblings

.next()

⇒ Get the immediate following sibling element

.prev()

⇒ Get the immediate preceding sibling element

Document Traversal: Find

.find('some-css-selector')

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

• What does this do?


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

Lab/HW

• 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!