Home Python C Language C ++ HTML 5 CSS Javascript Java Kotlin SQL DJango Bootstrap React.js R C# PHP ASP.Net Numpy Dart Pandas Digital Marketing

jQuery Introduction


What is jQuery

jQuery is a popular JavaScript library that simplifies HTML document traversal, event handling, animation, and AJAX interactions for rapid web development. It aims to make things like HTML manipulation, event handling, and AJAX much simpler with an easy-to-use API that works across different browsers.


Step 1: Setting Up jQuery

  1. Include jQuery in Your HTML

You can include jQuery via a CDN:


HTML
            <!DOCTYPE html>
            <html>
            <head>
              <title>jQuery Tutorial</title>
              <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            </head>
            <body>
              <!-- Your HTML content goes here -->
            </body>
            </html>
          

Step 2: Basic Syntax

The basic syntax is $(selector).action() where:

  • $ is used to access jQuery.
  • selector finds HTML elements.
  • action() is performed on the selected elements.

Step 3: Document Ready Event

Ensure the DOM is fully loaded before running jQuery code:


HTML
            <script>
            $(document).ready(function(){
              // Your jQuery code goes here
              alert("DOM is ready!");
            });
          </script>

          

Step 4: Selecting Elements

Use selectors to target HTML elements:


HTML
            <p id="paragraph">This is a paragraph.</p>

            <script>
              $(document).ready(function(){
                $("#paragraph").text("Hello, jQuery!");
              });
            </script>
          

Step 5: Event Handling

Handle events like clicks:


HTML
            <button id="btn">Click Me</button>

            <script>
              $(document).ready(function(){
                $("#btn").click(function(){
                  alert("Button clicked!");
                });
              });
            </script>
          

Step 6: Manipulating HTML Content

Change HTML content dynamically:


HTML
            <p id="text">Hello, world!</p>
            <input type="text" id="input" value="Hello!">

            <script>
              $(document).ready(function(){
                $("#text").text("Hello, jQuery!");
                $("#input").val("jQuery value");
              });
            </script>
          

Step 7: CSS Manipulation

Modify CSS properties:


HTML
            <p id="css">This is styled text.</p>

            <script>
              $(document).ready(function(){
                $("#css").css({
                  "color": "blue",
                  "font-size": "20px"
                });
              });
            </script>
            
          

Step 8: Adding and Removing Elements

Add new elements to the DOM:


HTML
            <ul id="list">
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
            <button id="add">Add Item</button>
                      
            <script>
              $(document).ready(function(){
                $("#add").click(function(){
                  $("#list").append("<li>New Item</li>");
                });
              });
            </script>

          

Step 9: Animations

Create animations using jQuery:


HTML
            <div id="box" style="width:100px;height:100px;background-color:red;"></div>

            <script>
              $(document).ready(function(){
                $("#box").click(function(){
                  $(this).animate({
                    width: "300px",
                    height: "300px"
                  });
                });
              });
            </script>
            
          

Step 10: AJAX with jQuery

Load data asynchronously:


HTML
            <button id="load">Load Content</button>
            <div id="content"></div>

            <script>
              $(document).ready(function(){
                $("#load").click(function(){
                  $.ajax({
                    url: "content.html", // Make sure you have this file
                    success: function(result){
                      $("#content").html(result);
                    }
                  });
                });
              });
            </script>
            
          

Full Example

Here's a full example combining everything:


HTML
            <!DOCTYPE html>
            <html>
            <head>
              <title>jQuery Tutorial</title>
              <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
              <style>
                #box {
                  width: 100px;
                  height: 100px;
                  background-color: red;
                }
              </style>
            </head>
            <body>
              
            <p id="paragraph">This is a paragraph.</p>
            <button id="btn">Click Me</button>
            <p id="text">Hello, world!</p>
            <input type="text" id="input" value="Hello!">
            <p id="css">This is styled text.</p>
            <ul id="list">
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
            <button id="add">Add Item</button>
            <div id="box"></div>
            <button id="load">Load Content</button>
            <div id="content"></div>
              
            <script>
              $(document).ready(function(){
                // Basic selector and manipulation
                $("#paragraph").text("Hello, jQuery!");
              
                // Event handling
                $("#btn").click(function(){
                  alert("Button clicked!");
                });
              
                // Manipulating content
                $("#text").text("Hello, jQuery!");
                $("#input").val("jQuery value");
              
                // CSS manipulation
                $("#css").css({
                  "color": "blue",
                  "font-size": "20px"
                });
              
                // Adding and removing elements
                $("#add").click(function(){
                  $("#list").append("<li>New Item</li>");
                });
              
                // Animations
                $("#box").click(function(){
                  $(this).animate({
                    width: "300px",
                    height: "300px"
                  });
                });
              
                // AJAX
                $("#load").click(function(){
                  $.ajax({
                    url: "content.html",
                    success: function(result){
                      $("#content").html(result);
                    }
                  });
                });
              });
            </script>
            
            </body>
            </html>
            
          






Advertisement





Q3 Schools : India


Online Complier

HTML 5

Python

java

C++

C

JavaScript

Website Development

HTML

CSS

JavaScript

Python

SQL

Campus Learning

C

C#

java