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 better understand jQuery.
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 for solving 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 extremely simple 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 make sure that function is supported by every web browser.
Besides jQuery, there are many more popular javascript libraries and most of them try to provide similar functionalities. Still, jQuery is better in terms of 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 just for showing you how simple and powerful it is, here is an example.
In jQuery, we can select HTML elements as we select in CSS. For example, to select an element by its class name, we can add dot ‘.’ before the 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 jQuery object which then can accept another method to apply on. 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 also add CSS in the same line, we’d simply 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 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 further improving the development process.
The post Introduction to jQuery – Learn jQuery appeared first on LinuxAndUbuntu.
from LinuxAndUbuntu https://ift.tt/34OLcv3
0 Comments