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>
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:
The console window does not display the object.
With 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
