JQuery

What is JQuery?

JQuery is a set of JavaScript functions that allow you to manipulate HTML elements, create animations, and handle user interactions with ease. If you are not familiar with javascript programming language I suggest you learn it first. There are many resources that can help you to learn javascript easily. I will be attaching some resources I used to learn javascript at the end of this blog under references that can help you out. Otherwise, I will also be writing soon about Javascript and how you can learn it easily. With jQuery, you can select and manipulate elements on the page using CSS selectors, making it much easier to add, remove, or modify content on your website.

JQuery is a powerful JavaScript library that has been helping front-end developers build dynamic and interactive websites for over a decade.

Benefits of using jQuery

It abstracts away many of the complexities of JavaScript. Instead of having to write long, verbose lines of code to accomplish simple tasks, jQuery provides simple, easy-to-understand functions that can save you a lot of time and effort.

For example, instead of having to write complex JavaScript code to handle mouse events, you can use jQuery's built-in event-handling functions to handle clicks, hovers, and other user interactions with just a few lines of code. Let's see these actions examples in the code.

JQuery code is handling the click event

$(document).ready(function() {
  $('button').click(function() {
    alert('Button Clicked!');
  });
});

In the above code when a user clicks on a button, the click() function is triggered, which then executes the code inside the function. In this case, the code displays an alert message.

This jQuery code handles the hover event;

$(document).ready(function() {
  $('p').hover(function() {
    $(this).css('color', 'red');
  }, function() {
    $(this).css('color', 'black');
  });
});

In the example above, when a user hovers over a paragraph, the hover() function is triggered. The first function changes the text color to red, while the second function changes it back to black when the user moves their mouse away.

This jQuery code handling form submissions;

$(document).ready(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    var email = $('#email').val();
    var message = $('#message').val();
    alert('Email: ' + email + '\nMessage: ' + message);
  });
});

In the example above, when a user submits a form, the submit() function is triggered. The preventDefault() method prevents the form from actually submitting, and then the code retrieves the values of the email and message fields and displays them in an alert message.

jQuery makes your code more cross-browser compatible. Different browsers can often interpret JavaScript code differently, which can lead to compatibility issues and bugs. By using jQuery, you can write code that works consistently across all major browsers, without having to worry about testing and debugging for each individual browser.

One of the most popular features of jQuery is its ability to create animations and transitions on the page. With jQuery, you can easily create smooth, interactive animations that can make your website more engaging and visually appealing. You can also create effects such as fade-ins, slide-outs, and toggles with just a few lines of code.

In addition to its core features, jQuery has a large and active community of developers who have created thousands of plugins and extensions that can add even more functionality to your website. Whether you need to create a slider, a carousel, or a custom form element, chances are that there is a jQuery plugin that can help you do it.

It also provides tools for working with AJAX and JSON data, making it easier to create responsive and interactive web applications.

Let me break down to simpler details AJAX stands for (Asynchronous JavaScript and XML). It is a technique used in web development to create fast and dynamic web pages without requiring the page to reload every time the user interacts with it. AJAX allows web applications to make requests to the server and retrieve data in the background, without interfering with the user's experience on the page. This allows for a more responsive and interactive web application. AJAX can be used with various data formats, not just XML, including JSON and plain text.

Let me use an example of how jQuery can be used to make AJAX requests and work with JSON data so that we can understand what really happens.

Suppose we have a web page that displays a list of products, and we want to use AJAX to load the list of products from a JSON file on the server. We can use jQuery to make the AJAX request and parse the JSON data like this

Below is an HTML code that creates an empty div element with an id the attribute of "products". we can manipulate this element can with jQuery to dynamically add content to the page

<div id="products"></div>

$(document).ready(function() {
  // Make AJAX request to load products from server
  $.ajax({
    url: 'products.json',
    dataType: 'json',
    success: function(data) {
      // Loop through products and add to page
      $.each(data, function(index, product) {
        var html = '<div class="product">' +
                   '<h2>' + product.name + '</h2>' +
                   '<p>' + product.description + '</p>' +
                   '<span>$' + product.price + '</span>' +
                   '</div>';
   //The above creates an HTML string for each product item in the JSON file, using the product data to populate the HTML.
        $('#products').append(html);
      });
    },
    error: function() {
      // Handle error
      alert('Error loading products');
    }
   //This is a callback function that is executed when the AJAX request fails.
  });
});

The above code uses the jQuery $.ajax() function to make a request to the products.json file on the server. It specifies that the data type is JSON, so jQuery automatically parses the response as JSON data. When the request is successful, the success callback function is called, which loops through the products and generates HTML code to display each one on the page. Finally, the HTML code is appended to the #products element on the page.

I incorporated in error function which is a callback function that is executed if the AJAX request encounters an error while retrieving data from the server.

Using jQuery in this way makes it easy to load and display data from the server without having to reload the entire page, which can make web applications more responsive and interactive.

NB: I have used this $(document).ready(function() { }. in all the code snippets I have provided. It is a jQuery shorthand for the document-ready event. It tells the browser to execute the code inside the function when the document is fully loaded. Is the same as in Python when we say if __name__ = "__main__": the program is executed. If you know this about Python then you will understand what I am talking about.

In conclusion

jQuery is an incredibly powerful and versatile tool that can help front-end developers build better websites faster. By simplifying and streamlining JavaScript code, jQuery makes it easier to add dynamic and interactive features to your website without sacrificing cross-browser compatibility or performance. Whether you're a beginner or an experienced developer, jQuery is a tool that is definitely worth learning and using in your projects.

If you would like to support me and connect with me you can do so by DM on Twitter @myrajarenga or follow me on this blog for more tech content. Let me know if you enjoyed reading this article as enjoyed writing it.

References

https://www.freecodecamp.org/news/full-javascript-course-for-beginners/

https://www.youtube.com/playlist?list=PL4cUxeGkcC9hNUJ0j6ccnOAcJIPoTRpO4

https://www.youtube.com/watch?v=NB5LGzmSiCs