Learn how to build and design websites with our tutorials.

jQuery Selectors Tutorial

View Tutorial Contents

jQuery selectors allow you to easily select HTML elements so that you can do something with them. jQuery selectors can select HTML elements based on their id, classes, types, attributes, values of attributes and more.

jQuery selectors are based on existing CSS selectors and also has some custom selectors.

You can select HTML elements with the dollar sign , parenthesis and either a set of double quotes or single quotes within the parenthesis: $("") or $('');


jQuery Element Selector

The jQuery element selector selects elements with the specified tag name.

The code example below shows you how to select all of the paragraph (<p>) elements on a page using the jQuery element selector.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){
	$("p").css("border", "10px solid red");
});

</script>

</body>
</html> 

Below is another example showing you how to select all paragraph elements on a page. Also, notice that the button element is also selected using a jQuery element selector ($("button"));


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<button>
Click Here
</button>

<script>

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

</script>

</body>
</html> 


jQuery id Selector

The jQuery id selector allows you to select an HTML element based on its id attribute. This jQuery selector should be used when you want to select one, unique element only.

Each id on a page should be unique, this means that each id should be only appear once in an HTML document.

To select an HTML element with an id attribute value, you do this with the dollar sign , parenthesis and either a set of double quotes or single quotes. Within the quotes, begin with a hash character (#, also called the pound sign), followed by id of the HTML element.

The code example below shows you how to select an HTML element with an id using the jQuery id selector.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p id="one">
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){
	$("#one").css("border", "10px solid red");
});

</script>

</body>
</html> 

Below is another example showing you how to select an HTML element with an id attribute value with the jQuery id selector.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p id="two">
This is a paragraph.
</p>

<button>
Click Here
</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		$("#two").toggle();
	});
});

</script>

</body>
</html> 


jQuery Class Selector

The jQuery class selector selects HTML elements based on HTML elements class attribute values. This means that one or more HTML elements can be selected using the jQuery class selector.

To select one or more HTML elements using the jQuery class selector you do this with the dollar sign , parenthesis and either a set of double quotes or single quotes. Within the quotes, begin with a period (.), followed by class name of the HTML element(s).

The code example below shows you how to select multiple HTML elements that have the same class name using the jQuery class selector.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p class="one">
This is a paragraph.
</p>

<p class="one">
This is a paragraph.
</p>

<script>

$(document).ready(function(){
	$(".one").css("border", "10px solid red");
});

</script>

</body>
</html> 

The example below shows you how to select only paragraph elements with the class of "two" using the jQuery class selector.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h2>
This is a heading
</h2>

<h2 class="two">
This is a heading
</h2>

<p>
This is a paragraph.
</p>

<p class="two">
This is a paragraph.
</p>

<p class="two">
This is a paragraph.
</p>

<button>
Click Here
</button>

<script>

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

</script>

</body>
</html>