Skip to content

Latest commit

 

History

History
executable file
·
104 lines (71 loc) · 5.74 KB

jquery.md

File metadata and controls

executable file
·
104 lines (71 loc) · 5.74 KB
Raw

jQuery Programming Fundamentals

Projected Time

Approximately 2.5 hours

  • 6 minutes for video walkthrough of slides
  • 90 minutes for Independent Practice
  • 30 minutes for challenge
  • 10 minutes for Check for Understanding

Prerequisites

Motivation

jQuery is a popular and easy-to-learn JavaScript library that allows you to manipulate HTML elements. jQuery allows developers to quickly make webpages interactive across different browsers.

A lot of prominent tech companies use jQuery as part of their frontend stack, including GitHub and Stack Overflow. You can use wappalyzer.com to discover more companies that use it.

Objectives

Participants will be able to:

  • Link to jQuery in their HTML pages in the correct place
  • Incorporate jQuery code in the correct place in their HTML files
  • Select HTML elements by their element type, class and ID with jQuery
  • Implement the .on("click") and .on("hover") jQuery methods
  • Implement the .append() jQuery method
  • Implement the .remove() and .empty() jQuery methods

Specific Things To Teach

  • How to incorporate jQuery into a webpage
  • How to select HTML elements
  • Common and useful jQuery methods for basic interactivity
  • Dynamically add or remove HTML elements

Lesson

Things to Remember

  • jQuery is not the same as JavaScript. jQuery is a library written in JavaScript that allows developers to write simpler Javascript and makes JavaScript behave consistently in different browsers.
  • Remember to use . to select classes and # to select ids.
  • There are several jQuery methods that achieve similar goals but through different means. You should understand how they're different so you can use them appropriately.
    • .remove() vs .empty()
    • .text() vs .val() vs .html()

Guided Practice

Work through the jQuery tutorial on Treehouse.

Activity 1 - Trying Out Simple jQuery Functions

For each of the following links, read the code and play around with its functionality. You can refresh the webpage to reset it.

Here is some code and a sandbox for .on("click").

Here is some code and a sandbox for .hover().

Here is some code and a sandbox for .append().

Here is some code and a sandbox for .remove().

Here is some code and a sandbox for .empty().

Activity 2 - jQuery Example

  1. Using your Terminal, create a new directory inside your assignments directory and give it the name jquery-play.

  2. Navigate to jquery-play. Open the whole directory in VS Code using the Terminal shortcut you learned in the "Local Development with VS Code" lesson.

  3. Create a file called index.html. It should automatically appear in the left sidebar in VS Code as an editable file.

  4. Read this example code and talk through it with your pair partner. Once you understand what it does, copy it into index.html and save the file.

  5. Open index.html in a new Chrome tab. What do you see? Is this what you expected, based on the code you read?

  6. Create a new directory called static. Navigate to static. Remember that all CSS and JS files go in this static folder.

  7. Create a new directory called js. Navigate to js.

  8. Create a file in the js directory called myScript.js. It should automatically appear in the left sidebar in VS Code as an editable file.

  9. Read this example code and talk through it with your pair partner. Once you understand what it does, copy it into myScript.js and save the file.

  10. Refresh the Chrome tab that is currently rendering index.html. What happens? What do you see? What are you now able to do?

Activity 3 - Customize the jQuery Example

  1. Using the jQuery documentation or other resources as your guide, add the ability to change a paragraph's font size when it is clicked.

  2. Using the jQuery documentation or other resources as your guide, add the ability to change an element's color when you hover over it with your mouse.

Supplemental Materials

Check for Understanding

  1. Where in an HTML document do you link to the jQuery CDN?
  2. Where in the HTML document do you write your jQuery code?
  3. Where in the HTML document would you link to an external JavaScript file if you were using one?
  4. What are the 3 ways we can select HTML elements for manipulation using jQuery?
  5. Name at least 4 jQuery methods you used or saw today.
  6. Where would you look to find more jQuery methods?