JQuery Unit-2
Uploaded by
Tulshiram KambleJQuery Unit-2
Uploaded by
Tulshiram KambleHTML Manipulation
Unit-2
2.1 Getting Setting values from elements
• Getting: Use .val() or .text() to retrieve values from form fields or text
content of elements.
• Setting: Use .val(), .text() or .html() to set values.
Example
<html> // Set new text in the paragraph
<head> $("#setText").click(function() {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $("#textElement").text("New Text Content!");
<script> });
$(document).ready(function() { });
</script>
$("#getValue").click(function() {
</head>
var value = $("#inputField").val(); // Get input field
value <body>
<h3>Getting and Setting Values</h3>
alert("Input Value: " + value);
<input type="text" id="inputField" value="Hello,
}); World!">
$("#setValue").click(function() { <button id="getValue">Get Value</button>
$("#inputField").val("New Value!"); // Set new value <button id="setValue">Set Value</button>
}); <br><br>
$("#getText").click(function() { <p id="textElement">This is some text.</p>
alert("Paragraph Text: " + $("#textElement").text()); <button id="getText">Get Text</button>
}); <button id="setText">Set Text</button>
</body>
</html>
2.2 Handling Attributes
• Use .attr() to get or set an attribute value.
• removeAttr() to delete an attribute.
Example
<html> <body>
<head> <h3>Handling Attributes</h3>
<title>Handling Attributes</title> <img id="image" src="https://via.placeholder.com/150" alt="Sample
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> Image">
<script> <br><br>
$(document).ready(function() { <button id="getAttr">Get Attribute</button>
$("#getAttr").click(function() { <button id="setAttr">Set Attribute</button>
var src = $("#image").attr("src"); <button id="removeAttr">Remove Attribute</button>
alert("Image Source: " + src); </body>
}); </html>
$("#setAttr").click(function() {
$("#image").attr("src", "https://via.placeholder.com/300");
});
$("#removeAttr").click(function() {
$("#image").removeAttr("src");
});
});
</script>
</head>
2.3 Inserting New Elements
• Use .append() or .prepend() to insert elements inside a container.
• Use .after() or .before() to insert elements outside a container.
Example
<html > // Insert before
<head> $("#beforeBtn").click(function() {
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $("#container").before("<p>Inserted Before
Container</p>");
<script>
$(document).ready(function() { });
$("#appendBtn").click(function() { });
$("#container").append("<p>Appended Element</p>"); </script>
}); </head>
<body>
$("#prependBtn").click(function() {
<h3>Inserting Elements</h3>
$("#container").prepend("<p>Prepended
Element</p>"); <div id="container">This is the container</div>
}); <button id="appendBtn">Append</button>
<button id="prependBtn">Prepend</button>
// Insert after
$("#afterBtn").click(function() { <button id="afterBtn">Insert After</button>
$("#container").after("<p>Inserted After <button id="beforeBtn">Insert Before</button>
Container</p>");
</body>
});
</html>
2.4 Deleting/Removing Elements
• Use .remove() to delete an element entirely.
• Use .empty() to remove the child elements of a container.
Example
<html > <body>
<head> <h3>Deleting/Removing Elements</h3>
<title>Remove Elements</title> <div id="toRemove">This will be removed</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="removeBtn">Remove Element</button>
<script> <br><br>
$(document).ready(function() { <div id="container">
$("#removeBtn").click(function() { <p>Child 1</p>
$("#toRemove").remove(); <p>Child 2</p>
}); </div>
$("#emptyBtn").click(function() {
<button id="emptyBtn">Empty Container</button>
$("#container").empty();
</body>
});
</html>
});
</script>
</head>
2.5 CSS Manipulations in jQuery
• jQuery allows easy manipulation of CSS styles for elements using methods
such as .css(), .addClass(), .removeClass(), and .toggleClass().
1) .css():
• Used to get or set CSS properties of an element.
• Syntax:
// Get a property value
var color = $("selector").css("color");
// Set a property
$("selector").css("color", "blue");
// Set multiple properties
$("selector").css({
"color": "blue",
"font-size": "16px“
});
• 2) .addClass()
• Adds one or more classes to selected elements.
• Syntax:
$("selector").addClass("newClass");
• 3) .removeClass()
Removes one or more classes from selected elements.
Syntax:
$("selector").removeClass("existingClass");
• 3) .toggleClass()
Toggles the presence of a class on elements.
Syntax:
$("selector").toggleClass(“toggleClass");
Example
<html> <body>
<head> <div id="box">Box</div>
<title>Simple jQuery Example</title> <button id="change">Change</button>
<style> <button id="toggle">Toggle Highlight</button>
#box {
width: 100px; <script>
height: 100px; $(document).ready(function () {
background-color: red;
text-align: center;
// Change color using .css()
line-height: 100px; $("#change").click(function () {
color: white; $("#box").css("background-color", "blue");
} });
.highlight { // Toggle highlight using .toggleClass()
background-color: yellow; $("#toggle").click(function () {
color: black; $("#box").toggleClass("highlight");
} });
</style> });
<script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
</script> </body>
</head> </html>
2.6 Dimensions in jQuery
• jQuery provides methods to handle dimensions (width, height, etc.) of
elements.
• Getting Dimensions:
• .width() and .height() return the content dimensions of an element,
excluding padding, border, and margin.
• var width = $("selector").width();
• var height = $("selector").height();
• .innerWidth() and .innerHeight() include padding but exclude borders
and margins.
• var innerWidth = $("selector").innerWidth();
• var innerHeight = $("selector").innerHeight();
• Setting Dimensions:
• You can set dimensions by passing values (in pixels or other units).
• $("selector").width(500);
• $("selector").height("200px");
Example
<html> <body>
<head> <div id="box">Box</div>
<title>jQuery Dimensions</title> <button id="get">Get</button>
<style> <button id="set">Set</button>
#box {
<script>
$(document).ready(function () {
width: 100px;
$("#get").click(function () {
height: 100px;
alert("Width: " + $("#box").width() + ", Height: " + $
background-color: orange; ("#box").height());
text-align: center; });
line-height: 100px;
color: white; $("#set").click(function () {
} $("#box").width(150).height(150);
</style> });
<script src="https://code.jquery.com/jquery- });
3.6.0.min.js"> </script>
</script> </body>
</head> </html>
2.7 Positioning in jQuery
• jQuery provides methods to get and set the position of elements in the
DOM.
1) .position()
• Returns the current position of an element relative to its offset parent.
• Syntax:
• var position = $("selector").position();
• console.log(position.top, position.left);
2) .offset()
• Returns the current position of an element relative to the document.
• Syntax:
• var offset = $("selector").offset();
• console.log(offset.top, offset.left);
• 3) .scrollTop() and .scrollLeft()
• Get or set the scroll position of an element.
• Syntax:
var scrollTop = $(window).scrollTop();
$(window).scrollTop(100); // Sets scroll position
• 4) .animate() for Positioning
• Smoothly animates position changes.
• Example:
$("selector").animate({
top: "+=50",
left: "-=50"}, 1000); // Moves element 50px down and 50px left in 1
second
Example
<html> <body>
<head> <div id="box">Box</div>
<title>jQuery Positioning Example</title> <button id="get-position">Get Position</button>
<style> <button id="move-box">Move Box</button>
#box { <script>
width: 100px; $(document).ready(function () {
height: 100px; // Get the current position using .position() and .offset()
background-color: orange; $("#get-position").click(function () {
position: absolute; /* Required for .position() */ var pos = $("#box").position(); // Relative to parent
top: 50px; var offset = $("#box").offset(); // Relative to document
left: 50px; alert("Position - Top: " + pos.top + ", Left: " + pos.left +
text-align: center; "\nOffset - Top: " + offset.top + ", Left: " + offset.left);
line-height: 100px; });
color: white; // Move the box by updating its top and left
} $("#move-box").click(function () {
</style> $("#box").css({ top: "+=50px", // Move down by 50px
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> left: "+=50px" // Move right by 50px
</head> });
});
}); </script></body></html>
