Let’s look at the code we just pasted into our main.js file:
In the example above, document is a special keyword that we use to target the HTML document and create a jQuery object.
We can use the same $() syntax to create jQuery objects for elements on a web page. Typically, we pass a string into $() to target elements by id, class, or tag. Once targeted, we can use . notation to attach a handler method that triggers a callback function.
Let’s consider how we can target elements by class. We can reference elements by class name with the following syntax:
In the example above, every element with a class of 'someClass' is targeted. Note, we prepend the class name with a period (.someClass). Then, we call the .handlerMethod() on all of the referenced items.
Let’s give this a shot on our MOVE Gear site.
Instructions
We have several thumbnail images with a class of 'product-photo', but they don’t appear in the site because their display property is set to none in style.css . Let’s start by using jQuery to target every '.product-photo'.
Now that we have targeted all '.product-photo's, let’s call the jQuery .show() method on them to make them appear.