Introduction to jQuery - Learn jQuery

sohail -

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.