Maison  >  Article  >  interface Web  >  Comment ajouter dans jquery

Comment ajouter dans jquery

王林
王林original
2023-05-24 21:31:381022parcourir

Avec les progrès de la technologie Web, les outils utilisés par les développeurs dans le processus de développement sont également constamment mis à niveau. En tant que bibliothèque JavaScript populaire, JQuery est devenue le premier choix de nombreux développeurs. L'une des fonctions courantes consiste à rechercher des éléments sur la page et à les utiliser. Lors de ces opérations, un besoin très courant est d’ajouter quelques valeurs ensemble. Cet article explique comment utiliser JQuery pour implémenter la fonction d'ajout.

Tout d'abord, nous devons ajouter une zone de saisie contenant une valeur et un bouton à la page HTML. Dans cet exemple, nous utiliserons deux zones de saisie pour effectuer l'opération d'addition, comme indiqué ci-dessous :

<input type="text" id="num1" />
<input type="text" id="num2" />
<button id="addBtn">加</button>
<div id="result"></div>

Ensuite, nous devons écrire une fonction JQuery qui extraira la valeur dans la zone de saisie et ajoutera eux ensemble. Après avoir terminé cette tâche, nous afficherons les résultats dans un élément div. Voici le code :

$(function() {
  $("#addBtn").click(function() {
    var num1 = parseInt($("#num1").val());
    var num2 = parseInt($("#num2").val());
    var result = num1 + num2;
    $("#result").html(result);
  });
});

Ici, nous avons utilisé la fonction click() de jQuery. Cette fonction est appelée lorsque l'on clique sur #addBtn. Ensuite, nous extrayons les valeurs dans #num1 et #num2 et les convertissons en entiers à l'aide de la fonction parseInt(). On additionne ensuite les deux entiers et stockons le résultat dans la variable result. Enfin, nous affichons ce résultat dans un élément #result à l'aide de la fonction html(). click() 函数。当 #addBtn 被点击时,该函数被调用。接下来,我们提取 #num1#num2 中的值,并使用 parseInt() 函数将它们转换为整数。然后,我们将这两个整数加起来,并将结果存储在变量 result 中。最后,我们使用 html() 函数将此结果显示在 #result 元素中。

需要注意的是,我们在这里使用了 parseInt() 函数将输入框的值转换为整数。如果输入框中包含的值不是一个数值,parseInt() 将返回 NaN,因此在进行加法操作之前需要确保输入框中的值是数字。

如果我们需要将更多的数字相加,我们可以使用类似的方法。例如,我们可以添加一个第三个输入框和一个第二个按钮,如下所示:

<input type="text" id="num1" />
<input type="text" id="num2" />
<input type="text" id="num3" />
<button id="addBtn">加</button>
<button id="addBtn2">加 3 个数值</button>
<div id="result"></div>

我们可以编写另一个函数来实现三个数值的加法操作:

$(function() {
  $("#addBtn2").click(function() {
    var num1 = parseInt($("#num1").val());
    var num2 = parseInt($("#num2").val());
    var num3 = parseInt($("#num3").val());
    var result = num1 + num2 + num3;
    $("#result").html(result);
  });
});

在这个例子中,我们添加了一个新的按钮,用来执行加法操作。这个新的函数执行的方式与之前的函数类似,但是在这里我们需要添加一个额外的整数变量 num3

Il est à noter que nous utilisons ici la fonction parseInt() pour convertir la valeur de la zone de saisie en un entier. Si la valeur contenue dans la zone de saisie n'est pas une valeur numérique, parseInt() renverra NaN, vous devez donc vous assurer que la valeur dans la zone de saisie est un nombre avant d'effectuer l'opération d'addition.

Si nous devons ajouter plus de nombres, nous pouvons utiliser une méthode similaire. Par exemple, nous pouvons ajouter une troisième zone de saisie et un deuxième bouton comme suit : #🎜🎜#rrreee#🎜🎜# Nous pouvons écrire une autre fonction pour ajouter trois valeurs : #🎜🎜# rrreee#🎜🎜#Dans cet exemple, nous ajout d'un nouveau bouton pour effectuer l'opération d'ajout. Cette nouvelle fonction fonctionne de manière similaire à la fonction précédente, mais ici nous devons ajouter une variable entière supplémentaire num3 et l'ajouter aux deux premières valeurs. #🎜🎜##🎜🎜#Pour résumer, il est très simple d'utiliser JQuery pour implémenter la fonction d'addition. Il suffit d'extraire les valeurs des zones de saisie, de les ajouter et d'afficher les résultats sur la page. Ce n'est que l'une des nombreuses fonctionnalités fournies par JQuery pour aider les développeurs Web lors de l'écriture d'applications complexes. #🎜🎜#

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn