javascript - twig template rendering mechanism. Can jquery be used in twig?

1: Encountered a problem when using twig

defines a template page, and then the child pages inherit it.

You cannot write any code outside the {%%} tag, otherwise an error will be reported. As shown in the picture above, I wrote a piece of code in the tag, and the browser reported an error, as shown below:

My jquery is introduced in the template page. When I put this code separately in a js file and introduce it in the template page, there is no problem.
I would like to ask here, what is the twig rendering mechanism? Why can’t I use $ here?
Thank you

I just took a look. After adding jquery directly to the sub-page, the sub-page can indeed be used. $ can be used.
If some public resources are quoted, this will happen when placed in the template page. How to ensure the publicity of these resources?

Reply content:

1: Encountered a problem when using twig

defines a template page, and then the child pages inherit it.

You cannot write any code outside the {%%} tag, otherwise an error will be reported. As shown in the picture above, I wrote a piece of code in the tag, and the browser reported an error, as shown below:

My jquery is introduced in the template page. When I put this code separately in a js file and introduce it in the template page, there is no problem.
I would like to ask here, what is the twig rendering mechanism? Why can’t I use $ here?
Thank you

I just took a look. After adding jquery directly to the sub-page, the sub-page can indeed be used. $ can be used.
If some public resources are quoted, this will happen when placed in the template page. How to ensure the publicity of these resources?

When your page executes js
jq has not been introduced yet

Nothing to do with Twig. It's because your jquery hasn't been loaded yet, so the code referencing $ is executed.
Try to put the code in

<code class="js">document.onload = function() {
   // 以下是你的代码
}</code>

Middle.
Using window.onload also works.