jQuery Basics 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

Back to Lesson