Open In App

How to execute jQuery Code ?

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery is an open-source feature-rich Javascript library that is designed for the simplification of HTML DOM Tree traversal & manipulation, event-handling & CSS animation. It is quite popular for its features like light-weight, fast, small, etc, that make it easier to use. The purpose of using jQuery is to make the javascript code easy to execute on the website, as jQuery wraps the many lines of code written in javascript, into a method that can be called with a single line of code. For this reason, a lot of common tasks that require javascript can be taken by jQuery. 

In this article, we will see how to execute the jQuery code for our webpage. Executing the jQuery code is quite easy, just need to take care of few steps, and then we are good to go. Before jump to the main topic, we will first see how we can add & use jQuery in our webpage. There are two ways to add jQuery to our webpage/website:

  • Download the jQuery library from the official website
  • Use online the jQuery CDN links

Let’s head to our first method ie, downloading the library from the website.

Method 1: Download jQuery library

Download the library. We need to download the development version for our development & testing purposes. The rest of the versions is meant for the production purpose. Once you clicked for download, it will take you to the page with available links, click on the required link, then right-click on the page & save the file. Note that the file that we are using is a javascript file, we can check it by looking at its extension. Now, we will see how we can add jQuery to our HTML file. Make sure the jQuery file must be placed inside the workspace. After completing these many steps, it will look like the following image.

Declare the jQuery file path in the <script> tag inside the <head> tag section.

<script src="jquery-3.6.0.min.js"></script>

Example 1: Create an HTML file & add below code into your HTML file.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
</head>
  
<body>
    <p>GeeksforGeeks</p>
</body>
  
</html>


Output:

GeeksforGeeks

In the code above, we have added the jQuery file using a <script> tag. Basically, that’s all we need to do to add jQuery to our webpage. Now we can write some jQuery code and use it.

Example 2: In this example, we will write some jQuery code and see how we can execute it.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
  
    <!-- jQuery code starts from here, the 
        code will change the color of text
        when button is pressed -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css("color", "green");
            });
        });
    </script>
  
    <button>
        Change the color of the text to Green
    </button>
</head>
  
<body>
    <p>GeeksforGeeks</p>
</body>
  
</html>


Output: In this example, we have written code to change the text color. To run this code, open this HTML file in the browser.

By downloading the jQuery file

Let’s head to our next method of adding the jQuery ie, by using the jQuery CDN.

Method 2: Using jQuery CDN link

This method of using jQuery is quite easy, we don’t need to download anything, but let’s have brief information about CDN. CDN stands for content delivery network, basically, it is a worldwide distributed group of servers for different kinds of web services that provides the internet content with fast delivery. For example, the jQuery CDN has all the necessary information related to jQuery and any user can directly access it from their servers anytime. This method is quite reliable and updated, in order to work with CDN of jQuery or any other library, we must be connected with the network. Now let’s see how we can use it. We have to add <script> tag in our HTML file as shown below. Paste the following CDN code in the head section in HTML.

jQuery CDN Link:

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

Example: We will use example 2 here with the jQuery CDN link in order to see the change.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Document</title>
  
    <!--jQuery CDN link-->
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
    </script>
  
    <!--jQuery code-->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css("color", "green");
            });
        });
    </script>
  
    <button>
        Change the color of the text to Green
    </button>
</head>
  
<body>
    <p>GeeksforGeeks</p>
</body>
  
</html>


Output:

Using jQuery CDN link

We have added the CDN code, now we are ready to work with jQuery once again. So, this is how we can execute our jQuery with some easy methods.



Last Updated : 01 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads