Wednesday-Thursday: jQuery Basics & Forms Copy

Introduction

jQuery is a library of commonly used javascript widgets and functions that has more or less taken the internet by storm. It’s written in javascript and it means that you don’t have to go through the pain of building a popup modal dialog box or a dropdown menu, for example, the long way. It also gives you the incredibly easy ability to select elements on the webpage ("DOM elements") so you can start modifying their properties, whether that’s hiding them, moving them, changing their contents… it’s all in your hands!

jQuery will let you take your javascript knowledge and start really diving into your webpages and messing with (ahem, improving) the elements.

jQuery, of course, provides a very easy-to-use model for manipulating the elements on your page. It also contains lots of helper functions and special libraries for doing things like building widgets or even mobile apps. You get to benefit from all the lazy programmers before you who build these tools to make their lives easier. Enjoy!

Learning Objectives

  • What is the DOM?

  • How to add jQuery to Your Web Pages(Download/CDN).

  • Using jQuery How can you :

    • interact with the DOM?
    • modify the contents of an element?
    • get, set, add and remove elements.
  • jQuery syntax anatomy $(selector).action()

  • What does the $ symbol mean? What is a selector and action(events)?

  • jQuery selectors:

    • How are selectors actually pretty similar to the way CSS operates?
    • How can you select a particular element on the page?
    • What does a jQuery selector return?
  • What is the Document Ready Event $(document).ready().

    • Why is it often important to wait for the Document (DOM) to finish loading?
  • jQuery Dimension Methods

    • How can you manipulate the values (e.g. html, width, height…) of a selected element or elements?
  • what is implicit iteration.

    • What does it mean that selected elements are "implicitly iterated over"? (Think if you used $("div") what would happen)
  • jQuery Chaining.

  • What does "traversing the DOM" mean?

  • How can you add CSS to a selected element?

  • How do you add or remove data attributes from an element?

  • What new iterators (including some familiar Ruby ones) does jQuery give you?

  • How can you select only the <li> elements inside of <div> elements with class test-div?

  • What happens to the elements you’ve already selected (e.g. with $("li")) if another qualifying element (e.g. a <li>gets added to the DOM later?

  • How would you add the class some-class to every <li> on the page?

  • How would you use #map to return an array listing the contents of a particular list?

  • Where can you look up any selectors you need?

Study

  1. Learn about jQuery by doing Code School’s try jQuery.
  2. Read through jQuery Fundamentals from jqfundamentals.com
  3. Browse Learning jQuery from jquery.com(see the "Chapters" below) to fill in any gaps you have and provide alternate explanations for things you’re not quite sure on.

Additional Resources


Introduction to jQuery Forms

Forms are the user’s window into your back end. You’ve learned a whole lot about them in previous lessons, but here we’ll focus on using jQuery to interact with your forms and in the next lesson we’ll look at actually submitting them asynchronously with AJAX.

You’ve already got all the tools you need to use Javascript to validate your user’s inputs, but you probably haven’t used them in this way before.

Learning Objectives

  • How do you select a particular form input with jQuery?
  • How do you select the currently active (focused) form input?
  • How do you activate the next form input?
  • How do you determine whether a checkbox or radio button is checked using jQuery?
  • How do you run validations on the user’s form input in real time?
  • Why is front-end form validation not sufficient to protect against malicious users?
  • How do you disable a form element?
  • How do you cause the erroneous form input to be highlighted and red?
  • How do you add an error message directly above the input field that’s wrong?
  • What is the jQuery Validate plugin and how do you include it in your project?

Study

  1. Read Smashing Magazine on Web Form Validation Best Practices and Tutorials to learn just about everything you need to know here.

  2. Browse the Documentation for the jQuery Validation Plugin to get you up and running with it, saving lots of time and effort.

  3. Read An approach to form validation using jQuery from Scratch to see this stuff in action.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

Leave a Reply