jQuery Selectors
jQuery Tutorial » jQuery Selectors
What are jQuery selectors?
jQuery Selector is a function what makes use of expressions to find out matching elements from a DOM based on the given criteria.
Or, we can say something else, selectors are used to select one or more HTML elements using jQuery.
Once an item is selected, we can perform various operations on that selected item.
Selecting Elements by Tag - Example
The jQuery element selector selects elements based on the element name.
When a user clicks on a button, all <p> elements will be hidden:
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("span").hide();
$("p").css("background-color", "aqua");
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a - <span> here i have span tag </span> - paragraph.</p>
<p>This is another <p> paragraph.</p>
<button>Click me to hide paragraphs</button>
<div>
<p class = "myclass">This is first a paragraph.</p>
<p id = "myid">This is another paragraph.</p>
<p>This is 3-rd paragraph.</p>
</div>
</body>
</body>
</html>
The above example will displays first only HTML text with <p> tag, then click "Click me to hide paragraphs" to hide all elements with <p> tag.
Related subjects:
jQuery Introduction
jQuery syntax
jQuery selectors
Tags: jquery selectors and filters, name, selector class, id, wildcard, element, multiple selectors
What are jQuery selectors?
What are the four 4 valid types of jQuery selectors?
What are jQuery selectors give examples?
How many types of selectors are there in jQuery?
Selecting Elements by ID
You can use the ID selector to select a single element with the unique ID on the page. For example:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by ID</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// Highlight element with id mark
$("#container").css("background", "aqua");
});
</script>
</head>
<body>
<p id="container">This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is one more paragraph.</p>
<p><strong>Note:</strong> The value of the id attribute must be unique in an HTML document.</p>
</body>
</html>
In the example above, the $(document).ready() is an event that is used to manipulate a page safely with the jQuery.
Selecting Elements by Class Name
The jQuery .class selector finds elements with a specific class.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Class</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// Highlight elements with class mark
$(".mark").css("background", "yellow");
});
</script>
</head>
<body>
<p class="mark">This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p>This is one more paragraph.</p>
</body>
</html>
jquery selectors and filters, name, selector class, id, wildcard, element, multiple selectors
What are jQuery selectors?
What are the four 4 valid types of jQuery selectors?
What are jQuery selectors give examples?
How many types of selectors are there in jQuery?
JQuery Selectors - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.