Topics

jQuery Introduction

In JavaScript, jQuery is a powerful and widely used library to simplify common web scripting tasks. It is a lightweight, fast, and feature-rich JavaScript library that is built on the principle ‘write less, do more. Its easy-to-use APIs make the things such as HTML document traversal and manipulation, adding animation effects, and event handling to a web page easier to work seamlessly across all the major browsers including Firefox, Chrome, Internet Explorer, Safari, and so on.

jQuery also makes it possible to create an Ajax based application quickly and simply. large companies like Microsoft, Google, and IBM are making use of jQuery for their applications. This shows you how popular and powerful the jQuery is?

In 2006 jQuery was originally created by John Resig. The project is currently run and maintained by a decentralized group of developers as an open-source project.

 

What You Can Do with jQuery

  • You can traverse all around the DOM tree to locate any element without complexity.
  • Multiple actions can easily be performed on an element with a single line of code.
  • You can select elements easily to perform manipulation.
  • You can create easily complex CSS animation with lesser lines of code.
  • You can manipulate DOM elements and their attributes easily.
  • You can also get or set the dimensions of the HTML elements. 
  • You can implement Ajax to enable asynchronous data exchange between client and server without any form of difficulty.
  • You can create an effect like a show or hide elements, sliding transition, etc.

 

Advantages of Using jQuery

when you're not familiar with jQuery, you might be imagining what makes jQuery so special. Below are the advantages and the reasons you should opt for jQuery:

  • SAVE LOTS OF TIME: Lots of your time and efforts can be saved by using the jQuery inbuilt effects and selectors why you concentrate on other development work.
  • SIMPLIFY COMMON JAVASCRIPT TASKS: Common JavaScript tasks are simplified by jQuery. Therefore, you can easily create feature-rich and interactive web pages with fewer lines of code, an example is implementing Ajax to update the content of a web page without refreshing it.
  • EASY TO USE: jQuery is easy and simple to use. This makes it possible for any person with a basic working knowledge of CSS, HTML, and JavaScript can start development with jQuery.
  • COMPATIBLE WITH BROWSERS: jQuery is created with modern browsers as its focus, so it is compatible with all major modern browsers including but not limited to Chrome, Firefox, Safari, and Internet Explorer, and so on.
  • FREE: Also, the best part is, that it is completely free to download and use.

 

jQuery, How to add in project?

To get started with jQuery, you have to download a copy of jQuery first and include it in your document. jQuery has versions available for downloading and they are ‘compressed’ and ‘uncompressed’.

However, the uncompressed file is best suited for development or debugging. while the minified and compressed file is preferred for production because it saves the precious bandwidth and improves the performance due to the small file size.

You can download jQuery from here: https://jquery.com/download/

Once done with downloading the jQuery file you can see it has a '.js’ extension because the jQuery is just a JavaScript library, so you can include the jQuery file in your HTML document with the <script> element just like you include normal JavaScript files. Below is an example of how to add jQuery:

 

Example how to add jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, Developers!</h1>
</body>
</html>

 

Including jQuery from CDN

Alternatively, jQuery can be included in your document through freely available CDN (Content Delivery Network) links, if you can’t and host jQuery yourself. CDNs can offer a performance benefit, as it reduces the loading time; this is because they are hosting jQuery on multiple servers spread across the globe and when a user requests the file, it will be served from the server nearest to them.

Also, it offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN while visiting other sites, it won't be re-downloaded as it is already there in the browser's cache.

 

Jquery CDN 

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

 

Creating Your First Web page with jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>First Web page with jQuery</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#0088ff");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Try with example

From the above example, we've performed a simple jQuery operation by changing the color of the heading (i.e the <h1> element) by using the jQuery element selector and css() method when the document is ready which is known as document ready event. Next, you will learn about jQuery selectors, events, and methods in subsequent tutorials.