With jQuery you select (query) HTML elements and perform “actions” on them.
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
- A $ sign to define/access jQuery
- A (selector) to “query (or find)” HTML elements
- A jQuery action() to be performed on the element(s)
$(this).hide() – hides the current element.
$("p").hide() – hides all <p> elements.
$(".test").hide() – hides all elements with class=”test”.
$("#test").hide() – hides the element with id=”test”.
Are you familiar with CSS selectors?
jQuery uses CSS syntax to select elements. You will learn more about the selector syntax in the next chapter of this tutorial.
Tip: If you don’t know CSS, you can learn more here.
The Document Ready Event
You might have noticed that all jQuery methods in our examples, are inside a document ready event:
// jQuery methods go here…
This is to prevent any jQuery code from running before the document is finished loading (is ready).
Here are some examples of actions that can fail if methods are run before the document is fully loaded:
- Trying to hide an element that is not created yet
- Trying to get the size of an image that is not loaded yet
Tip: The jQuery team has also created an even shorter method for the document ready event:
// jQuery methods go here…
Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code.
jQuery selectors are one of the most important parts of the jQuery library.
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
The jQuery element selector selects elements based on the element name.
You can select all
<p> elements on a page like this:
When a user clicks on a button, all
<p> elements will be hidden:
The #id Selector
#id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
When a user clicks on a button, the element with id=”test” will be hidden:
The .class Selector
.class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class:
When a user clicks on a button, the elements with class=”test” will be hidden:
More Examples of jQuery Selectors
|$(“*”)||Selects all elements||Try it|
|$(this)||Selects the current HTML element||Try it|
|$(“p.intro”)||Selects all <p> elements with class=”intro”||Try it|
|$(“p:first”)||Selects the first <p> element||Try it|
|$(“ul li:first”)||Selects the first <li> element of the first <ul>||Try it|
|$(“ul li:first-child”)||Selects the first <li> element of every <ul>||Try it|
|$(“[href]”)||Selects all elements with an href attribute||Try it|
|$(“a[target=’_blank’]”)||Selects all <a> elements with a target attribute value equal to “_blank”||Try it|
|$(“a[target!=’_blank’]”)||Selects all <a> elements with a target attribute value NOT equal to “_blank”||Try it|
|$(“:button”)||Selects all <button> elements and <input> elements of type=”button”||Try it|
|$(“tr:even”)||Selects all even <tr> elements||Try it|
|$(“tr:odd”)||Selects all odd <tr> elements||Try it|
Use our jQuery Selector Tester to demonstrate the different selectors.
For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.
Functions In a Separate File
If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.
When we demonstrate jQuery in this tutorial, the functions are added directly into the
<head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):