Chapter 1: Introduction to jQuery

1.1 What is jQuery?

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.

Example:

<p id="ex1">Click me to change text using jQuery!</p> <script> // This waits until the document is ready $(document).ready(function() {
// When the paragraph with id "ex1" is clicked
$("#ex1").click(function() {
// Change the text of the paragraph
$(this).text("Text changed with jQuery!");
});
});
<script>

1.2 Benefits of Using jQuery

Easy to learn and use
Cross-browser compatibility
Lots of plugins
AJAX support
Animations made easy

Example:

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

1.3 Installing jQuery

You can install jQuery in several ways:

CDN (recommended)
Download and host it locally
Use a package manager like npm

Example (CDN):

This page is using jQuery from a CDN: https://code.jquery.com/jquery-3.6.0.min.js

Example (Local):

Download jQuery and add: <script src="jquery.min.js"></script> to your HTML file.

1.4 Linking jQuery in HTML

To link jQuery in your HTML file, use the <script> tag in the <head> or right before </body>.

Example:

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

Chapter 2: jQuery Syntax and Selectors

2.1 Basic Syntax

The basic syntax of jQuery is: $(selector).action()
$ = Access jQuery
(selector) = Select HTML element
action() = Perform an action on the element

Example:

<p id="basic">Click me to change my color!</p>

2.2 Element Selectors

This selector targets HTML tags like <p>, <h1>, etc.

Example:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<button id="elementBtn">Change all <p> to blue</button>
<script>
$(document).ready(function() { <br>
$("#elementBtn").click(function() { <br>
$("p").css("color", "blue"); // Applies to all <p> tags <br>
}); <br>
}); <br>
</script>

2.3 ID and Class Selectors

ID Selector: Targets an element by unique ID using #id
Class Selector: Targets all elements with the same class using .class

Example:

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

2.4 Universal and Grouping Selectors

Universal Selector: * selects all elements
Grouping Selector: use commas to group multiple selectors

Example:

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

Chapter 3: jQuery Events

3.1 Handling Click Events

The click() method attaches an event handler function to an HTML element for the "click" event.

Example:

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

3.2 Mouse Events (hover, dblclick, etc.)

jQuery has many mouse-related events: mouseenter, mouseleave, dblclick, etc.

Example:

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

3.3 Form Events

Form events include focus(), blur(), change(), submit().

Example:

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

3.4 The on() Method

The on() method is a powerful way to attach one or more event handlers to elements—even dynamically added ones.

Example:

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

Chapter 4: jQuery Effects

4.1 Show and Hide

The show() and hide() methods control visibility of HTML elements.

Example:

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

4.2 Toggle

The toggle() method alternates between show() and hide().

Example:

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

4.3 Fade Effects

jQuery provides fade effects like fadeIn(), fadeOut(), fadeToggle(), and fadeTo().

Example:

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

4.4 Slide Effects

Slide effects include slideUp(), slideDown(), and slideToggle().

Example:

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

Chapter 5: jQuery Animations

5.1 animate() Method

The animate() method performs custom animations on CSS properties.

Example:

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

5.2 Animation Queue

jQuery animations are queued. You can chain multiple animations in sequence.

Example:

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

5.3 stop() Method

The stop() method halts the current or queued animation on selected elements.

Example:

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

Chapter 6: jQuery DOM Manipulation

6.1 Changing Text

The text() method is used to get or set the text content of an element.

Example:

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

6.2 Changing HTML

The html() method gets or sets the inner HTML of an element.

Example:

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

6.3 Changing Input Values

The val() method gets or sets the value of form fields.

Example:

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

6.4 Appending and Prepending

append() adds content inside an element at the end, and prepend() adds at the beginning.

Example:

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

6.5 Removing Elements

remove() deletes selected elements. empty() clears all content inside an element.

Example:

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

Chapter 7: jQuery CSS Manipulation

7.1 addClass()

Adds one or more classes to the selected element(s).

Example:

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

7.2 removeClass()

Removes one or more classes from the selected element(s).

Example:

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

7.3 toggleClass()

Toggles between adding and removing a class.

Example:

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

7.4 css() Method

Get or set style properties of an element directly.

Example:

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

Chapter 8: jQuery Traversing

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

8.1 parent()

Gets the immediate parent of the selected element.

Example:

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

8.2 parents()

Gets all ancestors (not just direct parent) of the selected element.

Example:

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

8.3 children()

Gets the direct children of the selected element.

Example:

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

8.4 find()

Searches for descendant elements that match the selector.

