Introduction to Install Jquery
The process to Install Jquery
Below are the detailed steps to install jquery which are as follows:
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 jquery
If you do not want to make use of npm package installer, you can also make use of yarn.
yarn add jquery
By 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.
Bower install jquery
The 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.js
You 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.
You can include the Jquery library inside the HTML scripts:
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:
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.
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.
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 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.
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: