Introduction to jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. In this article, we’ll explore some of the most useful APIs provided by jQuery and see them in action.

Selectors

jQuery selectors allow you to select and manipulate HTML elements as a group or individually. Here are some examples:

  $(document).ready(function(){
      // Selects all <p> elements
      $('p').css('color', 'blue');
      
      // Selects element with id="header"
      $('#header').hide();
      
      // Selects elements with class="intro"
      $('.intro').fadeIn(2000);
  });

Event Handling

Handling events in jQuery is simple and powerful. Here are a few examples:

  $(document).ready(function(){
      // Click event
      $('#button').click(function(){
          alert('Button clicked!');
      });
      
      // Hover event
      $('#hoverElement').hover(
          function(){
              $(this).css('background-color', 'yellow');
          }, 
          function(){
              $(this).css('background-color', 'white');
          }
      );
      
      // Form submission
      $('form').submit(function(event){
          event.preventDefault();
          alert('Form submitted!');
      });
  });

AJAX

jQuery significantly simplifies working with AJAX. Here’s a simple example:

  $(document).ready(function(){
      $('#loadData').click(function(){
          $.ajax({
              url: 'data.json',
              dataType: 'json',
              success: function(data){
                  $('#dataContainer').html(JSON.stringify(data));
              }
          });
      });
  });

DOM Manipulation

With jQuery, you can easily manipulate the DOM. Here are some common methods:

  $(document).ready(function(){
      // Append
      $('#content').append('<p>Appended paragraph.</p>');
      
      // Prepend
      $('#content').prepend('<p>Prepended paragraph.</p>');
      
      // Before
      $('#special').before('<p>Text before element.</p>');
      
      // After
      $('#special').after('<p>Text after element.</p>');
  });

App Example Using jQuery APIs

Let’s create a simple to-do list application using the jQuery methods we’ve just seen:

  $(document).ready(function(){
      $('#addTodo').click(function(){
          var todoText = $('#todoInput').val();
          if (todoText) {
              $('#todoList').append('<li>' + todoText + ' <button class="removeTodo">Remove</button></li>');
              $('#todoInput').val('');
          }
      });

      $(document).on('click', '.removeTodo', function(){
          $(this).parent().remove();
      });
  });

In this example, we’re using jQuery’s event handling and DOM manipulation methods to create a dynamic to-do list. Users can add items to the list and remove them with ease.

Hash: 127c8cf59f228bb01a218a6670ea5d02fc344087f2768806b20706c8bec8d77c