Course List >> Web Development 101 >> The Front End >> 6: jQuery Basics
Scroll up or hover over the breadcrumbs to view the navigation bar

jQuery 101

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.

Points to Ponder

Look through these now and then use them to test yourself after doing the assignment

  • What is the DOM?
  • How can you interact with the DOM?
  • How can you add elements to the DOM?
  • How can you modify the contents of an element?

Assignment:

  1. Learn about jQuery by doing Codecademy's jQuery Track sections 1-3 ("Introducing jQuery", jQuery Functions", and "Dynamic HTML").
  2. If you can't get enough, also give Code School's try jQuery a shot (let us know which is better!).
  3. The remaining Codecademy sections are, again, extra credit and will be covered later in the curriculum.
  4. View the following series of videos where a developer walks through building a nifty image slider using jQuery. You don't need to understand every little thing he's doing, but you should be able to follow along:

    1. Part 1: Structure
    2. Part 2: Looping Function
    3. Part 3: User Controls

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

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150