Example:

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

8.5 siblings()

Gets all siblings of the selected element.

Example:

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

8.6 next() and prev()

next() gets the immediately following sibling. prev() gets the immediately preceding sibling.

Example:

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

Chapter 9: jQuery Effects

9.1 hide()

Hides the selected element with or without 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="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>

Chapter 10: jQuery Animations

10.1 animate()

Use animate() to perform custom animations on CSS properties.

Example:

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

10.2 stop()

Use stop() to stop ongoing animations immediately.

Example:

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

10.3 callback function

Run code after animation completes using a callback.

Example:

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

10.4 Chaining Animations

You can chain multiple jQuery effects or animations together.

Example:

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

10.5 Custom Effects

Combine styles and animations to create custom effects.

Example:

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

Chapter 11: DOM Manipulation with jQuery

11.1 Adding Elements

Example:

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

11.2 Removing Elements

Example:

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

11.4 Getting and Setting HTML/Text

Example:

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

11.5 Cloning Elements

Example:

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

Chapter 12: Events in jQuery

12.1 Click and Double Click

Example:

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

12.2 Hover and Mouse Events

Example:

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

12.3 Focus and Blur

Example:

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

12.4 Keypress, Keydown, Keyup

Example:

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

12.5 Form Events

Example:

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

12.6 Event Binding and Unbinding

Example:

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

Chapter 13: jQuery Effects & Animations

13.1 Hide, Show, Toggle

Example:

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

13.2 FadeIn, FadeOut, FadeToggle, FadeTo

Example:

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

13.3 SlideUp, SlideDown, SlideToggle

Example:

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

13.4 Custom Animations using animate()

Example:

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

13.5 Animation Queues and Chaining

Example:

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

Chapter 14: jQuery DOM Manipulation

14.1 Adding Elements - append(), prepend()

Example:

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

14.2 Inserting Elements - after(), before()

Example:

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

14.3 Removing Elements - remove(), empty()

Example:

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

14.4 Replacing Content - html(), text()

Example:

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

14.5 Modifying Attributes - attr(), removeAttr()

Example:

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

14.6 Changing CSS - css()

Example:

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

Chapter 15: jQuery Events & Advanced Techniques

15.1 Mouse Events - click(), dblclick(), mouseenter(), mouseleave()

Example:

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

15.2 Keyboard Events - keypress(), keydown(), keyup()

Example:

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

15.3 Form Events - focus(), blur(), change(), submit()

Example:

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

15.4 The on() Method - Multiple Events

Example:

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

15.5 Event Delegation - on() with Dynamic Elements

Example:

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

15.6 Triggering Events - trigger(), triggerHandler()

Example:

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

jQuery

Beginners To Experts

The site is under development.

jQuery Tutorial

Introduction to jQuery

Chapter 1: Introduction to jQuery

1.1 What is jQuery?

Example:

1.2 Benefits of Using jQuery

Example:

1.3 Installing jQuery

Example (CDN):

Example (Local):

1.4 Linking jQuery in HTML

Example:

jQuery Syntax and Selectors

Chapter 2: jQuery Syntax and Selectors

2.1 Basic Syntax

Example:

2.2 Element Selectors

Example:

2.3 ID and Class Selectors

Example:

2.4 Universal and Grouping Selectors

Example:

jQuery Events

Chapter 3: jQuery Events

3.1 Handling Click Events

Example:

3.2 Mouse Events (hover, dblclick, etc.)

Example:

3.3 Form Events

Example:

3.4 The on() Method

Example:

jQuery Effects

Chapter 4: jQuery Effects

4.1 Show and Hide

Example:

4.2 Toggle

Example:

4.3 Fade Effects

Example:

4.4 Slide Effects

Example:

jQuery Animations

Chapter 5: jQuery Animations

5.1 animate() Method

Example:

5.2 Animation Queue

Example:

5.3 stop() Method

Example:

jQuery DOM Manipulation

Chapter 6: jQuery DOM Manipulation

6.1 Changing Text

Example:

6.2 Changing HTML

Example:

6.3 Changing Input Values

Example:

6.4 Appending and Prepending

Example:

6.5 Removing Elements

Example:

jQuery CSS Manipulation

Chapter 7: jQuery CSS Manipulation

7.1 addClass()

Example:

7.2 removeClass()

Example:

7.3 toggleClass()

Example:

7.4 css() Method

Example:

jQuery Traversing

Chapter 8: jQuery Traversing

8.1 parent()

Example:

8.2 parents()