JQuery and its features

JQuery is the world’s most popular JavaScript library to date. It stands like a boon for web developers. Till date, a lot of us web developers have included this wonderful library in their projects to make the life easier. That’s the reason we're going to be focused exclusively on jQuery in this article. Specifically, we're going to take a look that jQuery offers and find out how it can help you. So, let's start -

About jQuery

JQuery is a small, lightweight and fast JavaScript library. It is cross-platform and supports different types of browsers. It is also referred to as - write less do more. Because it takes a lot of common tasks that require many lines of JavaScript code to accomplish and binds them into methods that can be called with a single line of code whenever needed. It is also very useful to simplify a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

According to Wiki - jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.

It was first released in 2006 by John Resig, at that time it was especially useful because of the inconsistencies that existed among JavaScript implementations in Internet Explorer, Firefox, and eventually Google Chrome. And currently, 3.3.1 is the latest version of JQuery, which was released on January 20, 2018.

Features on JQuery

Simple and easy - It has the predefined method using you can perform any task easily compare to JavaScript. And it is easy to learn.

Lightweight - It is a very lightweight library - about 19KB in size ( Minified and gzipped ).

CSS manipulation - It has predefined CSS() method for manipulating style for any Html elements.

Html manipulation - The jQuery made it easy to select DOM elements, traverse them and modifying their content.

Special Effects - You can apply special effects to DOM elements like the show or hide elements, fade-in or fade-out of visibility, sliding effect, animation etc.

Events - jQuery library includes functions which are equivalent to DOM events like click, dblclick, mouseenter, mouseleave, blur, keyup, keydown etc. These functions automatically handle cross-browser issues.

Ajax Support - It supports Ajax, you can develop a responsive and feature-rich site using AJAX technology.

Built-in Animation - It has predefined method "animate()"to create custom animation on the web-page.

Creating image slideshows - You can use jQuery effects to build nice animated slideshows and lightboxes.

Making drop-down menus - jQuery makes it easy to create multi-level dropdowns with animations.

Creating drag-and-drop interfaces - Use jQuery to build a page with elements that can be repositioned or reordered simply by dragging and dropping.

Write less do more - jQuery provides a rich set of features that increase developers' productivity by writing less and readable code.

Excellent API Documentation - jQuery provides excellent online API documentation.

Cross-browser support - jQuery provides excellent cross-browser support without writing extra code.

Unobtrusive - jQuery is unobtrusive which allows separation of concerns by separating HTML and jQuery code.

Let’s find what new in the latest version of JQuery

Strict Mode

Today almost all modern browsers support strict mode. jQuery 3 has been developed with this in mind. Strict mode makes several changes to normal JavaScript semantics. First, strict mode eliminates some JavaScript silent errors by changing them to throw errors. Second, strict mode fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode. Third, strict mode prohibits some syntax likely to be defined in future versions of ECMAScript. This does not imply that you have to rewrite your existing jQuery code. Although jQuery 3 has been written in strict mode, it’s not mandatory to have all your code strict mode compliant.

For…of Loop

JQuery 3 supports the for…of statement, a new kind of for loop. This new iterator is part of the ECMAScript 6. It gives a more straightforward way to loop over iterable objects, such as Arrays, Maps, and Sets. In jQuery 3, the for...of loop can replace the former $.each(...) syntax.

unwrap() method

Until jQuery 3, the unwrap method did not take any argument. The .unwrap() method removes the element's parent. This is effectively the inverse of the .wrap() method. The matched elements replace their parents within the DOM structure.

Removed deprecated event register

Finally, the deprecated load, unload and error are now removed. Remember that the correct method to register an event handler in jQuery is on, and the opposite of.

JQuery custom selectors speedup

JQuery offers some custom selectors (like :visible and :hidden) that apparently look like a CSS selector, but are resolved by jQuery selector engine. The developers found that with these selectors, some extra work can be skipped if used multiple times in the same document. After they optimized it in jQuery 3, the result is now ~17 times faster.

escapeSelector

jQuery 3 give us the new $.escapeSelector(). The method allows to escape characters that have a different usage as CSS selector, and result in a wrong selection.

XSS attack protection

JQuery 3.0 added an extra security layer for protection against Cross-Site Scripting (XSS) attacks. Cross-site scripting (XSS) is a security exploit which allows an attacker to inject into a website with malicious client-side code. This code is executed by the victims and lets the attackers bypass access controls and impersonate users. According to the Open Web Application Security Project, XSS was the third most common Web app vulnerability in 2013. This new layer requires the developers to specify dataType: 'script' in the options of $.ajax() and $.get() methods. Now when you make a request for a script on a domain different from yours, you must now explicitly declare this in the options.

New signature for .get( ) AND .post( )

JQuery get() and post() are shorthand for the ajax() function used often to simplify an Ajax call. In jQuery 1.0, the ajax() function can receive a set of key/value pairs that configure the Ajax request. This was not possible with get() and post(). JQuery 3 adds this signature for the $.get( ) and the $.post( ) in order to align them to $.ajax( ). Obviously the type option will be ignored and set accordingly from the shorthand function.

Very minimal SVG support

With jQuery 3, methods for CSS class manipulation, .addClass(), .removeClass() and .hasClass() can now be used to manipulate SVG.

Decimal values by .width ( ) and .height ( )

JQuery used to return round values with width(), height() and all the other related methods. JQuery 3 fixes that and you’ll get a more accurate result (i.e. a floating number). This is a very good improvement, as sometimes, users do require the exact values when they use these for a layout.

Deprecation of .bind() and .delegate() methods

JQuery 3 deprecated .bind(), .unbind(), .delegate() and .undelegate() methods and these methods might be removed completely in future releases. You can use on() and off() methods for all your projects, so you don’t have to worry about future releases.

requestAnimationFrame API at the Backend

All modern browsers now support requestAnimationFrame. With its popular support, jQuery will use this API when performing animations. Advantages include smoother animations and less CPU-intensive animations (hence, saving battery on mobiles).

jQuery.Deferred Updated to be Promises/A+ Compatible

In jquery 3, the jQuery.Deferred objects are updated to be compatible with Promises/A+ and ES2015 Promises. Hence, there was major changes madeto .then() method.

How to use jQuery?

There are two ways to use jQuery.

Local Installation − You can download jQuery library on your local machine and include it in your HTML code. Follow the steps -

• Go to the https://jquery.com/download/ to download the latest version available.

• Now put downloaded jquery file in a directory of your website, e.g. /jquery.

CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). CDN is a group of computers placed at various points connected with the network containing copies of data files to maximize bandwidth in accessing the data. In CDN, a client accesses a copy of data nearer to the client location rather than all clients accessing from the one particular server. This helps to achieve better performance of data retrieval by the client. Google and Microsoft provide content deliver for the latest version.