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
Final Projects:
⇒ Third deliverable due Monday, November 5th
⇒ HTML/CSS Rough Draft
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
.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()
Change the duration by providing an option:
⇒ String:
$('p').hide('slow')
$('p').show('fast')
⇒ Number (milliseconds):
$('p').hide(700)
$('p').show(300)
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)
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" />
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()
$(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!
Refactor jQuery City using $(this)
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
<div id="wrapper">
<p id="one">
<span>Some Text</span>
</p>
<p id="two">
<span>Some Text</span>
</p>
</div>
.children()
⇒ Get an element's child elements
.parent()
⇒ Get an element's parent element
.siblings()
⇒ Get an element's sibling elements
.next()
⇒ Get the immediate following sibling element
.prev()
⇒ Get the immediate preceding sibling element
.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')
Open accordian
in Sublime Text
Follow the instructions in js/app.js
Conditional statements
Manipulating CSS Classes
Chaining Functions
Final Proect Convo's