How to execute jQuery Code ?
Last Updated :
01 Aug, 2021
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:
Let's head to our first method ie, downloading the library from the website.
Method 1: Download jQuery libraryDownload 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 linkThis 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" 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-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
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 linkWe 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.
Similar Reads
How to Execute JavaScript Code ? Javascript is a high-level, Just In Time compiled programming language which converts the entire machine code at once and then executes it immediately. Javascript code is executed by the Javascript Engine, which is separate software. Different browsers have their own implementation of JS Engine embe
2 min read
How jQuery Selectors are Executed ? jQuery is a fast, lightweight JavaScript library designed to simplify HTML DOM tree traversal, manipulation, event handling, CSS animation, and Ajax. The main objective of jQuery is to provide an easy way to use JavaScript on your website to make it more interactive and attractive. It is widely famo
2 min read
How to define jQuery function ? Defining the function in jQuery is different from JavaScript, the syntax is totally different. A function is a set of statements that takes input, do some specific computation and produce output. Basically, a function is a set of statements that performs some specific task or does some computation a
2 min read
How to add jQuery code to HTML file ? In this article, we will see how to add jQuery code to an HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them in your projects. Several methods are discussed in this article. Methods: Download and
2 min read
How to run a code on click event in jQuery ? In this article, we will see how to run the code after clicking on an event. To run the code after clicking an event, we use the click() method. The click() method is used to run the code when a click event occurs. The click() method to attach a click event handler to selected elements. Inside the h
1 min read
How to use jQuery getScript ? The jQuery .getScript() method loads a JavaScript file from a server using the GET HTTP method and then executes it. Syntax: $.getScript(url,[callback]) Let us look at an example to understand how this method works. Example: In this example, we will use a URL to load the JavaScript file 'color.js' f
1 min read
How to run a code on document ready event in jQuery ? In this article, we will see how to run a code when a page loads using jQuery. To run a code at page load time, we will use the ready() method. This method helps to load the whole page and then execute the rest code. This method specifies the function to execute when the DOM is fully loaded. Syntax:
1 min read
How To Execute HTML Program? HTML (HyperText Markup Language) is the standard language used to create web pages. Executing an HTML program is the process of rendering the code in the browser to display a web page. There are several approaches to running HTML code each suitable for the different environments and use cases. we wi
2 min read
How to run a code on mouseenter event in jQuery ? In this article, we will see how to run the code when the mouse enters into the specific area using jQuery. To run the code on a mouse enter a specific area, mouseenter() method is used. The mouseenter() method works when the mouse pointer moves over the selected element. Syntax: $(selector).mouseen
1 min read
How to run a code on double-click event in jQuery ? In this article, we will see how to run a code after double clicked the element using jQuery. To run the code on double clicked we use dblclick() method. This method is used to trigger the double-click event to occur. This method occurs when the selected element will be double clicked. Syntax: $(sel
1 min read