Introduction to jQuery Selectors:
jQuery selectors allow you to easily target and manipulate elements in the DOM. They follow CSS syntax, making them intuitive and powerful. Selectors in jQuery allow you to target elements by their tag name, class, ID, attributes, position in the DOM, and more.
Basic jQuery Selectors:
Tag Name Selector:
The tag name selector targets all elements with a specific HTML tag.
<script>
$(document).ready(function() {
// Select all <p> elements
$("p").css("color", "blue");
});
</script>
This jQuery code selects all <p> elements and changes their text color to blue.
Class Selector:
The class selector targets all elements with a specific class.
<script>
$(document).ready(function() {
// Select all elements with the "highlight" class
$(".highlight").css("background-color", "yellow");
});
</script>
This jQuery code selects all elements with the class "highlight" and changes their background color to yellow.
ID Selector:
The ID selector targets a single element with a specific ID.
<script>
$(document).ready(function() {
// Select the element with the ID "header"
$("#header").text("Welcome!");
});
</script>
This jQuery code selects the element with the ID "header" and changes its text to "Welcome!".
Attribute Selector:
The attribute selector targets elements with a specific attribute.
<script>
$(document).ready(function() {
// Select all <a> elements with a "target" attribute
$("a[target]").css("color", "red");
});
</script>
This jQuery code selects all <a> elements with a "target" attribute and changes their text color to red.
Advanced jQuery Selectors:
Descendant Selector:
The descendant selector targets elements that are descendants of a specified parent element.
<script>
$(document).ready(function() {
// Select all <span> elements inside <div> elements
$("div span").addClass("highlight");
});
</script>
This jQuery code selects all <span> elements that are descendants of <div> elements and adds the class "highlight" to them.
Child Selector:
The child selector targets elements that are direct children of a specified parent element.
<script>
$(document).ready(function() {
// Select all <li> elements that are direct children of <ul> elements
$("ul > li").addClass("bold");
});
</script>
This jQuery code selects all <li> elements that are direct children of <ul> elements and adds the class "bold" to them.
:first Selector:
The :first selector targets the first element within a set of matched elements.
<script>
$(document).ready(function() {
// Select the first <div> element
$("div:first").addClass("first-div");
});
</script>
This jQuery code selects the first <div> element and adds the class "first-div" to it.
:last Selector:
The :last selector targets the last element within a set of matched elements.
<script>
$(document).ready(function() {
// Select the last <div> element
$("div:last").addClass("last-div");
});
</script>
This jQuery code selects the last <div> element and adds the class "last-div" to it.
:even and :odd Selectors:
The :even and :odd selectors target elements with even and odd index numbers, respectively, within a set of matched elements.
<script>
$(document).ready(function() {
// Select all even <li> elements
$("li:even").addClass("even");
// Select all odd <li> elements
$("li:odd").addClass("odd");
});
</script>
<li> elements and adds the classes "even" and "odd" to them, respectively. Practice Excercise Practice now