• Home
  • Jobs
  • Courses
  • Certifications
  • Companies
  • Online IDE
  • Login
  • Signup
MYTAT
  • Home
  • Jobs
  • Courses
  • Certifications
  • Companies
  • Online IDE
  • Login
  • Signup
JQuery
  • Introduction To JQuery
  • DOM Manipulation With JQuery
  • Event Handling With JQuery
  • JQuery Effects And Animations
  • AJAX With JQuery
  • JQuery Plugins
  • Responsive Web Design With JQuery
  • Form Validation With JQuery
  • Advanced Topics In JQuery
  • Home
  • Courses
  • JQuery
  • DOM Manipulation With JQuery

DOM Manipulation with jQuery

Previous Next

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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // Select all even <li> elements
    $("li:even").addClass("even");
    // Select all odd <li> elements
    $("li:odd").addClass("odd");
});
</script>
This jQuery code selects even and odd <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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.

<style>
.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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // Change the HTML content of all <div> elements
    $("div").html("<p>New paragraph</p>");
});
</script>
This jQuery code changes the HTML content of all <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
This jQuery code selects all <div> elements with a height greater than 100 pixels and adds a blue border to them.



Practice Excercise Practice now

Previous Next
COMPANY
  • About us
  • Careers
  • Contact Us
  • In Press
  • People
  • Companies List
Products
  • Features
  • Coding Assessments
  • Psychometric Assessment
  • Aptitude Assessments
  • Tech/Functional Assessments
  • Video Assessment
  • Fluency Assessment
  • Campus
 
  • Learning
  • Campus Recruitment
  • Lateral Recruitment
  • Enterprise
  • Education
  • K 12
  • Government
OTHERS
  • Blog
  • Terms of Services
  • Privacy Policy
  • Refund Policy
  • Mart Category
Partner
  • Partner Login
  • Partner Signup

Copyright © RVR Innovations LLP 2025 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP