Javascript has a vital role in creating websites and is also necessary. It is a very popular language. You can also utilize Javascript in ASP.NET. Therefore, you should be up to date as a developer. This blog will discuss how to use jQuery in a Javascript file.
jQuery is among the most famous Javascript frameworks companies like Google, IBM, and Microsoft utilize. To use jQuery in a js file, you must download the library or include it from a CDN, which we will discuss later.
We will delve deep into this topic and also understand the jQuery syntax with examples and explanations. If you need to learn how to use jQuery in a JS file, this is your best guide.
See Also: How To Disable JavaScript In Tor: Step-By-Step Security Guide
Table of Contents
Understanding the jQuery Syntax
jQuery is a framework that removes the complexities of your JS code. Furthermore, jQuery allows you to write less code instead of writing lines of code. In simple words, jQuery makes your work easy.
The jQuery syntax is specially used for choosing HTML elements and carrying out some actions. For instance, a jQuery syntax looks like this:
$(selector).action()
Let’s look at some examples to understand this syntax. For instance:
$(this).hide() – used for hiding the current element.
$(“p”).hide() – used for hiding all the <p> elements.
$(“.guide”).hide() – hides all elements with class=”guide”.
$(“#guide”).hide() – hides the element with id=”guide”.
That is how a jQuery looks like. Furthermore, you should know how to add jQuery to a Javascript file to understand it deeply.
How to Use jQuery in a JavaScript File?
There are two methods of using jQuery in a Javascript file. The first way is to include jQuery from a CDN(Content Delivery Network). A CDN consists of libraries and frameworks you can import into your code to make your work easier and faster. For instance, the code for this will be:
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”></script>
</head>
The second way how to use jQuery in a Javascript file is to download the library. You can go to jQuery.com and download the library. There are two types of libraries that you can utilize. One is the Production version used for the live website, and the second is the Development version used for testing. Include your jQuery like this:
<script src=”path_to_your_local_jquery_file/jquery-3.7.1.min.js”></script>
Therefore, now you know how to use jQuery in a Javascript file. Let’s understand some examples to know how jQuery works.
Examples with Code and Explanations
These are some examples that will help us to understand how to use jQuery in Javascript files.
Example 1
This code prevents any jQuery code from running before the document is ready. When you run this code, you will see all the paragraph element is selected, and its background color is red.
Let’s look at the first example:
<!DOCTYPE html>
<html>
<head>
<title>First Example</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>
</script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function() {
$(“p”).css(“background-color”, “red”);
});
</script>
</head>
<body>
<p>The first paragraph is chosen.</p>
<p>The second paragraph is chosen.</p>
<p>The third paragraph is chosen.</p>
</body>
</html>
In the above example, we can see the document ready function that is:
$(document).ready(function(){
Using Javascript to change the background color is hectic. The jQuery code $(“p”).css(“background-color”, “red”); allows us to select all the paragraph elements easily and change their color.
Example 2
Now, we will see how you can attach an event using jQuery. Let’s look at the HTML code:
<body>
<button id=”example”>Click me</button>
<p id=”guide”></p>
Furthermore, let’s look at the JS code:
$(document).ready(function() {
$(“#example”).click();
});
In the above code, we have selected the element with the id “example” and attached an event to it. Now, we have to attach a function that will select the paragraph element and show the text after clicking the button, and our code will be complete. For instance:
function() {
$(“#guide”).html(“Hello, World!”);
}
The full JS code will look like this:
$(document).ready(function() {
$(“#example”).click(function() {
$(“#guide”).html(“Hello, World!”);
});
});
When you click on the button, you will get to see the text with the help of using a jQuery event.
Example 3
Now, we will see how we can use jQuery effects. Let’s look at this HTML code:
<body>
<button class=”example”>Open</button>
<section class=”cover”>
<button class=”example”>Close</button>
</section>
Additionally, write some CSS code. For instance:
.cover{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
background: yellow;
}
Furthermore, let’s look at the JS code:
$(document).ready(function() {
$(“.example”).click(function() {
$(“.cover”).toggle();
});
});
In the above JS code, the toggle effect is utilized. There are two buttons when clicked, will show and hide the CSS we have written. You can also use the effects like animate() and slideToggle() to make it look better.
Importing jQuery as an ES module
You will first need a module bundler to import jQuery as an ES module. You can use Webpack or Rollup. A module bundler is required because many browsers don’t support ES modules. It will bundle your code inside a single file so the browsers can utilize it. For importing jQuery (Webpack), run the following code to install the compulsory dependencies:
npm install –save-dev webpack webpack-cli jquery
After installation, import the jQuery like this:
import $ from ‘jquery’;
When you want to bundle your code, write the file name as webpack.config.js. For example, use the following code:
const path = require(‘path’);
const webpack = require(‘webpack’);
module.exports = {
entry: ‘./main.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘bundle.js’,
},
plugins: [
new webpack.ProvidePlugin({
$: ‘jquery’,
jQuery: ‘jquery’,
}),
],
};
This code will give a bundle.js file that you can import like this:
<script src=”bundle.js”></script>
See Also: How To Save JavaScript Files: Best Practices To Implement
FAQs
Can I use jQuery in a JavaScript file?
To use jQuery in a Javascript file, you will first have to import it into the HTML file with the help of a CDN or by downloading the library. Furthermore, you can use it by writing jQuery syntax in the JS File.
Is jQuery faster than JavaScript?
Javascript is considered faster in jQuery because of the Document Object Model(DOM). jQuery is slower because it does not access the DOM first.
Can I use jQuery in the app script?
You can use jQuery in Google Apps Script, the preferred technique.
Why is jQuery no longer used?
jQuery's declining popularity is due to the new emerging JavaScript frameworks like Angular that are used and preferred by more developers.
Conclusion
In conclusion, we learned how to use jQuery in a Javascript file. jQuery is useful as there is less burden on you, and it simplifies your Javascript code.
Additionally, you can learn many things, like sorting objects in Javascript and sorting in Javascript, that will help you become a skilled developer. Importing jQuery as an ES module allows you to use the code in a single file.
Visual Studio Code also supports running JavaScript code in a web browser using the Debugger for Chrome extension.
See Also: Display Time In HTML Using JavaScript: A Simple Guide
Hi, I’m Geoff. I design. I develop. I do lots of things in between. What that really boils down to is that I make websites.
