Est-ce que jquery+ déclenche automatiquement des fonctions ?

jQuery est une bibliothèque JavaScript largement utilisée grâce à laquelle nous pouvons facilement manipuler des documents HTML, gérer des événements, implémenter des animations, etc. La fonction de déclenchement automatique est programmée pour exécuter automatiquement une fonction spécifique dans des conditions spécifiées. Cet article explique comment combiner jQuery et les fonctions de déclenchement automatique pour obtenir un développement Web plus efficace et plus pratique.

Commençons par comprendre la syntaxe de base de jQuery. Lors de l'utilisation de jQuery, nous devons utiliser $ ou le mot-clé jQuery, qui sont équivalents. Par exemple, pour trouver l'élément avec l'identifiant foo dans un document HTML, vous pouvez utiliser l'instruction suivante :

$('#foo')  // $符号是jQuery关键字的简写方式

À ce stade, ce qui est renvoyé est un objet jQuery, à travers lequel nous pouvons effectuer diverses opérations . Par exemple, vous pouvez utiliser l'instruction suivante pour masquer l'élément :

$('#foo').hide(); // 将id为foo的元素隐藏

jQuery fournit également de nombreuses autres méthodes, telles que l'ajout de classes, la suppression d'éléments, l'exploitation des propriétés CSS, etc. Vous pouvez consulter la documentation officielle pour apprendre à utiliser ces méthodes.

La mise en œuvre de la fonction de déclenchement automatique peut être complétée par le réglage d'une minuterie (setInterval) ou la surveillance d'un événement (comme un événement de clic). Voici un exemple d'utilisation de setInterval pour déclencher automatiquement une fonction pour imprimer Hello World ! chaque seconde :

setInterval(function() {
    console.log('Hello World!');
}, 1000); // 设置定时器，每1000毫秒执行一次函数

Dans les applications réelles, nous devons souvent écrire des fonctions de déclenchement automatique en fonction des besoins spécifiques de l'entreprise. Par exemple, une fonction est déclenchée lorsque l'utilisateur fait glisser la page, ou le formulaire est automatiquement soumis une fois que l'utilisateur a terminé la saisie dans la zone de saisie, etc.

Ce qui suit est un exemple implémenté à l'aide de jQuery et d'une fonction de déclenchement automatique : lorsque l'utilisateur fait glisser la page vers le bas, davantage de données sont automatiquement chargées. Tout d'abord, définissez la fonction pour détecter les événements de défilement :

function checkScroll() {
    var documentHeight = $(document).height(); // 文档总高度
    var windowHeight = $(window).height(); // 窗口高度
    var scrollTop = $(window).scrollTop(); // 滚动条距离窗口顶部的距离

    if (documentHeight - scrollTop - windowHeight < 20) {
        // 如果滚动到了底部，执行加载函数
        loadData();
    }
}

Parmi eux, $(document).height() obtient la hauteur de l'ensemble du document, $(window).height() obtient la hauteur de la fenêtre, $(window ).scrollTop() obtient la distance entre la barre de défilement et le haut de la fenêtre. Si le défilement actuel atteint le bas de la page, la fonction loadData() qui charge les données est exécutée.

Ce qui suit est la fonction spécifique pour charger des données dans les pages :

var page = 1; // 记录当前页数
function loadData() {
    $.ajax({
        type: 'GET',
        url: 'data.php',
        data: {page: page},
        success: function(data) {
            // 处理从服务器返回的数据
            $('#result').append(data); // 将数据追加到页面上
            page++; // 页面数加一
        }
    });
}

Utilisez la méthode ajax de jQuery pour charger des données de manière asynchrone. Parmi eux, la page enregistre le numéro de page actuel et la page augmente de 1 à chaque fois que les données sont chargées. Une fois les données chargées avec succès, ajoutez les données à l'élément HTML avec l'identifiant du résultat.

Enfin, une fois la page chargée, utilisez le code suivant pour configurer la surveillance de l'événement de défilement et charger automatiquement les données lors du glissement vers le bas :

$(document).ready(function() {
    $(window).scroll(function() {
        checkScroll(); // 滚动时检查是否到底部了
    });
});

Quand la page est chargée, écoutez l'événement de défilement et vérifiez s'il glisse vers le bas. Si vous glissez vers le bas, la fonction checkScroll() est exécutée pour charger automatiquement les données.

De cette façon, nous pouvons facilement implémenter certaines fonctions frontales courantes, rendant le développement Web plus efficace et plus pratique. Bien sûr, ce qui précède n'est qu'un exemple simple, et de nombreux détails doivent être pris en compte dans les applications réelles, tels que la limitation et l'anti-secousse du défilement des pages, la réutilisabilité et la maintenabilité du code, etc. J'espère que cet article pourra aider les lecteurs à comprendre jQuery et les fonctions de déclenchement automatique.

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!