JQuery에 추가하는 방법

웹 기술의 발전에 따라 개발자가 개발 과정에서 사용하는 도구도 지속적으로 업그레이드되고 있습니다. 널리 사용되는 JavaScript 라이브러리인 JQuery는 많은 개발자의 첫 번째 선택이 되었습니다. 일반적인 기능 중 하나는 페이지에서 요소를 찾아 작업하는 것입니다. 이러한 작업을 수행할 때 매우 일반적인 요구 사항은 일부 값을 함께 추가하는 것입니다. 이 기사에서는 JQuery를 사용하여 추가 기능을 구현하는 방법을 소개합니다.

먼저 HTML 페이지에 값과 버튼이 포함된 입력 상자를 추가해야 합니다. 이 예에서는 두 개의 입력 상자를 사용하여 아래와 같이 추가 작업을 수행합니다.

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

다음으로 입력 상자의 값을 추출하여 함께 추가하는 JQuery 함수를 작성해야 합니다. 이 작업을 완료한 후 결과를 div 요소에 표시합니다. 코드는 다음과 같습니다.

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

여기에서는 jQuery의 click() 함수를 사용했습니다. 이 함수는 #addBtn을 클릭하면 호출됩니다. 다음으로 #num1과 #num2의 값을 추출하고 parseInt() 함수를 사용하여 정수로 변환합니다. 그런 다음 두 정수를 더하고 결과를 result 변수에 저장합니다. 마지막으로 html() 함수를 사용하여 #result 요소에 이 결과를 표시합니다. 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

여기서 parseInt() 함수를 사용하여 입력 상자의 값을 정수로 변환한다는 점에 유의하세요. 입력 상자에 포함된 값이 숫자 값이 아닌 경우 parseInt()는 NaN을 반환하므로 더하기 작업을 수행하기 전에 입력 상자의 값이 숫자인지 확인해야 합니다.

숫자를 더 추가해야 하는 경우 비슷한 방법을 사용할 수 있습니다. 예를 들어 다음과 같이 세 번째 입력 상자와 두 번째 버튼을 추가할 수 있습니다. 🎜rrreee🎜 세 개의 숫자 값을 추가하는 다른 함수를 작성할 수 있습니다. 🎜rrreee🎜 이 예에서는 추가 추가 작업을 수행하기 위해 새 버튼이 추가되었습니다. 이 새 함수는 이전 함수와 유사하게 수행되지만 여기서는 추가 정수 변수 num3를 추가하고 이를 처음 두 값에 추가해야 합니다. 🎜🎜결론적으로 JQuery를 사용하여 덧셈 기능을 구현하는 것은 매우 간단합니다. 입력 상자에서 값을 추출하고 합산하여 페이지에 결과를 표시하기만 하면 됩니다. 이는 웹 개발자가 복잡한 애플리케이션을 작성할 때 도움을 주기 위해 JQuery가 제공하는 많은 기능 중 하나일 뿐입니다. 🎜

위 내용은 JQuery에 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!