jQuery basic selectors
Basic selectors in jQuery allow you to select and manipulate HTML elements based on their tag names, IDs, classes, and other simple criteria. Here’s a breakdown of the most commonly used basic selectors:
1. Universal Selector (*)
- Selects all elements in the document.
- Example:
$(" * ")selects every element on the page.
2. Element Selector
- Selects all elements of a given type (by tag name).
- Example:
$("p")selects all<p>(paragraph) elements.
3. ID Selector
- Selects a single element with the specified ID.
- Syntax:
$("#id") - Example:
$("#header")selects the element with the IDheader.
4. Class Selector
- Selects all elements with the specified class.
- Syntax:
$(".className") - Example:
$(".highlight")selects all elements with the classhighlight.
5. Group Selector
- Selects multiple elements by combining different selectors.
- Syntax:
$("selector1, selector2, ...") - Example:
$("p, .highlight, #header")selects all<p>elements, all elements with the classhighlight, and the element with the IDheader.
6. Descendant Selector
- Selects all elements that are descendants of a specified element.
- Syntax:
$("ancestor descendant") - Example:
$("ul li")selects all<li>elements that are descendants of<ul>elements.
7. Child Selector
- Selects all direct child elements of a specified element.
- Syntax:
$("parent > child") - Example:
$("div > p")selects all<p>elements that are direct children of a<div>element.
8. Attribute Selector
- Selects elements based on the presence or value of a specified attribute.
- Basic Syntax:
$("element[attribute]") - Advanced Syntax:
$("element[attribute='value']"),$("element[attribute^='value']")(starts with),$("element[attribute$='value']")(ends with),$("element[attribute*='value']")(contains). - Examples:
$("[type='text']")selects all input elements withtype="text".$("a[href^='https']")selects all anchor (<a>) elements withhrefattributes that start with "https".
Examples of Basic Selectors in Action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Selectors Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Universal selector
$(" * ").css("border", "1px solid red");
// Element selector
$("p").css("color", "blue");
// ID selector
$("#header").css("background-color", "yellow");
// Class selector
$(".highlight").css("font-weight", "bold");
// Group selector
$("p, .highlight, #header").css("margin", "10px");
// Descendant selector
$("div p").css("font-style", "italic");
// Child selector
$("div > p").css("text-decoration", "underline");
// Attribute selector
$("a[href^='https']").css("color", "green");
});
</script>
</head>
<body>
<div id="header">Header</div>
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2 with highlight</p>
<div>
<p>Child paragraph inside div</p>
</div>
<a href="https://example.com">Link with HTTPS</a>
<a href="http://example.com">Link with HTTP</a>
</body>
</html>