1) Please download Class 13 Starter Code

2) Move the following into class-work:



3) The following solutions are included:


Class #10


jQuery (pt. 1)


• Final Projects:

⇒ Third deliverable due Monday, November 5th

⇒ HTML/CSS Rough Draft

JavaScript Review

Open lifetime-supply; write JS for the following:

1. Store your current age into a variable

2. Store a maximum age into a variable

3. Store a favorite drink into a variable

4. Store an amount per day into a variable

5. Calculate how much you would drink for the rest of your life!

6. Output your results to the user


jQuery: What is it?

• jQuery IS JavaScript (source code)

• jQuery is a JavaScript library

• Collection of battle-tested code

• Increases the speed/stability of development

• Why reinvent the wheel?

• 1000's of JS libraries (and growing)

jQuery: What is it?

• Written by John Resig (lives in Brooklyn)

• Motto: "Write Less, Do More"

• tl;dr makes working with JS easier:

⇒ HTML / CSS manipulation

⇒ Event handling (click events)


• Bonus: Covers JS's browser inconsistencies

jQuery: What use it?

Pure JavaScript:




jQUery in Two Steps:

1) Use $() to select HTML elements:


2) Attach jQuery methods to the above selector:

	$('#element').css('background', 'blue')

jQuery CSS Selectors

jQuery CSS Selectors: $('x')

• Similar to document.querySelector()

• The $('x') function - select all of the 'x'

	$('.nav-links') // select all elements with class "nav-links"
	$('h2') // select all <h2>'s
	$('p a') // select all <a>'s inside of all <p>'s
	$('p, a') // select all <p>'s and <a>'s

• The $('x') function takes ANY CSS selector

jQuery CSS Selectors: ID's and Classes

• Select ID's using the # (hashtag):

	$('#element div')

• Select Classes using the . (period):

	$('.someClass p')

jQuery CSS Selectors: Practice


⇒ Select all HTML <div> elements


⇒ Selects the first HTML with an ID of "element"

$('ul li .social-link')

⇒ Select elements with class social-link that are inside <li> elements which are inside <ul>

HTML Manipulation

HTML Manipulation


Reads the HTML (and text) inside the selected element:


.html('<h1>a heading</h1>')

Overwrites the HTML inside the selected element:

	$('#element').html('<h1>a heading</h1>')


Click Event

jQuery Click Event


	function handleClick() {
	  // do something

	document.querySelector('#element').onclick = handleClick


	function handleClick() {
	  // do something



<input> & .val()

<input> and .val()



	// returns the value inside of #element



	// returns the value inside of #element

<input> and .val()

• Getting values, use .val()


	// returns the value inside of #element

• Setting values, use .val('text')

	$('#element').val('Keanu Reeves')

	// sets the value of #element to 'Keanu Reeves'

Using jQuery

Using jQuery

Option 1: Download and store jQuery locally

1. Download jQuery from http://jquery.com/download

2. Save it as jquery.js in the project's js directory

3. Create a <script> tag ABOVE your JS files

  <script src="jquery.js"></script>
  <script src="my-js-project.js"></script>

Using jQuery

Option 2: Link to an external jQuery source (CDN)

1. Locate an externally hosted version of jQuery

2. Create a <script> tag ABOVE your JS files

3. Point the src attribute to the jQuery CDN

  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="my-js-project.js"></script>

Using jQuery: Script Placement

<script> tags should always be placed:

⇒ At the BOTTOM of your <body>

⇒ Right before the closing </body> tag

• JS references the DOM - need to build it first!

• Remember: load <script>'s LAST

CSS Manipulation

CSS Manipulation: .css()


	document.querySelector('#element').style.color = 'red'


	$('#element').css('color', 'red')

CSS Manipulation: .css()

• Set Single Property:

	$('p').css('background-color', 'pink')

• Multiple Properties:

	$('#element').css({ 'height': '100px', 'width': '100px' })


1. Open calculator-box in SublimeText

2. Add a <script> tag to include jQuery

3. Include the following behavior:

• Clicking on a "plus" box adds to the total in the center

• Clicking on a "minus" box subtracts from the total

• Clicking the red box makes the background of the center box red

• Clicking the blue box makes the background of the center box blue

• Clicking the center box make its background white and resets the value to zero

On Deck: #14 - jQuery (pt. 2)

• Toggling element visibility (hide vs. show)

• Manipulating element attributes using .attr()

• The $(this) keyword

• Document traversal (walking the DOM)

Exit Tickets!