Easy Tutorial
❮ Event Mouseleave Event Unbind ❯

jQuery Selectors


jQuery selectors allow you to manipulate groups of HTML elements or individual elements.


jQuery Selectors

jQuery selectors allow you to manipulate groups of HTML elements or individual elements.

jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, attribute values, and more. It is built on existing CSS Selectors, and in addition, it has some custom selectors.

All selectors in jQuery start with the dollar sign: $().


Element Selector

The jQuery element selector selects elements based on the element name.

Select all <p> elements on a page:

Example

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

Example

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An element's id should be unique within a page, so the #id selector is used when you want to find a single, unique element.

To select an element with a specific id, write a hash character, followed by the id of the HTML element:

Example

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

Example

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

.class Selector

The jQuery class selector finds elements with a specific class.

Here is the syntax:

Example

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

Example

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

More Examples

Syntax Description Example
$("*") Selects all elements Live Example
$(this) Selects the current HTML element Live Example
$("p.intro") Selects all <p> elements with class="intro" Live Example
$("p:first") Selects the first <p> element Live Example
$("ul li:first") Selects the first <li> element of the first <ul> Live Example
$("ul li:first-child") Selects the first <li> element of every <ul> Live Example
$("[href]") Selects all elements with an href attribute Live Example
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" Live Example
$("a[target!='_blank']") Selects all <a> elements with a target attribute value not equal to "_blank" Live Example
$(":button") Selects all <input> elements with type="button" and <button> elements Live Example
$("tr:even") Selects even <tr> elements Live Example
$("tr:odd") Selects odd <tr> elements Live Example

Using jQuery Functions in Separate Files

If your website contains many pages and you want your jQuery functions to be easy to maintain, then 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, it is better to place them in a separate file, like this (using the src attribute to reference the file):

Example

<head>
<script src="http://cdn.static.tutorialpro.org/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
❮ Event Mouseleave Event Unbind ❯