jQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML document traversal, event handling, animation, and Ajax with an easy-to-use API that works across many browsers.
<button id="ex2">Fade Toggle</button>
<div id="box" style="width:100px;height:100px;background:red;margin-top:10px;"></div>
<script>
// Wait for DOM ready
$(document).ready(function() {
// On button click
$("#ex2").click(function() {
// Toggle fade in/out animation
$("#box").fadeToggle();
});
});
<script>
You can install jQuery in several ways:
This page is using jQuery from a CDN: https://code.jquery.com/jquery-3.6.0.min.js
Download jQuery and add: <script src="jquery.min.js"></script> to your HTML file.
To link jQuery in your HTML file, use the <script> tag in the <head> or right before </body>.
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Page</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Linking jQuery from CDN -->
</head>
<body>
<p>Hello jQuery</p>
</body>
</html>
The basic syntax of jQuery is: $(selector).action()
$ = Access jQuery
(selector) = Select HTML element
action() = Perform an action on the element
This selector targets HTML tags like <p>, <h1>, etc.
ID Selector: Targets an element by unique ID using #id
Class Selector: Targets all elements with the same class using .class
<p id="unique">I have an ID</p><br>
<p class="group">I'm part of a class</p><br>
<p class="group">Me too!</p><br>
<button id="idclassBtn">Style by ID and Class</button><br>
<script><br>
$(document).ready(function() { <br><br>
$("#idclassBtn").click(function() { <br><br>
$("#unique").css("font-weight", "bold"); // ID selector<br><br>
$(".group").css("color", "purple"); // Class selector<br><br>
}); <br><br>
}); <br><br>
</script>
Universal Selector: * selects all elements
Grouping Selector: use commas to group multiple selectors
<h3>Heading</h3><br>
<p>Paragraph text</p><br>
<div>Div content</div><br>
<button id="groupBtn">Style All/Grouped</button><br>
<script><br>
$(document).ready(function() { <br><br>
$("#groupBtn").click(function() { <br><br>
$("*").css("font-family", "Arial"); // Universal - applies to all elements<br><br>
$("h3, p").css("background-color", "lightyellow"); // Grouping - applies to h3 and p<br><br>
}); <br><br>
}); <br><br>
</script>
The click() method attaches an event handler function to an HTML element for the "click" event.
<button id="clickBtn">Click Me</button><br>
<p id="clickResult"></p><br>
<script><br>
$(document).ready(function() { <br><br>
$("#clickBtn").click(function() { <br><br>
$("#clickResult").text("Button clicked!"); // Display message on click <br><br>
}); <br><br>
}); <br><br>
</script>
jQuery has many mouse-related events: mouseenter, mouseleave, dblclick, etc.
<div id="mouseBox" style="width:200px;height:100px;background:lightblue;text-align:center;line-height:100px;"><br>
Hover or Double Click Me<br>
</div><br>
<p id="mouseMsg"></p><br>
<script><br>
$(document).ready(function() { <br><br>
$("#mouseBox").mouseenter(function() { <br><br>
$("#mouseMsg").text("Mouse entered!"); <br><br>
}); <br><br>
$("#mouseBox").mouseleave(function() { <br><br>
$("#mouseMsg").text("Mouse left!"); <br><br>
}); <br><br>
$("#mouseBox").dblclick(function() { <br><br>
$("#mouseMsg").text("Double clicked!"); <br><br>
}); <br><br>
}); <br><br>
</script>
Form events include focus(), blur(), change(), submit().
<form id="myForm">
<input type="text" id="myInput" placeholder="Type something"><br><br>
<input type="submit" value="Submit">
</form>
<p id="formOutput"></p>
<script>
$(document).ready(function() { <br>
$("#myInput").focus(function() { <br>
$(this).css("background-color", "#FFFFCC"); // Highlight input on focus <br>
}); <br>
$("#myInput").blur(function() { <br>
$(this).css("background-color", ""); // Reset on blur <br>
}); <br>
$("#myForm").submit(function(event) { <br>
event.preventDefault(); // Prevent actual form submission <br>
$("#formOutput").text("Form submitted with: " + $("#myInput").val()); <br>
}); <br>
}); <br>
</script>
The on() method is a powerful way to attach one or more event handlers to elements—even dynamically added ones.
<button id="onBtn">Add Paragraph</button>
<div id="onContainer"></div>
<script>
$(document).ready(function() { <br>
$("#onBtn").click(function() { <br>
$("#onContainer").append("<p class='newPara'>New paragraph added. Click me!</p>"); <br>
}); <br>
// Attach click event to dynamically created paragraphs using .on()<br>
$("#onContainer").on("click", ".newPara", function() { <br>
$(this).css("color", "red"); // Turn red when clicked <br>
}); <br>
}); <br>
</script>
The show() and hide() methods control visibility of HTML elements.
<p id="text1">This text can be shown or hidden</p>
<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<script>
$(document).ready(function() { <br>
$("#hideBtn").click(function() { <br>
$("#text1").hide(); // Hide the paragraph <br>
}); <br>
$("#showBtn").click(function() { <br>
$("#text1").show(); // Show the paragraph <br>
}); <br>
}); <br>
</script>
The toggle() method alternates between show() and hide().
<p id="toggleText">Click the button to toggle me!</p>
<button id="toggleBtn">Toggle</button>
<script>
$(document).ready(function() { <br>
$("#toggleBtn").click(function() { <br>
$("#toggleText").toggle(); // Toggle visibility <br>
}); <br>
}); <br>
</script>
jQuery provides fade effects like fadeIn(), fadeOut(), fadeToggle(), and fadeTo().
<div id="fadeBox" style="width:200px;height:100px;background:skyblue;text-align:center;line-height:100px;">
Fade Me
</div>
<button id="fadeOutBtn">Fade Out</button>
<button id="fadeInBtn">Fade In</button>
<script>
$(document).ready(function() { <br>
$("#fadeOutBtn").click(function() { <br>
$("#fadeBox").fadeOut(); // Gradually hides the box <br>
}); <br>
$("#fadeInBtn").click(function() { <br>
$("#fadeBox").fadeIn(); // Gradually shows the box <br>
}); <br>
}); <br>
</script>
Slide effects include slideUp(), slideDown(), and slideToggle().
<div id="slideBox" style="width:200px;height:100px;background:pink;text-align:center;line-height:100px;">
Slide Me
</div>
<button id="slideUpBtn">Slide Up</button>
<button id="slideDownBtn">Slide Down</button>
<script>
$(document).ready(function() { <br>
$("#slideUpBtn").click(function() { <br>
$("#slideBox").slideUp(); // Slides the element up to hide it <br>
}); <br>
$("#slideDownBtn").click(function() { <br>
$("#slideBox").slideDown(); // Slides the element down to show it <br>
}); <br>
}); <br>
</script>
The animate() method performs custom animations on CSS properties.
<div id="animateBox" style="width:100px;height:100px;background:orange;position:relative;"></div>
<button id="startAnimate">Animate</button>
<script>
$(document).ready(function() { <br>
$("#startAnimate").click(function() { <br>
$("#animateBox").animate({ <br>
left: '250px', // Move 250px right <br>
opacity: '0.5', // Reduce opacity <br>
height: '150px', // Increase height <br>
width: '150px' // Increase width <br>
}, 1000); // Duration: 1 second <br>
}); <br>
}); <br>
</script>
jQuery animations are queued. You can chain multiple animations in sequence.
<div id="queueBox" style="width:100px;height:100px;background:green;"></div>
<button id="queueBtn">Start Queue</button>
<script>
$(document).ready(function() { <br>
$("#queueBtn").click(function() { <br>
$("#queueBox").animate({height: "200px"}, 500) // Step 1 <br>
.animate({width: "200px"}, 500) // Step 2 <br>
.animate({height: "100px"}, 500) // Step 3 <br>
.animate({width: "100px"}, 500); // Step 4 <br>
}); <br>
}); <br>
</script>
The stop() method halts the current or queued animation on selected elements.
<div id="slidePanel" style="width:100px;height:100px;background:blue;"></div>
<button id="startSlide">Start Slide</button>
<button id="stopSlide">Stop Slide</button>
<script>
$(document).ready(function() { <br>
$("#startSlide").click(function() { <br>
$("#slidePanel").animate({left: "300px"}, 3000); // Animate over 3 seconds <br>
}); <br>
$("#stopSlide").click(function() { <br>
$("#slidePanel").stop(); // Stop animation immediately <br>
}); <br>
}); <br>
</script>
The text() method is used to get or set the text content of an element.
<p id="textTarget">Original Text</p>
<button id="changeText">Change Text</button>
<script>
$(document).ready(function() { <br>
$("#changeText").click(function() { <br>
$("#textTarget").text("The text has been changed!"); // Replace the paragraph text <br>
}); <br>
}); <br>
</script>
The html() method gets or sets the inner HTML of an element.
<div id="htmlBox">This is <b>bold</b> text.</div>
<button id="changeHtml">Change HTML</button>
<script>
$(document).ready(function() { <br>
$("#changeHtml").click(function() { <br>
$("#htmlBox").html("Now this is <i>italic</i> text."); // Replace inner HTML <br>
}); <br>
}); <br>
</script>
The val() method gets or sets the value of form fields.
<input type="text" id="nameInput" value="Hello"><br>
<button id="setValue">Change Value</button>
<script>
$(document).ready(function() { <br>
$("#setValue").click(function() { <br>
$("#nameInput").val("Updated Value"); // Change the input field value <br>
}); <br>
}); <br>
</script>
append() adds content inside an element at the end, and prepend() adds at the beginning.
<div id="listBox">Items:<br></div>
<button id="addItem">Append</button>
<button id="addFirst">Prepend</button>
<script>
$(document).ready(function() { <br>
$("#addItem").click(function() { <br>
$("#listBox").append("<div>New item (end)</div>"); // Adds to the end <br>
}); <br>
$("#addFirst").click(function() { <br>
$("#listBox").prepend("<div>New item (start)</div>"); // Adds to the start <br>
}); <br>
}); <br>
</script>
remove() deletes selected elements. empty() clears all content inside an element.
<div id="boxToRemove">
<p>This will be removed.</p>
<button id="removeContent">Remove</button>
<button id="emptyContent">Empty</button>
</div>
<script>
$(document).ready(function() { <br>
$("#removeContent").click(function() { <br>
$("#boxToRemove").remove(); // Completely removes the div and its content <br>
}); <br>
$("#emptyContent").click(function() { <br>
$("#boxToRemove").empty(); // Only removes inner content but keeps the div <br>
}); <br>
}); <br>
</script>
Adds one or more classes to the selected element(s).
<div id="box1" class="box">Box 1</div>
<button id="addHighlight">Add Highlight</button>
<script>
$(document).ready(function() { <br>
$("#addHighlight").click(function() { <br>
$("#box1").addClass("highlight"); // Adds the "highlight" class to box1 <br>
}); <br>
}); <br>
</script>
Removes one or more classes from the selected element(s).
<button id="removeHighlight">Remove Highlight</button>
<script>
$(document).ready(function() { <br>
$("#removeHighlight").click(function() { <br>
$("#box1").removeClass("highlight"); // Removes the "highlight" class <br>
}); <br>
}); <br>
</script>
Toggles between adding and removing a class.
<button id="toggleHighlight">Toggle Highlight</button>
<script>
$(document).ready(function() { <br>
$("#toggleHighlight").click(function() { <br>
$("#box1").toggleClass("highlight"); // Adds if missing, removes if present <br>
}); <br>
}); <br>
</script>
Get or set style properties of an element directly.
<button id="changeStyle">Change Style</button>
<script>
$(document).ready(function() { <br>
$("#changeStyle").click(function() { <br>
$("#box1").css({ <br>
"border": "2px solid blue", // Add a blue border <br>
"background-color": "lightgreen", // Change background color <br>
"font-size": "18px" // Increase font size <br>
}); <br>
}); <br>
}); <br>
</script>
Have css style for all below
<style>
.box {
border: 1px solid black;
margin: 10px;
padding: 10px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"><!-- Load jQuery -->
<div class="box" id="outerBox">
Outer Box
<div class="box" id="innerBox">
Inner Box
<p>Paragraph inside Inner Box</p>
</div>
<p>Paragraph inside Outer Box</p>
</div>
<div class="box">Sibling Box</div>
Gets the immediate parent of the selected element.
<button id="highlightParent">Highlight Parent of Inner Box</button>
<script>
$(document).ready(function() {
$("#highlightParent").click(function() {
$("#innerBox").parent().addClass("highlight"); // Highlights the parent of #innerBox
});
});
</script>
Gets all ancestors (not just direct parent) of the selected element.
<button id="highlightAncestors">Highlight All Ancestors of Inner Box</button>
<script>
$(document).ready(function() {
$("#highlightAncestors").click(function() {
$("#innerBox").parents().addClass("highlight"); // Highlights all ancestor elements
});
});
</script>
Gets the direct children of the selected element.
<button id="highlightChildren">Highlight Children of Outer Box</button>
<script>
$(document).ready(function() {
$("#highlightChildren").click(function() {
$("#outerBox").children().addClass("highlight"); // Highlights children inside #outerBox
});
});
</script>
Searches for descendant elements that match the selector.
<button id="findParagraphs">Highlight All Paragraphs in Outer Box</button>
<script>
$(document).ready(function() {
$("#findParagraphs").click(function() {
$("#outerBox").find("p").addClass("highlight"); // Finds all <p> tags inside #outerBox
});
});
</script>
Gets all siblings of the selected element.
<button id="highlightSiblings">Highlight Siblings of Outer Box</button>
<script>
$(document).ready(function() {
$("#highlightSiblings").click(function() {
$("#outerBox").siblings().addClass("highlight"); // Highlights all siblings of #outerBox
});
});
</script>
next() gets the immediately following sibling. prev() gets the immediately preceding sibling.
<button id="highlightNext">Highlight Next Sibling of Outer Box</button>
<button id="highlightPrev">Highlight Previous Sibling of Inner Box</button>
<script>
$(document).ready(function() {
$("#highlightNext").click(function() {
$("#outerBox").next().addClass("highlight"); // Highlights the next sibling
});
$("#highlightPrev").click(function() {
$("#innerBox").prev().addClass("highlight"); // Highlights the previous sibling
});
});
</script>
Hides the selected element with or without animation.
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
display: block;
}
</style>
<div id="box">This is a box</div>
<button id="hideBtn">Hide Box</button>
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#box").hide(1000); // Hides the box with 1 second animation
});
});
</script>
9.2 show()
Displays a hidden element with optional animation.
Example:
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
display: block;
}
</style>
<div id="box">This is a box</div>
<button id="showBtn">Show Box</button>
<script>
$(document).ready(function() {
$("#showBtn").click(function() {
$("#box").show(1000); // Shows the box with animation
});
});
</script>
9.3 toggle()
Toggles between hiding and showing the element.
Example:
<div id="box">This is a box</div>
<button id="toggleBtn">Toggle Box</button>
<script>
$(document).ready(function() {
$("#toggleBtn").click(function() {
$("#box").toggle(1000); // Hides or shows the box depending on current state
});
});
</script>
9.4 fadeIn()
Fades in a hidden element.
Example:
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
display: block;
}
</style>
<div id="box">This is a box</div>
<button id="fadeInBtn">Fade In Box</button>
<script>
$(document).ready(function() {
$("#fadeInBtn").click(function() {
$("#box").fadeIn(1000); // Gradually fades the box in
});
});
</script>
9.5 fadeOut()
Fades out a visible element.
Example:
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
display: block;
}
</style>
<div id="box">This is a box</div>
<button id="fadeOutBtn">Fade Out Box</button>
<script>
$(document).ready(function() {
$("#fadeOutBtn").click(function() {
$("#box").fadeOut(1000); // Gradually fades the box out
});
});
</script>
9.6 fadeToggle()
Toggles between fadeIn and fadeOut.
Example:
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
display: block;
}
</style>
<div id="box">This is a box</div>
<button id="fadeToggleBtn">Fade Toggle Box</button>
<script>
$(document).ready(function() {
$("#fadeToggleBtn").click(function() {
$("#box").fadeToggle(1000); // Toggles fade in/out
});
});
</script>
9.7 slideDown()
Slides an element down into view.
Example:
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
display: block;
}
</style>
<div id="box">This is a box</div>
<button id="slideDownBtn">Slide Down Box</button>
<script>
$(document).ready(function() {
$("#box").hide(); // Start hidden for sliding effects
$("#slideDownBtn").click(function() {
$("#box").slideDown(1000); // Slides down the box into view
});
});
</script>
9.8 slideUp()
Slides an element up to hide it.
Example:
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
display: block;
}
</style>
<div id="box">This is a box</div>
<button id="slideUpBtn">Slide Up Box</button>
<script>
$(document).ready(function() {
$("#slideUpBtn").click(function() {
$("#box").slideUp(1000); // Slides the box upward to hide
});
});
</script>
9.9 slideToggle()
Toggles between sliding up and sliding down.
Example:
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
display: block;
}
</style>
<div id="box">This is a box</div>
<button id="slideToggleBtn">Slide Toggle Box</button>
<script>
$(document).ready(function() {
$("#slideToggleBtn").click(function() {
$("#box").slideToggle(1000); // Toggles sliding effect
});
});
</script>
Have for all below the css style..
<style>
#animateBox {
width: 100px;
height: 100px;
background-color: coral;
position: relative;
margin: 10px 0;
}
</style>
</head>
<body>
Use animate() to perform custom animations on CSS properties.
<button id="animateBtn">Animate Box</button>
<script>
$(document).ready(function() {
$("#animateBtn").click(function() {
$("#animateBox").animate({
left: '250px', // Move right
height: '150px', // Increase height
width: '150px' // Increase width
}, 1000); // Duration: 1 second
});
});
</script>
Use stop() to stop ongoing animations immediately.
<button id="startMove">Start Moving</button>
<button id="stopMove">Stop</button>
<script>
$(document).ready(function() {
$("#startMove").click(function() {
$("#animateBox").animate({left: '500px'}, 5000); // Long animation
});
$("#stopMove").click(function() {
$("#animateBox").stop(); // Stops current animation instantly
});
});
</script>
Run code after animation completes using a callback.
<button id="callbackBtn">Animate With Callback</button>
<script>
$(document).ready(function() {
$("#callbackBtn").click(function() {
$("#animateBox").animate({left: '0px'}, 1000, function() {
alert("Animation completed!"); // Callback after animation
});
});
});
</script>
You can chain multiple jQuery effects or animations together.
<button id="chainBtn">Chain Effects</button>
<script>
$(document).ready(function() {
$("#chainBtn").click(function() {
$("#animateBox")
.slideUp(1000) // First slide up
.slideDown(1000) // Then slide down
.animate({left: '200px'}, 1000) // Then move right
.fadeOut(1000) // Then fade out
.fadeIn(1000); // Finally fade in
});
});
</script>
Combine styles and animations to create custom effects.
<button id="customEffectBtn">Custom Effect</button>
<script>
$(document).ready(function() {
$("#customEffectBtn").click(function() {
$("#animateBox").css("background-color", "skyblue") // Change background instantly
.animate({
borderRadius: '50%', // Animate into circle
opacity: 0.5, // Make transparent
width: '200px',
height: '200px'
}, 1500); // Duration 1.5s
});
});
</script>
<p id="addTarget">Target for adding content</p>
<button id="addBefore">Add Before</button>
<button id="addAfter">Add After</button>
<button id="appendTo">Append</button>
<button id="prependTo">Prepend</button>
<script>
$(document).ready(function() {
$("#addBefore").click(function() {
$("#addTarget").before("<p>This is added before the target.</p>");
});
$("#addAfter").click(function() {
$("#addTarget").after("<p>This is added after the target.</p>");
});
$("#appendTo").click(function() {
$("#addTarget").append("<span>Appended inside.</span>");
});
$("#prependTo").click(function() {
$("#addTarget").prepend("<span>Prepended inside.</span>");
});
});
</script>
<div id="removeArea">
<p class="removeThis">Item 1</p>
<p class="removeThis">Item 2</p>
<p class="removeThis">Item 3</p>
</div>
<button id="removeBtn">Remove Items</button>
<script>
$(document).ready(function() {
$("#removeBtn").click(function() {
$(".removeThis").remove(); // Removes selected elements from DOM
});
});
</script>
<hr>
<h2>11.3 Replacing Content</h2>
<h3>Example:</h3>
<div id="replaceBox">Original content</div>
<button id="replaceBtn">Replace Content</button>
<script>
$(document).ready(function() {
$("#replaceBtn").click(function() {
$("#replaceBox").html("<b>New bold content inserted!</b>"); // Replaces inner HTML
});
});
</script>
<p id="contentPara"><strong>Hello</strong> world!</p>
<button id="getHTML">Get HTML</button>
<button id="getText">Get Text</button>
<button id="setHTML">Set HTML</button>
<button id="setText">Set Text</button>
<div id="outputBox"></div>
<script>
$(document).ready(function() {
$("#getHTML").click(function() {
var html = $("#contentPara").html();
$("#outputBox").text("HTML: " + html);
});
$("#getText").click(function() {
var text = $("#contentPara").text();
$("#outputBox").text("Text: " + text);
});
$("#setHTML").click(function() {
$("#contentPara").html("<i>Italic new content</i>");
});
$("#setText").click(function() {
$("#contentPara").text("<b>This will not render as bold</b>"); // Sets plain text
});
});
</script>
<div id="cloneMe">Clone me!</div>
<button id="cloneBtn">Clone</button>
<div id="cloneResult"></div>
<script>
$(document).ready(function() {
$("#cloneBtn").click(function() {
var clone = $("#cloneMe").clone();
$("#cloneResult").append(clone); // Adds a copy of the element
});
});
</script>
<hr>
<h2>11.6 Wrapping Elements</h2>
<h3>Example:</h3>
<p class="wrapTarget">This is some text</p>
<button id="wrapBtn">Wrap with Div</button>
<button id="unwrapBtn">Unwrap</button>
<script>
$(document).ready(function() {
$("#wrapBtn").click(function() {
$(".wrapTarget").wrap("<div style='border:1px solid red;'></div>"); // Wraps each element
});
$("#unwrapBtn").click(function() {
$(".wrapTarget").unwrap(); // Removes the parent wrapper
});
});
</script>
<button id="clickMe">Click Me</button> <button id="dblClickMe">Double Click Me</button>
<div id="clickResult"></div>
<script>
$(document).ready(function() {
$("#clickMe").click(function() {
$("#clickResult").text("Button clicked!"); // Displays text on single click
});
$("#dblClickMe").dblclick(function() {
$("#clickResult").text("Button double-clicked!"); // Displays text on double click
});
});
</script>
<div id="hoverBox" style="width:200px; height:100px; background:lightgray;">Hover over me</div>
<script>
$(document).ready(function() {
$("#hoverBox").hover(function() {
$(this).css("background", "lightgreen"); // Changes color on mouse enter
}, function() {
$(this).css("background", "lightgray"); // Reverts on mouse leave
});
});
</script>
<input type="text" id="focusInput" placeholder="Focus here">
<p id="focusMsg"></p>
<script>
$(document).ready(function() {
$("#focusInput").focus(function() {
$("#focusMsg").text("Input field is focused."); // Triggered on focus
});
$("#focusInput").blur(function() {
$("#focusMsg").text("Input field lost focus."); // Triggered on blur
});
});
</script>
<input type="text" id="keyEvents" placeholder="Type something">
<div id="keyOutput"></div>
<script>
$(document).ready(function() {
$("#keyEvents").keydown(function() {
$("#keyOutput").text("Key down...");
});
$("#keyEvents").keypress(function() {
$("#keyOutput").text("Key pressed...");
});
$("#keyEvents").keyup(function() {
$("#keyOutput").text("Key released!");
});
});
</script>
<form id="sampleForm">
<input type="text" name="username" placeholder="Enter name"><br><br>
<select name="options">
<option value="A">Option A</option>
<option value="B">Option B</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
<div id="formStatus"></div>
<script>
$(document).ready(function() {
$("#sampleForm").submit(function(event) {
event.preventDefault(); // Prevent actual form submission
$("#formStatus").text("Form submitted via jQuery!");
});
$("select").change(function() {
$("#formStatus").text("You selected: " + $(this).val()); // Trigger on dropdown change
});
});
</script>
<button id="bindBtn">Bind Click</button>
<button id="unbindBtn">Unbind Click</button>
<div id="bindBox">Click Me (Binding Test)</div>
<div id="bindStatus"></div>
<script>
$(document).ready(function() {
function showMsg() {
$("#bindStatus").text("Box clicked!");
}
$("#bindBtn").click(function() {
$("#bindBox").on("click", showMsg); // Bind the event
});
$("#unbindBtn").click(function() {
$("#bindBox").off("click", showMsg); // Unbind the event
});
});
</script>
<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<button id="toggleBtn">Toggle</button>
<div id="box1" style="width:200px; height:100px; background:orange;">I am visible</div>
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#box1").hide(); // Hides the box instantly
});
$("#showBtn").click(function() {
$("#box1").show(); // Shows the box instantly
});
$("#toggleBtn").click(function() {
$("#box1").toggle(); // Toggles visibility
});
});
</script>
<button id="fadeIn">Fade In</button>
<button id="fadeOut">Fade Out</button>
<button id="fadeToggle">Fade Toggle</button>
<button id="fadeTo">Fade To (0.5)</button>
<div id="fadeBox" style="width:200px; height:100px; background:skyblue; display:none;">Fade Box</div>
<script>
$(document).ready(function() {
$("#fadeIn").click(function() {
$("#fadeBox").fadeIn(); // Fades in smoothly
});
$("#fadeOut").click(function() {
$("#fadeBox").fadeOut(); // Fades out smoothly
});
$("#fadeToggle").click(function() {
$("#fadeBox").fadeToggle(); // Toggles fade effect
});
$("#fadeTo").click(function() {
$("#fadeBox").fadeTo("slow", 0.5); // Fades to 50% opacity
});
});
</script>
<button id="slideDown">Slide Down</button>
<button id="slideUp">Slide Up</button>
<button id="slideToggle">Slide Toggle</button>
<div id="slideBox" style="width:200px; height:100px; background:lightgreen; display:none;">Slide Box</div>
<script>
$(document).ready(function() {
$("#slideDown").click(function() {
$("#slideBox").slideDown(); // Slides down smoothly
});
$("#slideUp").click(function() {
$("#slideBox").slideUp(); // Slides up smoothly
});
$("#slideToggle").click(function() {
$("#slideBox").slideToggle(); // Toggles sliding
});
});
</script>
<button id="animateBtn">Animate Box</button>
<div id="animBox" style="width:100px; height:100px; background:red; position:relative;"></div>
<script>
$(document).ready(function() {
$("#animateBtn").click(function() {
$("#animBox").animate({
left: '250px', // Move right
opacity: 0.5, // Fade to 50%
height: '150px', // Increase height
width: '150px' // Increase width
}, 1000); // Duration in milliseconds
});
});
</script>
<button id="chainBtn">Chain Animations</button>
<div id="chainBox" style="width:100px; height:100px; background:purple; position:relative;"></div>
<script>
$(document).ready(function() {
$("#chainBtn").click(function() {
$("#chainBox").slideUp(1000) // Slide up
.slideDown(1000) // Then slide down
.animate({left: '200px'}, 1000) // Move right
.animate({opacity: 0.2}, 1000); // Fade out
});
});
</script>
<div id="appendArea">Start:<br></div>
<button id="appendBtn">Append Text</button>
<button id="prependBtn">Prepend Text</button>
<script>
$(document).ready(function() {
$("#appendBtn").click(function() {
$("#appendArea").append(" - Appended Text<br>"); // Adds content to the end
});
$("#prependBtn").click(function() {
$("#appendArea").prepend("Prepended Text - "); // Adds content to the beginning
});
});
</script>
<p id="para1">This is a paragraph.</p>
<button id="afterBtn">Insert After</button>
<button id="beforeBtn">Insert Before</button>
<script>
$(document).ready(function() {
$("#afterBtn").click(function() {
$("#para1").after("<p>Inserted after the paragraph.<br></p>"); // Inserts after the element
});
$("#beforeBtn").click(function() {
$("#para1").before("<p>Inserted before the paragraph.<br></p>"); // Inserts before the element
});
});
</script>
<div id="removeBox">
<p>This content will be removed or emptied.</p>
</div>
<button id="removeBtn">Remove</button>
<button id="emptyBtn">Empty</button>
<script>
$(document).ready(function() {
$("#removeBtn").click(function() {
$("#removeBox").remove(); // Completely removes the element
});
$("#emptyBtn").click(function() {
$("#removeBox").empty(); // Removes content inside but keeps the element
});
});
</script>
<div id="htmlBox"><b>Original bold HTML content</b></div>
<button id="htmlBtn">Replace with HTML</button>
<button id="textBtn">Replace with Text</button>
<script>
$(document).ready(function() {
$("#htmlBtn").click(function() {
$("#htmlBox").html("<i>New italic HTML content</i>"); // Replaces with HTML
});
$("#textBtn").click(function() {
$("#htmlBox").text("<i>Plain text content only</i>"); // Replaces with plain text
});
});
</script>
<img id="image1" src="https://via.placeholder.com/100" alt="Image"><br>
<button id="changeSrc">Change Image</button>
<button id="removeAlt">Remove Alt</button>
<script>
$(document).ready(function() {
$("#changeSrc").click(function() {
$("#image1").attr("src", "https://via.placeholder.com/150"); // Changes image source
});
$("#removeAlt").click(function() {
$("#image1").removeAttr("alt"); // Removes the alt attribute
});
});
</script>
<div id="styleBox" style="width:100px; height:100px; background:gray;"></div>
<button id="styleBtn">Change Style</button>
<script>
$(document).ready(function() {
$("#styleBtn").click(function() {
$("#styleBox").css({
"background-color": "yellow", // Changes background
"border": "2px solid black", // Adds a border
"margin-top": "10px" // Adds margin
});
});
});
</script>
<div id="mouseBox" style="width:150px; height:150px; background:lightblue; text-align:center;">
Hover or Click Me
</div>
<script>
$(document).ready(function() {
$("#mouseBox").click(function() {
alert("Single Click detected!"); // Alerts on single click
});
$("#mouseBox").dblclick(function() {
alert("Double Click detected!"); // Alerts on double click
});
$("#mouseBox").mouseenter(function() {
$(this).css("background", "lightgreen"); // Changes background on hover in
});
$("#mouseBox").mouseleave(function() {
$(this).css("background", "lightblue"); // Changes background back on hover out
});
});
</script>
<input type="text" id="keyInput" placeholder="Type something"><br>
<p id="keyDisplay">Key event output will appear here.</p>
<script>
$(document).ready(function() {
$("#keyInput").keydown(function() {
$("#keyDisplay").text("Key Down"); // When key is pressed down
});
$("#keyInput").keypress(function() {
$("#keyDisplay").text("Key Pressed"); // When key is typed
});
$("#keyInput").keyup(function() {
$("#keyDisplay").text("Key Released"); // When key is released
});
});
</script>
<form id="myForm">
<input type="text" id="nameInput" placeholder="Your Name"><br>
<select id="dropdown">
<option value="">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select><br>
<input type="submit" value="Submit">
</form>
<p id="formMsg"></p>
<script>
$(document).ready(function() {
$("#nameInput").focus(function() {
$(this).css("background-color", "lightyellow"); // Highlights on focus
});
$("#nameInput").blur(function() {
$(this).css("background-color", ""); // Removes highlight on blur
});
$("#dropdown").change(function() {
$("#formMsg").text("Selected: " + $(this).val()); // Shows selected value
});
$("#myForm").submit(function(e) {
e.preventDefault(); // Prevents actual form submission
$("#formMsg").text("Form submitted!"); // Confirmation message
});
});
</script>
<button id="multiEvent">Hover or Click Me</button>
<script>
$(document).ready(function() {
$("#multiEvent").on("mouseenter click", function() {
$(this).css("color", "red"); // Changes text color on hover or click
});
});
</script>
<div id="parentDiv">
<button id="addItem">Add New Item</button>
<ul id="itemList">
<li>Existing Item</li>
</ul>
</div>
<script>
$(document).ready(function() {
$("#addItem").click(function() {
$("#itemList").append("<li>New Item</li>"); // Adds new item to list
});
$("#itemList").on("click", "li", function() {
$(this).css("color", "blue"); // Highlights clicked list item
});
});
</script>
<button id="triggerBtn">Trigger Click</button>
<button id="realBtn">Click Me</button>
<p id="triggerMsg"></p>
<script>
$(document).ready(function() {
$("#realBtn").click(function() {
$("#triggerMsg").text("Real button clicked!"); // Message on real click
});
$("#triggerBtn").click(function() {
$("#realBtn").trigger("click"); // Simulates click
});
});
</script>