How to use jquery in Magento 2?

@gilbert To use jQuery in Magento 2, you will first need to make sure that jQuery is included in your Magento 2 installation. jQuery is included by default in Magento 2, so you should not need to do anything to include it.Once jQuery is included, you can use it in your Magento 2 code by referencing the jQuery object. For example, you can use jQuery to manipulate the DOM or to make AJAX requests. Here is a simple example of how you might use jQuery in a Magento 2 module:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

define([
    'jquery'
], function($) {
    'use strict';

    // Use jQuery to add a click event handler to an element
    $('#my-element').click(function() {
        // Do something when the element is clicked
    });
});

In this example, the $ function is used to select an element with the ID my-element, and then a click event handler is attached to it. When the element is clicked, the code inside the event handler will be executed. You can use jQuery in this way to add interactivity to your Magento 2 modules and to make them more dynamic and user-friendly.

@gilbert 

To use jQuery in Magento 2, you can follow these steps:

Step 1: Download jQuery

• Visit the jQuery website (https://jquery.com/) and download the latest version of jQuery.
• Save the jQuery file in your Magento 2 project.

Step 2: Include jQuery in Magento 2

• Open your Magento 2 project and navigate to the app/design/frontend/{Vendor}/{Theme}/Magento_Theme/layout/default_head_blocks.xml file.
• Add the following code inside the section to include jQuery:

1

<script src="js/jquery.js" />

• Replace js/jquery.js with the correct path to the jQuery file you saved in Step 1.

Step 3: Use jQuery in your custom JavaScript files

• Create your custom JavaScript file in your Magento 2 project, e.g., app/design/frontend/{Vendor}/{Theme}/web/js/custom.js.
• Add your jQuery code inside the custom JavaScript file. For example:

1
2
3
4

jQuery(document).ready(function($) {
   // Your jQuery code here
   // Example: $('.element').hide();
});

Step 4: Include the JavaScript file in your Magento 2 layout

• Open your Magento 2 project and navigate to the app/design/frontend/{Vendor}/{Theme}/Magento_Theme/layout/default.xml file.
• Add the following code inside the section to include your custom JavaScript file:

1
2
3
4
5
6
7

<referenceContainer name="head.additional">
    <block class="MagentoFrameworkViewElementJsComponents" name="custom.js">
        <arguments>
            <argument name="componentsFile" xsi:type="string">js/custom.js</argument>
       </arguments>
   </block>
</referenceContainer>

• Replace js/custom.js with the correct path to your custom JavaScript file.

Step 5: Clear Magento cache

• After making these changes, clear your Magento cache by running the following command in your terminal:

1

php bin/magento cache:clean

Now, jQuery is included in your Magento 2 project, and you can use it in your custom JavaScript files. Note that it's recommended to use the $ variable in your jQuery code instead of jQuery for brevity.