Finalmente comenzó el aprendizaje formal de jQuery, ¿emocionado? Nuestro artículo explica la función de entrada de jquery y su objeto de nivel superior $
Función de entrada:
¿Qué es una función de entrada?
No sé si todavía tiene alguna impresión. Cuando estábamos aprendiendo la lista de materiales de JS nativo, se informó el error porque el elemento HTML estaba detrás de la etiqueta del script y el código se ejecutaba de arriba a abajo. En ese momento, teníamos dos soluciones El primero El método es cargar, y el segundo método es DOMContentLoaded. También existe tal situación en jQuery: si nuestra etiqueta de script se coloca delante del elemento HTML, se requiere la función de entrada.
efecto:
La función de esta función de entrada es ejecutar el código después de que se represente la estructura DOM, sin esperar a que se carguen todos los recursos, como imágenes, css, etc., lo que es equivalente a DOMContentLoaded en JS nativo.
Formato de escritura:
- El primero (recomendado) : $( function( ) { XXXX })
- El segundo: $( documento ).ready( función( ) { XXXX })
Tomemos un ejemplo, digamos que queremos ocultar un div usando jQuery (usando el método hide de jQuery):
El primer formato de escritura:
<body>
<script>
$(function(){ //因为HTML元素在script下方，所以使用入口函数
$('div').hide();
})
</script>
<div></div>
</body>El segundo formato de escritura:
<body>
<script>
$(document).ready(function(){ //因为HTML元素在script下方，所以使用入口函数
$('div').hide();
})
</script>
<div></div>
</body>Ambos formatos son correctos y válidos, pero el primero se usa comúnmente porque el primero es más fácil
Objeto de nivel superior $:
Primero, expliquemos el objeto de nivel superior de jQuery: $ es equivalente a ventana en JS nativo. De hecho, $ es solo otro nombre para jQuery. Podemos usar jQuery en lugar de $ al desarrollar y escribir código, o usar $ en lugar de jQuery, pero debido a que $ es más conveniente y conciso, generalmente usamos $
Por ejemplo, en el código de función de entrada anterior, también es correcto que reemplacemos $ con jQuery:
<body>
<script>
jQuery(function(){
jQuery('div').hide();
})
</script>
<div></div>
</body>