aQuery is jQuery. Well, kind of.

aQuery is spawned out of jQuery, and is identical to it in almost every aspect. If you use jQuery, you already know how to use Ampify's aQuery

As described in 'How Ampify Works', aQuery is used by the Ampify converter as 'instructions' for how it should recreate dynamic behaiviors in the AMP site. The aQuery code is fed to the conversion algorithm together with the source page html, and it's used for two things: (1) Providing 'instructions' to the converter, and (2) Manipulating the DOM elements (if needed):

1) Provide 'instructions' to the converter:

Let's say that we have a hamburger icon that needs to open a menu. Normally we would develop in AMP in order to do that. This is how it's done with aQuery:

$('.hamburger_selector').on('click', (e) => {

$('.menu_selector').toggleClass('.menu_open');

});

The initiating function is a simple jQuery selector. The callback function, which in this case includes the click trigger and the class toggle, is in fact the instrcution to the converter, which will now re-create this Javascript based engagement in AMP. The initiating function is always jQuery, the callback function is always aQuery.

The initiating function is always jQuery, the callback function is always aQuery

What's the difference between jQuery and aQuery?

1. Unlike jQuery, aQuery is not manipulating the HTML during runtime. Rather it is used as instrcutions for transpiling the HTML to AMP as part of the conversion process.
2. Every command in aQuery can be found in jQuery, but the opposite isn't true. This is because aQuery is used to manipulate AMP sites, which are super restrictive. Not everything that you can do in HTML using jQuery is allowed in AMP using aQuery. In the last example, let's say that we want to toggle the .menu_open following a scroll event, instead of click event. That's not allowed in AMP, so aQuery doesn't allow it as well (see scroll reference).

2) Manipulating DOM elements:

Many times we'll need to add hints to source code elemnets, add CSS attributes to elements, or manipulate elements to be processed correctly by the converter. In these cases, there's no 'instruction' that's being conveyed to the converter, and no aQuery is used - only jQuery. Here are a few examples:

• For some reason, an image is distorted in the AMP page. We might want to force it to a certain size:
  $.injectCss(`

  rogue_image_selector { width:200px !important; height:100px !important; }

  `);