Comment le code jquery est exécuté

$('#list > li').addClass('horiz')

Si vous le mettez ici, il sera invalide si vous l'écrivez comme ça

Pour cette raison, lorsque le code est exécuté dans le script js, la page dans le corps n'a pas été rendue et $('#list>li') ne peut pas du tout obtenir l'élément

, il doit donc être exécuté une fois le rendu de la page terminé, et l'arborescence DOM sera effective

Alors comment peut-il être exécuté dans le head ? . Utilisez l'événement onload de l'objet window : une fois l'élément de page chargé, rappelez-le. Ce script js (appel différé)

Alors, existe-t-il une méthode avec la même fonction en jquery Bien sûr ? il y en a, non seulement il y en a, mais c'est plus efficace : ready()

window.onload = function () {
$('#list > li').addClass('horiz')
}

Abréviation :

$(document).ready(function () {
$('#list > li').addClass('horiz')
})

Bien sûr, si vous écrivez le code jquery en bas de le document html, ce ne sera pas si gênant, mais il est quand même recommandé d'encapsuler le code avec $(function(){})

$(function(){
//jq代码
$('#list > li').addClass('horiz')
})

Pourquoi le $(document).ready () plus efficace que l'événement window.onload ?

La génération de page HTML est divisée en deux étapes :

1 . Générer l'arborescence DOM : indiquez au navigateur combien d'éléments il y a dans le html. fichier et la relation entre eux

2. Charger des ressources externes : telles que des images, des fichiers externes, etc.

L'événement window.onload doit être généré dans le DOM tree. Il ne peut être déclenché qu'après le chargement de toutes les ressources externes.

Événement $().ready() : Il peut être déclenché tant que le DOM est créé. sont chargés. Surtout L'effet est très évident lorsqu'il y a des images ou des fichiers volumineux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!