<input type="text" id="keyInput" placeholder="Type here">
<p id="keyOutput"></p>
<script>
$(document).ready(function(){
$("#keyInput").keydown(function(event){
$("#keyOutput").text("You pressed: " + event.key);
});
});
</script>
.keydown() fires whenever a key is pressed down.
<p id="chainText">Watch me change!</p>
<button id="chainBtn">Start</button>
<script>
$(document).ready(function(){
$("#chainBtn").click(function(){
$("#chainText").css("color", "red")
.slideUp(1000)
.slideDown(1000);
});
});
</script>
jQuery allows chaining multiple methods in sequence.
<p id="highlightText">Click the button to highlight me!</p>
<button id="addBtn">Add Highlight</button>
<button id="removeBtn">Remove Highlight</button>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
<script>
$(document).ready(function(){
$("#addBtn").click(function(){
$("#highlightText").addClass("highlight");
});
$("#removeBtn").click(function(){
$("#highlightText").removeClass("highlight");
});
});
</script>
.addClass() → Adds CSS class..removeClass() → Removes CSS class.
<p id="fadeText">Fade me in/out!</p>
<button id="fadeBtn">Fade Toggle</button>
<script>
$(document).ready(function(){
$("#fadeBtn").click(function(){
$("#fadeText").fadeToggle(1000);
});
});
</script>
.fadeToggle() smoothly fades elements in or out.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
<script>
$(document).ready(function(){
$("li").each(function(index){
$(this).prepend((index+1) + ". ");
});
});
</script>
.each() loops through all selected elements.
<button id="loadData">Load Data</button>
<div id="result"></div>
<script>
$(document).ready(function(){
$("#loadData").click(function(){
$("#result").load("sample.txt");
});
});
</script>
.load("file.txt") fetches and displays external content without refreshing the page.
<input type="text" id="inputBox" placeholder="Type something">
<p id="output"></p>
<script>
$(document).ready(function(){
$("#inputBox").keyup(function(){
$("#output").text("You typed: " + $(this).val());
});
});
</script>
.keyup() fires every time you release a key..val() gets the input value..text() updates paragraph text.
<div id="box" style="width:100px;height:100px;background:red;"></div>
<button id="moveBtn">Move Box</button>
<script>
$(document).ready(function(){
$("#moveBtn").click(function(){
$("#box").animate({left: '250px'}, 1000);
});
});
</script>
.animate() allows you to animate CSS properties (e.g., move, resize, opacity).
<p id="colorText">Change my color!</p>
<button id="colorBtn">Change Color</button>
<script>
$(document).ready(function(){
$("#colorBtn").click(function(){
$("#colorText").css("color", "blue");
});
});
</script>
.css() is used to change or read CSS properties.
<p id="para">Click the button to toggle me!</p>
<button id="toggleBtn">Toggle</button>
<script>
$(document).ready(function(){
$("#toggleBtn").click(function(){
$("#para").toggle();
});
});
</script>
.toggle() shows/hides the element depending on its current state.