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>