jQuery Basics JQ Home << JQ Basics
In these basic lessons we start by looking at how to download jQuery and start using it in our pages. We will use the same simplistic 'Hello World' program we looked at on The JavaScript side of the site, to get a feel for how the jQuery library works. We then take a look at the jQuery Core and Internal methods and properties. We investigate elements selection using the selectors already available in HTML 4.1/5 as well as the custom selectors provided by jQuery itself. After this we look at the jQuery DOM element methods as well as those methods that allow us to traverse the DOM in a simple and concise way. Following this we see how to work with CSS classes and their attributes before finishing with a look at the CSS properties methods available.
Lesson 1: Getting Started
In this lesson we download jQuery, place it onto our pages and create the much loved 'Hello World' program to get an indication of how to use the library. This will introduce us to the basic jQuery syntax and lead into the following lessons in the basics section.
Lesson 2: jQuery Core & Internals
In this lesson we look at the methods and properties that make up the jQuery Core and Internals.
Lesson 3: CSS Selectors
There are twenty five CSS selectors we can use in jQuery, in this lesson we look at some of these and how we use them with jQuery. We start with the CSS1/2 Selectors which are available in all modern browsers before looking at the CSS3 Selectors which are available from IE9+ and the latest versions of Firefox, Chrome, Safari and Opera.
Lesson 4: jQuery Selectors
jQuery adds a whooping twenty eight jQuery specific selectors to the twenty five CSS selectors it supports. In this lesson we look at the jQuery form, index positional and custom selectors and how we use them within jQuery.
Lesson 5: DOM Element Methods
In this lesson we look at the four DOM element methods and how we use them within jQuery. These methods allow us to work with the DOM and extract information for processing.
Lesson 6: Tree Traversal
jQuery has traversal methods that allow us find parents, children and siblings elements within the DOM tree. The library also has methods to walk further up or down the DOM tree to find other ancestors and descendant elements. In this lesson we take our first look at how jQuery simplifies navigation through the DOM by looking at the methods available for navigating the DOM hierarchy.
Lesson 7: Other Traversal
In this lesson we finish our investigation of how jQuery simplifies navigation through the DOM, by looking at the methods available for navigating the DOM that are not hierarchical.
Lesson 8: CSS Classes
In this lesson we take our first look at the close interaction between jQuery and CSS by looking at how we can work with CSS classes when using jQuery.
Lesson 9: CSS Attributes
In this lesson we learn how we can work with CSS attributes using jQuery as well as investigating a couple of general use jQuery CSS methods.
Lesson 10: Working With General CSS Properties
There are lots of jQuery methods available for working with CSS properties, in this lesson we look at some general property methods.
Lesson 11: Working With Dimension & Position CSS Properties
jQuery allows us to get and set box model dimensions and position the screen. In this lesson we look at the property methods to do this.
Related Tutorials
jQuery Intermediate - The Intermediate Lessons.
jQuery Advanced - The Advanced Lessons.