Me gustaría eliminar mi jQuery y necesito reemplazar $(function() { ... }); con algo parecido He visto a personas usar la nueva propiedad HTML defer , pero la usan para llamar a otro script en lugar de llamar a códigos en la misma fuente HTML. ¿Cómo puedo usar defer para implementar la misma característica ready en mi código HTML sin llamar a otro script?
<div style="margin-top: 100px">.</div> <div>AAAA</div> <script defer>alert('hi')</script> <div>BBBB</div>Básicamente, tiene tres opciones estándar a su disposición, dos explícitas y una implícita y dependiendo de cómo el navegador analiza el documento (de arriba hacia abajo, elemento por elemento):
defer Agregar el atributo defer a una etiqueta de secuencia de comandos hace que la ejecución de la secuencia de comandos se retrase hasta inmediatamente antes de que DOMContentLoaded se active (cuando se analiza el DOM), y se asegura de que DOMContentLoaded no se active antes de que se haya ejecutado la secuencia de comandos completa. Tenga en cuenta que defer no debe usarse cuando falta el atributo src (es decir, solo está disponible para scripts externos).DOMContentLoaded (o oyente readyStateChange si te gusta complicar las cosas).script justo antes de la etiqueta de cierre </body> . Tenga en cuenta que los scripts que tienen type="module" se posponen automáticamente.
Personalmente, dejé de usar jQuery alrededor de 2015 y, desde entonces, he estado trabajando con DOMContentLoaded desde entonces, sin un solo problema en todos esos años.