{"id":691,"date":"2019-11-26T11:17:48","date_gmt":"2019-11-26T11:17:48","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/11\/26\/use-jquery-library-in-magento-2\/"},"modified":"2025-05-22T15:19:28","modified_gmt":"2025-05-22T09:49:28","slug":"use-jquery-library-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/use-jquery-library-in-magento-2\/","title":{"rendered":"How To Use jQuery Library In Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I&#8217;ll state two sentences which are difficult to implement at a time. (Or so do you think!)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&#8220;Optimize page load speed&#8221;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&#8220;Use of jQuery for SEO optimized and extensible frontend&#8221;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You may think of using an external jQuery library in Magento 2 for leveraging the benefits of jQuery for the store such as <a title=\"jQuery Autocomplete\" href=\"https:\/\/meetanshi.com\/blog\/jquery-autocomplete-text-box-with-example\/\" target=\"_blank\" rel=\"noopener\">autocomplete fields<\/a>. However, you may be unaware that you can also use jQuery library in Magento 2 by default itself, and the post shows how!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The use of external jQuery library increases the page load time which kills conversion!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, using the built-in jQuery library in Magento 2 overcomes the issue and at the same time offer the advantages of jQuery such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SEO optimized<\/li>\n\n\n\n<li>User-friendly<\/li>\n\n\n\n<li>Cross-browser compatibility<\/li>\n\n\n\n<li>Easy implementation comparatively<\/li>\n\n\n\n<li>Simplifies AJAX<\/li>\n\n\n\n<li>Interactive frontend<\/li>\n\n\n\n<li>Open-source<\/li>\n\n\n\n<li>Lightweight<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Method To Use jQuery Library In Magento 2:<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">require(['jquery', 'jquery\/ui'], function($){\n     \/\/your js code here  \n });\n \n For Example :\n \n require(['jquery', 'jquery\/ui'], function($){\n  $(document).ready( function() {\n    alert(\"jquery demo.\");\n  });\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All you have to do is mention the library with the particular RequireJS configuration in the layout.xml file. And the library is available for you in default Magento 2 itself!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The next time you develop a script in Magento 2, don\u2019t forget to use the RequireJS for an optimized page load speed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to share the post with fellow developers via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ll state two sentences which are difficult to implement at a time. (Or so do you think!) &#8220;Optimize page load speed&#8221; &#8220;Use of jQuery for&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-691","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/691\/revisions"}],"predecessor-version":[{"id":15169,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/691\/revisions\/15169"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}