{"id":26724,"date":"2019-07-03T21:22:47","date_gmt":"2019-07-03T13:22:47","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26724"},"modified":"2019-07-01T20:57:19","modified_gmt":"2019-07-01T12:57:19","slug":"jquery-3-new-features","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/","title":{"rendered":"10 Coolest Features in jQuery 3"},"content":{"rendered":"

jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the jQuery team began to work<\/a> on the new major version up until now, June 2016, when the final release<\/strong> is out.<\/p>\n

The release note<\/a> promises a slimmer and faster<\/strong> jQuery, with backwards compatibility<\/strong> in mind. In this post, we have a look at some of the new features of jQuery 3.0 to give you an overview about how it changes the JavaScript landscape.<\/p>\n

Where to Start<\/h2>\n

If you want to download jQuery 3.0 to experiment for yourself, go right to the download page<\/a>. It\u2019s also worth having a look at the Upgrade Guide<\/a>, or the source code<\/a>.<\/p>\n

If you want to test how your existing project works with jQuery 3.0, you can give a try to the jQuery Migrate<\/a> plugin that identifies compatibility issues in your code. You can also take a peek into future milestones<\/a>.<\/p>\n

This article doesn\u2019t cover all<\/em> the new features of jQuery 3.0, only the more interesting ones: better code quality, integration of new ECMAScript 6 features<\/a>, a new API for animations, a new method for escaping strings, increased SVG support, improved async callbacks, better compatibility with responsive sites, and increased security.<\/p>\n

1. Old IE Workarounds Got Removed<\/h2>\n

One of the main goals of the new major release was to make it faster and sleeker<\/strong>, therefore the old hacks and workarounds related to IE9- got removed<\/strong>. This means if you want or need to support IE6-8, you\u2019ll have to keep using the latest 1.12<\/code> release, as even the 2.x<\/code> series doesn\u2019t have full support for older Internet Explorers (IE9-). Check out the notes on browser support<\/a> in the docs.<\/p>\n

\"jQuery
jQuery Docs: Browser Support<\/a><\/figcaption><\/figure>\n

Note that there are also many deprecated features<\/strong> in jQuery 3. A big shortcoming of the Upgrade Guide is that the deprecated features \u2013 as of June 2016 \u2013 aren\u2019t grouped, so if you\u2019re interested in them, you\u2019ll need to look them up with your browser\u2019s search tool (Ctrl<\/span>+F<\/span>).<\/p>\n

\"jQuery
jQuery Upgrade Guide<\/a><\/figcaption><\/figure>\n

2. jQuery 3.0 Runs in Strict Mode<\/a><\/h2>\n

As most browsers supported by jQuery 3 support strict mode<\/a>, the new major release have been built with this directive in mind.<\/p>\n

Although jQuery 3 has been written in strict mode, it\u2019s important to know that your code is not required to run in strict mode<\/strong>, so you don\u2019t need to rewrite<\/strong> your existing jQuery code if you want to migrate to jQuery 3. Strict & non-strict mode JavaScript can happily coexist<\/strong>.<\/p>\n

There\u2019s one exception: some versions of ASP.NET<\/strong> that \u2013 because of the strict mode \u2013 are not compatible with jQuery 3<\/strong>. If you\u2019re involved with ASP.NET, you can have a look at the details here in the docs<\/a>.<\/p>\n

3. For\u2026of Loops is Introduced<\/a><\/h2>\n

jQuery 3 supports the for\u2026of<\/a> statement, a new kind of for<\/code> loop, introduced in ECMAScript 6<\/a>. It gives a more straightforward way to loop over iterable objects<\/strong>, such as Arrays<\/a>, Maps<\/a>, and Sets<\/a>.<\/p>\n

In jQuery, the for...of<\/code> loop can replace the former $.each(...)<\/a><\/code> syntax, and can make it easier to loop through the elements of a jQuery collection<\/a>.<\/p>\n

\"For...of
Code Example from the Upgrade Guide<\/a><\/figcaption><\/figure>\n

Note that the for...of<\/code> loop will only work<\/strong> either in an environment that supports ECMAScript 6<\/strong>, or if you use a JavaScript compiler<\/strong> such as Babel<\/a>.<\/p>\n

4. Animations Got a New API<\/a><\/h2>\n

jQuery 3 uses the requestAnimationFrame() API<\/a> for performing animations, making animations run smoother and faster<\/strong>. The new API is only used in browsers that support it<\/a>; for older browsers (i.e. IE9) jQuery uses its previous API as a fallback method to display animations.<\/p>\n

RequestAnimationFrame<\/strong> has been out for a while, if you are interested in what it knows or why you should use it, CSS Tricks has a good post<\/a> about it.<\/p>\n

\"requestAnimationFrame
www.caniuse.com<\/a><\/figcaption><\/figure>\n

5. New Method for Escaping Strings with Special Meaning<\/a><\/h2>\n

The new jQuery.escapeSelector()<\/code> method allows you to escape strings or characters that mean something else in CSS<\/strong> in order to be able to use it in a jQuery-selector<\/strong>; without escaping the JavaScript interpreter cannot properly understand it.<\/p>\n

The docs helps us understand this method better with the following example<\/a>:<\/p>\n

\u201cFor example, if an element on the page has an id of \u201cabc.def\u201d<\/strong> it cannot be selected with $( \"#abc.def\" )<\/code> because the selector is parsed as \u201can element with id \u2018abc\u2019<\/strong> that also has a class \u2018def\u2019<\/strong>. However, it can be selected with $( \"#\" + $.escapeSelector( \"abc.def\" ) )<\/code>.\u201d<\/em><\/p>\n

I\u2019m not sure how frequently such a case happens, but if you bump into a problem like this, now you have an easy way to quickly fix it.<\/p>\n

6. Class Manipulation Methods Support SVG<\/a><\/h2>\n

Unfortunately, jQuery 3 still doesn\u2019t fully support SVG<\/strong>, but the jQuery methods that manipulate CSS class names<\/a>, such as .addClass()<\/a><\/code> and .hasClass()<\/a><\/code>, now can be used to target SVG documents<\/strong> as well. This means you can modify (add, remove, toggle) or find classes with jQuery in Scalable Vector Graphics<\/strong>, then style the classes with CSS.<\/p>\n

Recommended Reading:<\/strong>\n Styling Scalable Vector Graphic (SVG) with CSS<\/a><\/p>\n

7. Deferred Objects Are Now Compatible with JS Promises<\/a><\/h2>\n

JavaScript Promises<\/a> \u2013 objects used for asynchronous computations<\/strong> \u2013 have been standardized in ECMAScript 6; their behaviour and features are specified in the Promises\/A+<\/a> standards.<\/p>\n

In jQuery 3, Deferred objects<\/a><\/code> have been made compatible with the new Promises\/A+ standards. Deferreds are chainable objects<\/strong> that make it possible to create callback queues<\/strong>.<\/p>\n

The new feature changes how asynchronous callback functions are executed<\/strong>; Promises<\/em> allow developers to write asynchronous code that is closer in logic to synchronous code.<\/p>\n

See code examples<\/a> from the Upgrade Guide or, have a look at this great Scotch.io tutorial<\/a> about the basics of JavaScript Promises.<\/p>\n

8. jQuery.when() Interprets Multi-Arguments Differently<\/a><\/h2>\n

The $.when()<\/a><\/code> method provides a way to execute callback functions<\/strong>. It\u2019s part of jQuery since version 1.5. It\u2019s a flexible method; it also works with zero arguments, and it can accept one or more objects as arguments as well.<\/p>\n

jQuery 3 changes the way how arguments of $.when()<\/code> are interpreted when they contain the $.then()<\/a><\/code> method<\/strong> with which you can pass additional callbacks as arguments to the $.when()<\/code> method.<\/p>\n

\"jQuery.when(
api.jquery.com<\/a><\/figcaption><\/figure>\n

In jQuery 3, if you add an input argument with the then()<\/code> method to $.when()<\/code>, the argument will be interpreted as a Promise-compatible \"thenable\"<\/a><\/strong>.<\/p>\n

This means that the $.when<\/code> method will be able to accept a boarder range of inputs<\/strong>, such as native ES6 Promises<\/a> and Bluebird Promises<\/a>, that makes it possible to write more sophisticated asynchronous callbacks.<\/p>\n

9. New Show\/Hide Logic<\/a><\/h2>\n

In order to increase compatibility with responsive design<\/strong>, the code related to showing and hiding elements<\/strong> has been updated in jQuery 3.<\/p>\n

From now on, the .show()<\/a><\/code>, .hide()<\/a><\/code>, and .toggle()<\/a><\/code> methods will focus on inline styles<\/strong>, instead of computed styles, this way they will better respect stylesheet changes<\/strong>.<\/p>\n

The new code respects the display<\/code> values of stylesheets whenever it\u2019s possible, which means that CSS rules can dynamically change<\/strong> upon events such as device reorientation and window resize.<\/p>\n

The docs asserts that the most important result will be:<\/p>\n

\"As a result, disconnected elements are no longer considered hidden<\/strong> unless they have inline display: none;<\/code>, and therefore .toggle()<\/code> will no longer differentiate them<\/strong> from connected elements as of jQuery 3.0.\"<\/em><\/p>\n

If you want to better understand the results of the new show\/hide logic<\/strong>, here is an interesting Github discussion<\/a> about it.<\/p>\n

jQuery developers also published a Google Docs table<\/a> about how the new behaviour will work in different use cases<\/strong>.<\/p>\n

10. Extra Protection Against XSS Attacks<\/a><\/h2>\n

jQuery 3 added an extra security layer<\/strong> against Cross-Site Scripting (XSS)<\/a> attacks by requiring developers to specify dataType: \"script\"<\/code> in the options of the $.ajax()<\/a><\/code> and the $.get()<\/a><\/code> methods.<\/p>\n

In other words, if you want to execute cross-domain script requests, you must declare this<\/strong> in the settings of these methods.<\/p>\n

\"XSS
Slideshare by Andrew Kerr: Cross-site Scripting (slide 17)<\/a><\/figcaption><\/figure>\n

According to the docs, the new requirement is useful when a \"remote site delivers non-script content<\/strong> but later decides to serve a script that has malicious intent<\/strong>\". The change doesn\u2019t affect the $.getScript()<\/a><\/code> method, as it sets the dataType: \"script\"<\/code> option explicitly.<\/p>","protected":false},"excerpt":{"rendered":"

jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the jQuery team began to work on the new major version up until now, June 2016, when the final release is out. The release note promises a slimmer and faster jQuery,…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[911,316],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 Coolest Features in jQuery 3 - Hongkiat<\/title>\n<meta name=\"description\" content=\"jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Coolest Features in jQuery 3\" \/>\n<meta property=\"og:description\" content=\"jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-03T13:22:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-3-new-features\/jquery-browser-support.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"10 Coolest Features in jQuery 3\",\"datePublished\":\"2019-07-03T13:22:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/\"},\"wordCount\":1299,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-3-new-features\\\/jquery-browser-support.jpg\",\"keywords\":[\"jQuery\",\"Web Browsers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/\",\"name\":\"10 Coolest Features in jQuery 3 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-3-new-features\\\/jquery-browser-support.jpg\",\"datePublished\":\"2019-07-03T13:22:47+00:00\",\"description\":\"jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-3-new-features\\\/jquery-browser-support.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-3-new-features\\\/jquery-browser-support.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-3-new-features\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Coolest Features in jQuery 3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Coolest Features in jQuery 3 - Hongkiat","description":"jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/","og_locale":"en_US","og_type":"article","og_title":"10 Coolest Features in jQuery 3","og_description":"jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-07-03T13:22:47+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-3-new-features\/jquery-browser-support.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"10 Coolest Features in jQuery 3","datePublished":"2019-07-03T13:22:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/"},"wordCount":1299,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-3-new-features\/jquery-browser-support.jpg","keywords":["jQuery","Web Browsers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/","name":"10 Coolest Features in jQuery 3 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-3-new-features\/jquery-browser-support.jpg","datePublished":"2019-07-03T13:22:47+00:00","description":"jQuery 3.0, the new major release of jQuery finally got released. The web developer community waited for this important step since October 2014, when the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-3-new-features\/jquery-browser-support.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-3-new-features\/jquery-browser-support.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Coolest Features in jQuery 3"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6X2","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26724"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26724\/revisions"}],"predecessor-version":[{"id":48180,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26724\/revisions\/48180"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26724"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}