Sample jQuery Format
getElementById method, like this:
In this example, the script gets the ID labeled "top" and replaces its class with "topNew".
With jQuery, you can run the same operation but more quickly and easily. Additionally, jQuery will add the class to the element rather than replace it. This allows you to keep the existing CSS of the element and build on its properties.
Here's the basic jQuery format:
You start by writing
jQuery, followed by the style you want to select. Then add a dot and the method you want to apply.
Here's a more specific example:
This will find the #top ID element and add the "topNew" style to it.
Interacting with IDs, Classes, and HTML Elements
jQuery lets you grab classes and HTML elements, not just IDs. Whether it's an ID, class, or HTML element, what you specify is generically referred to as a "selector."
Here's how you can add a new class to an existing element:
This script looks for the
subtitle class and adds the
bannersubtitle clas to it.
You can add a class to a general HTML element as well:
This script looks for list
li elements and adds the
newListStyle class to it.
You can also work with elements that have classes:
This script looks for paragraph elements with the
ingredients class and adds the
highlight class to it.
Adding Style Properties
In addition to adding styles, you can also add special style properties to be even more specific. For example, you can add any of the following:
Here's an example:
This script looks for the last list item and adds the
lastliststyle class to it.
You can also identify paragraph text that contains a certain word:
This script will look for any paragraph text that contains the word "free" and add the "largetext" class to it.
Other jQuery Classes
In addition to the
.addClass method, jQuery has other methods as well:
removeClass removes a class from an element.
toggleClass adds a class to an element if element doesn't already have the class applied. If the class is already applied,
toggleClass removes it.
The $ Shorthand for jQuery
Rather than writing out
jQuery every time, you can write
$ instead. The
$ symbol is a short variable that replaces
jQuery. Using this symbol, your jQuery statements look like this:
This script looks for all paragraph elements with the
new class and adds the
large class to it.
The preceding statement is the same as if you had written out
Events with jQuery
You apply jQuery styles so they initiate on certain events. The following are common jQuery events:
You use these events in the same way we've been using
addClass, except that these events take parameters. You can specify how long it takes for the action to take place by adding the time in milliseconds in parentheses.
This statement hides all
li elements in 7000 milliseconds.
Normally you wouldn't want to hide an element without the user clicking or otherwise acting on it, so you need to integrate an event first. You do this by adding an anonymous function after the event.
You could also add some text to the element by using the
text method. Here's an example using the
Using "This" in jQuery
You can also use the word
this so that an action is applied only to the element selected rather than applied to all elements. In the function, replace the element name with the more generic
This will add the word "Hi there" when a user clicks an element with the
.widgetTitle class. However, it will write the text only for the specific
.widgetTitle class that was clicked. It won't write it to every element on the page that has the same class.
Here's another example with a different method applied:
In this script, when a paragraph with the
more class is clicked, the paragraph will fade out in 3000 milliseconds.
Running Scripts When the DOM Loads
If you want to run a jQuery script once the DOM loads, there's a special way of writing it. You use the
window.onload method, which can only be run once per page, you can use jQuery's
(document).ready multiple times on the same page.
Here's the format for running a script when the DOM loads:
After the page loads, the text "Finished loading!" will appear.