HELLO

1) Please download Class 13 Starter Code

2) Move the following into class-work:

• lifetime-supply

• calculator-box

3) The following solutions are included:

• rgb-color-choice-solution

Class #10

10/29/2018

jQuery (pt. 1)

Announcements

• Final Projects:

⇒ Third deliverable due Monday, November 5th

⇒ HTML/CSS Rough Draft

Agenda

• jQuery Intro

• CSS Selectors

• HTML manipulation using .html()

• The .click() method

• The .val() method

• CSS manipulation using .css()

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

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)

⇒ AJAX

• Bonus: Covers JS's browser inconsistencies

jQuery: What use it?

Pure JavaScript:

http://codepen.io/josephjbliss/pen/uqdCw

jQuery:

http://codepen.io/josephjbliss/pen/jLtfC

jQUery in Two Steps:

1) Use $() to select HTML elements:


	$('#element')

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')
	$('#element div')

• Select Classes using the . (period):


	$('.someClass')
	$('.someClass p')
jQuery CSS Selectors: Practice

• $('div')

⇒ Select all HTML <div> elements

• $('#element')

⇒ 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

.html()

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


	$('#element').html()

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

Overwrites the HTML inside the selected element:


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

Codealong

Click Event

jQuery Click Event

JavaScript:


	function handleClick() {
	  // do something
	}

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

jQuery:


	function handleClick() {
	  // do something
	}

	$('#element').click(handleClick)

CodeAlong

<input> & .val()

<input> and .val()

JavaScript:


	document.querySelector('#element').value

	// returns the value inside of #element

jQuery:


	$('#element').val()

	// returns the value inside of #element
<input> and .val()

• Getting values, use .val()


	$('#element').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()

JavaScript:


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

jQuery:


	$('#element').css('color', 'red')
CSS Manipulation: .css()

• Set Single Property:


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

• Multiple Properties:


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

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!