Mr Branding: What’s New in jQuery 3.0 and How to Use It

Thursday, January 21, 2016

What’s New in jQuery 3.0 and How to Use It

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

jQuery, the world’s most popular JavaScript library to date, has been a boon for a lot of us web developers out there. From the time of its initial release in 2006 till today, a lot of us web developers have included this wonderful library in our projects to make our life easier. Back in July 2015, jQuery announced the first alpha of jQuery 3.0 – a major release after a long time. Let’s take a look at what’s new in jQuery and how you can use it.

show() and hide()

There’s a major change with how these functions will work. And there’s good reason to do so. With the earlier implementation, hide() would set the display:none and show() would clear it up. But this led to some mess. Let’s look at a couple of examples:

If there’s an implementation of display:inline on an element in another stylesheet when the show() method was trying to set display:block, this would start breaking code.
When we’re working with media queries for responsive web design (RWD), we may change the visibility of elements using display or visibility. This may interfere with show() and hide().

In addition to these, there were many other issues which the jQuery team had to fix to get things working. This led to complex implementation and performance issues, and hence, they moved to a simple model.

Hence, if you set display:none and use show(), slideDown(), fadeIn() or similar methods to display that element, it won’t work. The better way to go about it is to use addClass() and removeClass() to control visibility. Or we can call hide() on the elements during the ready() call.

Quick sample:


<!DOCTYPE HTML>
<html>
        <head>
        <style>
                .invisible{
                        display: none;
                }
                .visible{
                        background-color: deepskyblue;
                        display:block;
                }
        </style>
        <script src="jquery-3.0.0-alpha1.js"></script>
        <script>
                $(document).ready(function(){
                        $("#div1").addClass("invisible");
                        $("#toggle").click(function(){
                                $("#div1").removeClass("visible");
                                $("#div1").addClass("invisible");
                        });
                });
        </script>
        <title>Control Visibility</title>
        </head>
        <body>
                <p>Hello!</p>
                <div id="div1">Can you see this?</div>
                <button id="toggle">Click me</button>
        </body> 
</html>

Control visibility

Nomenclature for .data() Key Names

The jQuery team changed the .data() implementation to closely match the HTML5 dataset specification. If the key in the data-* attribute contains a digit, the digits will no longer participate in the conversion. Consider this example:

With jQuery 2.1.4:

data attribute in jQuery 2.1.4

The console window does not display the object.

With jQuery 3.0.0:

data attribute in jQuery 3.0.0

The key is converted to foo-42-name as digits do not participate in the conversion to camel case now. Hence, we get the output in console. The fiddle is available at http://ift.tt/1ZPqlSK. You can change the jQuery versions to see the changes.

Similarly, if we want to display all the data using data() with no arguments, the number of arguments will change in the two versions of jQuery if any of the key names of data-* attributes had a digit immediately after the hyphen (-), like in the above case.

width() and height() return decimal values

Some browsers return subpixel values for width and height. jQuery now returns decimal values for .width(), .height(), .css(“width”), and .css(“height”) whenever the browser supports it. For users looking for subpixel precision for designing webpages, this may serve as good news.

.load(), .unload(), and .error() methods are removed

These methods which were deprecated earlier, have now been removed from in jQuery 3.0.0 alpha. The recommended way is to use .on() to handle these events. Short example:

HTML:


<img src="space-needle.png" alt="Space Needle" id="spacen">

JavaScript:

Earlier implementation (now defunct)


$( "#spacen" ).load(function() {
  // Handler implementation
});

Recommended implementation:


$( "#spacen" ).on( "load", function() {
        // Handler implementation
});

jQuery Objects are Iterable Now

Iterating over jQuery objects is possible now, using ES2015 for-of. So, you can use things like:


for ( node of $( "<div id=spacen>" ) ) {
        console.log( node.id ); // Returns ‘spacen’
}

(Source here)

jQuery Animations Now Use requestAnimationFrame API at the Backend

All modern browsers now support requestAnimationFrame (status here: http://ift.tt/1JZDBZo). 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).

Continue reading %What’s New in jQuery 3.0 and How to Use It%

by Saurabh Kirtani via SitePoint

Mr Branding