AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery Selectors


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

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.

Note: jQuery supports almost all the selectors defined in CSS3, as well as it has its own custom selectors.

 

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 &lt;p&gt; 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:

<!DOCTYPE html>
<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.

<!DOCTYPE html>
<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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...