DOM Manipulation with jQuery
Selecting Elements In The DOM Using JQuery Selectors
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
Manipulating DOM Elements By Modifying Attributes, Styles, And Content
Introduction to DOM Manipulation with jQuery:
DOM manipulation is a crucial aspect of web development, allowing developers to dynamically change the structure, style, and content of web pages. jQuery simplifies DOM manipulation by providing easy-to-use methods to modify attributes, styles, and content of DOM elements.
Modifying Attributes with jQuery:
Changing Attribute Values:
jQuery provides methods to change attribute values of DOM elements dynamically. The attr() method is used to get or set attribute values.
<script>
$(document).ready(function() {
// Set the src attribute of an image
$("img").attr("src", "newimage.jpg");
});
</script>
In this example, the attr() method sets the src attribute of all <img> elements to "newimage.jpg".
Removing Attributes:
jQuery also allows you to remove attributes from DOM elements using the removeAttr() method.
<script>
$(document).ready(function() {
// Remove the href attribute from all anchor elements
$("a").removeAttr("href");
});
</script>
This jQuery code removes the href attribute from all <a> elements.
Modifying Styles with jQuery:
Changing CSS Properties:
jQuery enables you to modify CSS properties of DOM elements using the css() method.
<script>
$(document).ready(function() {
// Change the background color of all paragraphs
$("p").css("background-color", "yellow");
});
</script>
This jQuery code changes the background color of all <p> elements to yellow.
Adding and Removing CSS Classes:
You can add or remove CSS classes from DOM elements using the addClass() and removeClass() methods.
.highlight {
font-weight: bold;
color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Add the 'highlight' class to all <h1> elements
$("h1").addClass("highlight");
// Remove the 'highlight' class from all <p> elements
$("p").removeClass("highlight");
});
</script>
In this example, the addClass() method adds the "highlight" class to all <h1> elements, while the removeClass() method removes the "highlight" class from all <p> elements.
Modifying Content with jQuery:
Changing Text Content:
jQuery provides methods to modify text content of DOM elements using text() and html() methods.
<script>
$(document).ready(function() {
// Change the text content of all <h2> elements
$("h2").text("New Heading");
});
</script>
This jQuery code changes the text content of all <h2> elements to "New Heading".
Changing HTML Content:
You can also change the HTML content of DOM elements using the html() method.
<script>
$(document).ready(function() {
// Change the HTML content of all <div> elements
$("div").html("<p>New paragraph</p>");
});
</script>
<div> elements to <p>New paragraph</p>. Practice Excercise Practice now
Traversing The DOM Tree Using JQuery Traversal Methods
Traversing the DOM tree is a fundamental aspect of web development, allowing developers to navigate through the hierarchical structure of HTML documents and target specific elements for manipulation. jQuery simplifies DOM traversal by providing a wide range of traversal methods that enable efficient selection and manipulation of DOM elements based on their relationship to other elements.
Introduction to DOM Traversal with jQuery:
DOM traversal involves moving up, down, and sideways through the DOM tree to find and interact with elements. jQuery offers several methods for traversal, including parent, child, sibling, and filtering methods, which make it easier to locate elements based on their relationship to other elements.
Traversing Up the DOM Tree:
Parent Elements:
The parent() method in jQuery selects the direct parent element of the matched element.
<script>
$(document).ready(function() {
// Select the parent element of all <span> elements
$("span").parent().css("border", "1px solid red");
});
</script>
In this example, $("span").parent() selects the parent element of all <span> elements and adds a red border to them.
Ancestors:
The parents() method selects all ancestor elements, traversing up the DOM tree.
<script>
$(document).ready(function() {
// Select all ancestor elements of all <span> elements
$("span").parents().css("background-color", "lightblue");
});
</script>
This jQuery code selects all ancestor elements of <span> elements and sets their background color to light blue.
Traversing Down the DOM Tree:
Child Elements:
The children() method selects all direct child elements of the matched element.
<script>
$(document).ready(function() {
// Select all direct child elements of <ul> elements
$("ul").children().css("font-weight", "bold");
});
</script>
In this example, $("ul").children() selects all direct child elements of <ul> elements and sets their font weight to bold.
Descendant Elements:
The find() method selects all descendant elements of the matched element.
<script>
$(document).ready(function() {
// Select all descendant elements with the class "highlight"
$("div").find(".highlight").css("color", "red");
});
</script>
This jQuery code selects all descendant elements with the class "highlight" within <div> elements and changes their color to red.
Traversing Sideways in the DOM Tree:
Sibling Elements:
The siblings() method selects all sibling elements of the matched element.
<script>
$(document).ready(function() {
// Select all sibling elements of <li> elements
$("li").siblings().addClass("highlight");
});
</script>
In this example, $("li").siblings() selects all sibling elements of <li> elements and adds the class "highlight" to them.
Next and Previous Elements:
The next() and prev() methods select the next and previous sibling elements, respectively.
<script>
$(document).ready(function() {
// Select the next sibling element of all <h2> elements
$("h2").next().css("font-style", "italic");
});
</script>
This jQuery code selects the next sibling element of all <h2> elements and sets its font style to italic.
Filtering Methods:
Filtering by Selector:
The filter() method allows filtering of matched elements based on a specified selector.
<script>
$(document).ready(function() {
// Select all <li> elements with an even index
$("li").filter(":even").css("background-color", "lightgray");
});
</script>
In this example, $("li").filter(":even") selects all <li> elements with an even index and sets their background color to light gray.
Filtering by Function:
The filter() method can also accept a function as an argument for custom filtering.
<script>
$(document).ready(function() {
// Select all <div> elements with a height greater than 100 pixels
$("div").filter(function() {
return $(this).height() > 100;
}).css("border", "2px solid blue");
});
</script>
<div> elements with a height greater than 100 pixels and adds a blue border to them. Practice Excercise Practice now
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP