What is jquery and how it works

jQuery is a fast, lightweight, and feature-rich JavaScript library. It simplifies the process of interacting with HTML documents, handling events, manipulating the DOM (Document Object Model), making AJAX requests, and adding animations to web pages.

Here’s how jQuery works:

1. Include the jQuery library: First, you need to include the jQuery library in your HTML file by adding a <script> tag. You can either download the library and host it on your server or use a Content Delivery Network (CDN) to include it directly from a remote server.

htmlCopy code<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Document Ready: To ensure that your jQuery code executes only when the document is ready, you wrap it inside the $(document).ready() function or the shorthand $(function() { }). This ensures that your code doesn’t execute before the DOM is fully loaded.

javascriptCopy code$(document).ready(function() {
  // jQuery code goes here
});

3. Selecting Elements: jQuery allows you to select HTML elements using CSS-style selectors. You can select elements by their tag name, class, ID, attributes, and more.

javascriptCopy code$(document).ready(function() {
  // Selecting elements
  var paragraphs = $('p'); // Select all <p> elements
  var myElement = $('#myElement'); // Select element with ID "myElement"
  var myClassElements = $('.myClass'); // Select elements with class "myClass"
});

4. Manipulating Elements: jQuery provides methods to manipulate the selected elements, such as changing their content, attributes, CSS styles, adding or removing classes, and more.

javascriptCopy code$(document).ready(function() {
  // Manipulating elements
  $('p').text('New content'); // Change the text content of all <p> elements
  $('#myElement').addClass('highlight'); // Add a CSS class to an element
  $('.myClass').attr('title', 'New title'); // Change the value of an attribute
});

5. Handling Events: jQuery simplifies event handling by providing methods to attach event handlers to elements. You can handle various events such as clicks, key presses, form submissions, and more.

javascriptCopy code$(document).ready(function() {
  // Event handling
  $('button').click(function() {
    // Code to execute when the button is clicked
  });

  $('form').submit(function(event) {
    // Code to execute when the form is submitted
    event.preventDefault(); // Prevent the default form submission
  });
});

6. Making AJAX Requests: jQuery provides methods to make asynchronous HTTP requests (AJAX) to the server, enabling you to fetch data without reloading the entire page.

javascriptCopy code$(document).ready(function() {
  // AJAX request
  $.ajax({
    url: 'api/data',
    method: 'GET',
    success: function(response) {
      // Code to handle the successful response
    },
    error: function(xhr, status, error) {
      // Code to handle the error response
    }
  });
});

jQuery simplifies many common JavaScript tasks by providing a concise and intuitive API. It helps reduce code complexity, improves cross-browser compatibility, and speeds up web development. To read more you can see this video.