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

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