jQueryに追加する方法

Web テクノロジーの進歩に伴い、開発者が開発プロセスで使用するツールも常にアップグレードされています。人気の JavaScript ライブラリとして、JQuery は多くの開発者の最初の選択肢となっています。一般的な機能の 1 つは、ページ上の要素を検索して操作することです。これらの操作を実行するとき、非常に一般的なニーズは、いくつかの値を追加することです。この記事ではJQueryを使って加算機能を実装する方法を紹介します。

まず、値とボタンを含む入力ボックスを HTML ページに追加する必要があります。この例では、以下に示すように、2 つの入力ボックスを使用して加算操作を実行します。

<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() 関数を使用して整数に変換します。次に、2 つの整数を加算し、結果を変数 result に保存します。最後に、html() 関数を使用して、この結果を #result 要素に表示します。

ここでは parseInt() 関数を使用して入力ボックスの値を整数に変換していることに注意してください。入力ボックスに含まれる値が数値でない場合、parseInt() は NaN を返すため、加算演算を実行する前に入力ボックスの値が数値であることを確認する必要があります。

さらに数値を追加する必要がある場合も、同様の方法を使用できます。たとえば、次のように 3 番目の入力ボックスと 2 番目のボタンを追加できます:

<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>

3 つの数値を追加する別の関数を作成できます:

$(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 を追加し、それを最初の 2 つの値に追加する必要があります。

要約すると、JQuery を使用して加算関数を実装するのは非常に簡単です。入力ボックスから値を抽出して合計し、結果をページに表示するだけです。これは、複雑なアプリケーションを作成する際に Web 開発者を支援するために JQuery が提供する多くの機能の 1 つにすぎません。

以上がjQueryに追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。