Introduction to Install Jquery
Jquery is a small, fast and a feature-rich javascript library which is used to simplify the DOM tree traversal and its manipulation. It also handles the event handling, Ajax and CSS animation. It is mainly used to simplify the syntax for selecting, finding and manipulating the DOM elements and their properties. For example, the Jquery can be used to find the element inside a document containing a certain property or modifying its attributes or responding to an event.
The process to Install Jquery
Below are the detailed steps to install jquery which are as follows:
Downloading jquery
Both the compressed as well as the uncompressed copies of jquery is available. The major use of the uncompressed file is in regard to the debugging purpose or the development tasks whereas the compressed file is used to save the bandwidth and is used to improve the production performance. A sourcemap file can also be downloaded while you choose to debug with the compressed file. The map file is generally not required to be run by the users to run jquery scripts, instead, they are used to enhance the developer’s debugging experience.
Downloading jquery using yarn or npm:
Npm is the package which has registered jquery in it. These npm packages can be installed by making use of npm command on CLI.
npm install jqueryIf you do not want to make use of npm package installer, you can also make use of yarn.
yarn add jqueryBy making use of the above command, you ensure that the jquery is installed in the node_modules directory. The uncompressed release, a map file, and a compressed release will also be built and could be found inside node_modules/jquery/dist.
There is an additional way to install jquery. It is by making use of Bower as it can be listed as a package inside the bower and can be installed by making use of CLI.
8 Online Courses | 5 Hands-on Projects| 28+ Hours| Verifiable Certificate of Completion
4.5
View Course
Bower install jqueryThe above-listed command will install jquery to the Bower’s install directory. The default path for this directory is bower_components. To find the uncompressed, map file as well as the compressed file, you need to locate inside the bower_components/jquery/dist. This package contains the additional files besides the default distribution package.
You can also directly just install the compressed file by writing the command :
Bower install https://code.jquery.com/jquery-3.3.1-min.jsYou can also make use of Jquery CDN if you do not wish to download and host the jquery file yourself and wish to make use of CDN. Both Microsoft and Google host the jquery.
Microsoft CDN:
Google CDN:
You can include the Jquery library inside the HTML scripts:
<html>
<head>
<title>Jquery first test example</title>
<script type = "text/javascript" src = "https://cdn.educba.com/jquery/jquery-2.1.3.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("HI there!");
});
</script>
</head>
<body>
<h1>Hello there</h1>
</body>
</html>This above step is the part of the local installation where we have put the jquery file inside the website’s directory.
Now, we will be looking at the CDN(Content Delivery Network) way of calling the jquery:
<html>
<head>
<title>My jquery test sample script</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello there ");
});
</script>
</head>
<body>
<h1>Hi there</h1>
</body>
</html>You can also call the jquery library functions:
Almost everything is only done when the jquery reads or writes or manipulates the document object model (DOM) list of elements. We need to ensure that the events and other basic components are being added the moment our DOM file is ready. There are two ways again of making your events to do their working. One is to call those events from inside the page and therefore we can make use of $(document).ready() function. All the content that is written inside it will be loaded as it is, the moment the DOM is loaded and long before the page contents are loaded. A ready event can be registered to make this happen.
When you wish to further call your jquery function, which is a pre-built or a library function we will make use of the HTML scripts tag as below.
<html>
<head>
<title>My jquery testing first script</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello there");});
});
</script>
</head>
<body>
<div id = "mydiv">click me
</div>
</body>
</html>To further extend the capabilities of jquery scripts, we also have the provision of custom scripts such as custom.js
Now, we can again extend the capabilities by calling it inside the HTML tags.
<html>
<head>
<title>My first jquery testing script</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" src = "https://cdn.educba.com/jquery/custom.js">
</script>
</head>
<body>
<div id = "mydiv">
Click me
</div>
</body>
</html>Jquery also allows the use of multiple libraries all at once without disturbing each other. There is one other library which is known by the name of MooTool javascript libraries and the jquery together can be used effectively.
There are other syntactical things which are more relevant for jquery such as making use of $selector.action() field where the $ sign is used to symbolize the query as in access and define it.
A selector is used to query or find the HTML elements whereas the action() is used for performing on the elements. The document ready events are also important as they ensure that the scripts or the piece of code do not run well in advance before the document has even finished loading or is in the ready state.
It is always advisable to wait for the document to get loaded completely and ready before working on it completely. Therefore you can also keep your javascript code inside the head section before your body section.
It is very easy to install Jquery and can be done in multiple ways, unlike many other software or programming languages as it is a scripting language which is just about a library. The main things to learn while making the use of Jquery is regarding the implementation, syntax and other relevant pieces of code information.
Recommended Articles
This has been a guide on How to Install Jquery. Here we have discussed the process to Install Jquery. You may also look at the following articles to learn more:
