Learn jQuery

Introduction to jQuery – Learn jQuery

Modern web application development is incomplete without learning jQuery. Almost all of us have heard of it at some point while browsing the Internet. In this series of articles, we will learn jQuery, the most popular Javascript framework. At the end of the series, we will build multiple projects to understand jQuery better.

In this article, we will talk about what jQuery is, how it works. Why prefer jQuery over Javascript.

Before we move on to discussing how to install jQuery and other advanced topics, let us talk about some basics of jQuery, such as, what is jQuery?

What is jQuery?

jQuery is the most popular Javascript library or framework in modern web development. jQuery was built to solve many issues that developers had with building applications with vanilla Javascript.

Javascript poses many problems and one of which is the higher learning curve. It is often frustrating to write applications in Javascript because of its syntax. jQuery provides straightforward syntax, easy to remember methods to perform complex tasks.

Here are the few examples that will show you the basic syntax difference between javascript selector and jQuery selector –

Selecting an HTML element with the class name “heading”.

Javascript:
document.getElementsByClassName('heading');
jQuery:
$(".heading")

One of the issues Javascript has always had is browser compatibility. Web browsers have different engines to interpret javascript. Because of that, if you are writing a Javascript code, the code may behave differently in different browsers. So to create an app that works the same on every web browser is a pretty frustrating job. Developers have to take care of each function they create in the application and ensure that every web browser supports the function.

Besides jQuery, there are many more popular javascript libraries, and most of them try to provide similar functionalities. Still, jQuery is better in its simple syntax, smaller size(faster loading speed), chainable methods, plugins support for extending functionality, and its large community that will help 24×7.

jQuery selector engine

Besides its easy-to-use syntax and cross-browser compatibility, jQuery’s selector engine is also an important factor to switch to jQuery over javascript. We will deal with the jQuery selector engine in later articles, but here is an example to show you how simple and powerful it is.

In jQuery, we can select HTML elements as we select in CSS. For example, we can add dot ‘.’ before the class name to select an element by its class name.

In the same way, in jQuery, we can select an element as simple as $(".className").

Chainable methods

Another advantage of jQuery is its chainable methods. You can chain methods together to perform multiple actions in one line of code. Each time you run a jQuery function, it returns a jQuery object which then can accept another method to apply. So you can run multiple methods in one line by separating each one of them by a “.” dot.

For example, to add a class to a heading and CSS in the same line, we’d chain the two methods ‘addClass’ and ‘css’ together.

$("h2").addClass("animated").css("color", "red")
  • $(“h2”) – This will select the heading in the document.
  • addClass – This method will add “animated” class to h2.
  • css – This method will apply css to h2.

jQuery UI

jQuery UI is the jQuery extension for developing the application interface. It comes with a range of pre-designed elements or widgets to add to your application. The widgets include Datepicker, Autocomplete, Buttons, Menus, Progress bars, spinners, and many more. Check out jQuery UI for more information.

jQuery UI is not included in the jQuery core library but can be added separately.

Conclusion

Due to its easy-to-use syntax, it’d not take much to learn jQuery. jQuery’s powerful selector engine helps developing applications faster. In the next article, we will set up a jQuery development environment to improve the development process.

Sohail

Mohd Sohail is a web developer and a Linux sysAdmin. He also loves to write how-to articles, applications reviews and loves to use new Linux distributions.

Recent Posts

Ubuntu 21.10 “Impish Indri” Available To Download

After 6 months of development, Ubuntu 21.10 codenamed "Impish Indri" is now available for download.…

4 days ago

Best Spotify Alternatives For Linux

Spotify is the most popular music streaming service. A Spotify free account grants access to…

7 days ago

[Fixed] error: snap “package” not found

Snap has grown in popularity among Linux users. Instead of using system packages, snap containerizes…

2 weeks ago

Twitch Data Leak 2021 Includes 125GB Private Data

Another breach of the year 2021 is the Twitch Data Leak, which comprises 125GB of…

2 weeks ago

10 Best Games For Linux

I wrote a list of the best FPS games for Linux a few years ago.…

2 weeks ago

Epic Games To Release AntiCheat For Linux

The day I've been looking forward to for years. When I first started blogging in…

2 weeks ago