jQuery Selectors

Selecting Elements

  • A most common usage pattern for jQuery is to:

    1. Programmatically select (or grab) an element, then

    2. Add an event listener to it or manipulate (change) it in some way

  • jQuery allows us to use css selectors to select elements:

    // We can use css selectors to programmatically select elements

$('p')                   // Type (Tag) selector
$('.feature')            // Class selector
$('#checkout')           // ID selector
$('li strong')           // Descendant selector
$('em, i')               // Multiple selector
$('a[target="_blank"]')  // Attribute selector
$('p:nth-child(2)')      // Pseudo-class selector

  • ID, Class, Type and Descendant selectors are the selectors we’ll be using the most during this course

A complete list of CSS Selectors can be found here

  • Dynamically changing your page using JavaScript is commonly referred to as manipulating the DOM

Example #1

JS Bin on jsbin.com

In the example above jQuery is used to listen for a .click() event on the #button element and then execute the callback function when that element is clicked

Inside the callback function, $("p") selects the p element and uses the .toggleClass() method to dynamically toggle the class of .red-background

Example #2

JS Bin on jsbin.com

In the example above jQuery is used to listen for a .click() event on the #mark-complete element and then call the callback function when the element is clicked

Inside the callback function, $("p.last-of-type") selects the last p element and uses the .addClass() method to dynamically add a class to the element