Blog

• JavaScript: A programming language.
• jQuery: A library built with JavaScript to simplify tasks.

// JavaScript
document.getElementById("box").style.display = "none";

// jQuery
$("#box").hide();

jQuery is a fast, lightweight JavaScript library that simplifies tasks like:

• DOM manipulation
• Event handling
• Animations
• AJAX calls

It allows you to write less code to achieve more (e.g., $("#id").hide() instead of long JavaScript code).

<p id="delayText">Watch me hide and show with delay!</p>
<button id="delayBtn">Start</button>

<script>
$(document).ready(function(){
  $("#delayBtn").click(function(){
$("#delayText").fadeOut(1000).delay(2000).fadeIn(1000);
  });
});
</script>

.delay() pauses the animation chain.

<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.