If you work with JavaScript, knowing what jQuery is and how to use it can help you optimize your workflow by making your coding processes more efficient and faster, saving energy and time. Do you want to know more? Keep reading!
jQuery is a fast, small, and feature-rich JavaScript library for adding interactions to a website.
It supports different types of browsers, is cross-platform and is known in the programming world by the motto “write less, do more”, since it allows you to do the same as JavaScript, but with fewer lines of code.
That is why it makes the life of a web developer easier, and provides many built-in features with which various tasks can be performed easily and quickly.
jQuery main features
So what sets this JavaScript library apart? Let’s see!
- It is compatible with various browsers: jQuery is compatible with at least Internet Explorer 6.0, Firefox 2.0, Safari 3.0, Google Chrome, and Opera 9.0.
- DOM Manipulation (Document Object Model)– Various DOM elements can be manipulated with the functions built into this library.
- DOM selection: With jQuery selectors, DOM elements can be retrieved based on different criteria, such as the name of the attribute, the CSS class, the label, the value, among others.
- Animations and AJAX support– Data can be loaded from servers without reloading the entire page easily with the AJAX functions included in jQuery. It also has many built-in animation effects thanks to the features of AJAX technology, which helps to develop a much more responsive website.
- Special effects– Allows you to apply special effects to DOM elements, such as sliding effect, animation, showing or hiding elements, and fading in or out of visibility.
- DOM Events– also includes functions equivalent to DOM events, such as keyup, dblclick, click, keydown, blur and mouseleave.
How to implement jQuery?
To start using this library, you need to meet the following prerequisites:
- Have basic knowledge of HTML and CSS.
- Understand the fundamentals of programming. Although it is possible to start using jQuery without advanced knowledge of JavaScript, if you are familiar with the concepts of variants and data types, it will be much easier for you.
There are two ways to use jQuery: download a local copy of jQuery to your computer and include it in your HTML code, or use a CDN version.
CDN (Content Delivery Network) is a system of multiple servers that deliver web content to a user based on their geographic location.
When you access a jQuery file that is hosted through a CDN, it is done much faster and more efficiently than if it is hosted on your own server.
Now let’s look at both methods to implement jQuery:
1. Download and link jQuery in your project
The most common way to use and configure jQuery is to download it from your official Web site.
There you will find two different versions available for download, a production version and a development version.
The main difference between the two is that the production version is compressed and is best suited for websites that are already online.
While the development version is an uncompressed version that is generally used to test beta and newly released features.
After downloading the version that best suits what you need, you must include the jQuery file in the HTML with the script tag.
To link it and start using it on your website, use the following lines of code:
2. Use jQuery hosted on a CDN
You can use jQuery that is hosted on a CDN like Google’s, for example.
Go to the Google website and search for “jQuery CDN Google”. A link to Google’s jQuery will appear, like the following:
