jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes, and much more. This tutorial covers the most commonly used selectors and demonstrates how to use them effectively in your projects.
jQuery provides several basic selectors that allow you to select elements based on their tag name, id, and class.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Tag Name</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").css("color", "blue");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
This example shows how to select elements by their tag name.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Class Name</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(".myClass").css("font-weight", "bold");
});
</script>
</head>
<body>
<p class="myClass">This is a paragraph with class.</p>
<p>This is a paragraph without class.</p>
</body>
</html>
This example demonstrates how to select elements by their class name.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - ID</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myId").css("color", "red");
});
</script>
</head>
<body>
<p id="myId">This is a paragraph with ID.</p>
<p>This is a paragraph without ID.</p>
</body>
</html>
This example illustrates how to select an element by its id.
Attribute selectors allow you to select elements based on the presence or value of their attributes.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Attribute</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("a[title]").css("color", "green");
});
</script>
</head>
<body>
<a href="#" title="Google">Google</a>
<a href="#">Bing</a>
</body>
</html>
This example shows how to select elements with a specific attribute.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Attribute Value</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("a[href='https://www.google.com']").css("color", "green");
});
</script>
</head>
<body>
<a href="https://www.google.com">Google</a>
<a href="https://www.bing.com">Bing</a>
</body>
</html>
This example demonstrates how to select elements with a specific attribute value.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Attribute Value Contains</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("a[href*='google']").css("color", "green");
});
</script>
</head>
<body>
<a href="https://www.google.com">Google</a>
<a href="https://www.bing.com">Bing</a>
</body>
</html>
This example illustrates how to select elements with an attribute value containing a specific word.
Hierarchy selectors allow you to select elements based on their relationship to other elements in the DOM.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Child</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul > li").css("color", "blue");
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</ul>
</body>
</html>
This example shows how to select child elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Descendant</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul li").css("color", "blue");
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</ul>
</body>
</html>
This example demonstrates how to select descendant elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Sibling</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("h2 + p").css("color", "purple");
});
</script>
</head>
<body>
<h2>Heading</h2>
<p>This paragraph is a sibling of the heading.</p>
<p>This paragraph is not a sibling of the heading.</p>
</body>
</html>
This example illustrates how to select sibling elements.
Form selectors are used to select form elements such as input, textarea, and select.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Input</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(":input").css("background-color", "yellow");
});
</script>
</head>
<body>
<input type="text" value="Text">
<textarea>Textarea</textarea>
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</body>
</html>
This example shows how to select input elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Checked</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(":checked").parent().css("background-color", "yellow");
});
</script>
</head>
<body>
<form>
<input type="checkbox" checked>Checkbox 1</input>
<input type="checkbox">Checkbox 2</input>
<input type="radio" name="radio" checked>Radio 1</input>
<input type="radio" name="radio">Radio 2</input>
</form>
</body>
</html>
This example demonstrates how to select checked checkboxes.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Selected</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(":selected").css("background-color", "yellow");
});
</script>
</head>
<body>
<select>
<option>Option 1</option>
<option selected>Option 2</option>
</select>
</body>
</html>
This example illustrates how to select selected options.
Content filters allow you to select elements based on their content.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Contains</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p:contains('jQuery')").css("color", "red");
});
</script>
</head>
<body>
<p>This paragraph contains the word jQuery.</p>
<p>This paragraph does not contain the keyword.</p>
</body>
</html>
This example shows how to select elements that contain specific text.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Empty</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p:empty").css("border", "1px solid red");
});
</script>
</head>
<body>
<p>This paragraph is not empty.</p>
<p></p>
</body>
</html>
This example demonstrates how to select elements that are empty.