jQuery Selectors

## jQuery Tutorial

jQuery HOME jQuery Intro jQuery Install jQuery Syntax jQuery Selectors jQuery Events

## jQuery Effects

jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining

## jQuery HTML

jQuery Get jQuery Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions

## jQuery Traversing

jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering

## jQuery AJAX

jQuery AJAX Intro jQuery Load jQuery Get/Post

## jQuery Misc

jQuery noConflict()

## jQuery Examples

jQuery Examples jQuery Quiz jQuery Certificate

## jQuery References

jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Misc jQuery Properties

# jQuery Selectors

« Previous
Next Chapter »

jQuery selectors are one of the most important parts of the jQuery library.

## jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their 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:

$("p")

Example

When a user clicks on a button, all <p> elements will be hidden:

## Example

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Try it yourself »

## The #id Selector

The jQuery #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 element:

$("#test")

Example

When a user clicks on a button, the element with id="test" will be hidden:

## Example

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Try it yourself »

## The .class Selector

The jQuery 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:

$(".test")

Example

When a user clicks on a button, the elements with class="test" will be hidden:

## Example

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Try it yourself »

## More Examples of jQuery Selectors

Syntax | Description | Example
--- | --- | ---
$("*") | 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):

## Example

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE