Bagaimana untuk menambah jquery

Dengan kemajuan teknologi web, alatan yang digunakan oleh pembangun dalam proses pembangunan juga sentiasa dinaik taraf. Sebagai perpustakaan JavaScript yang popular, JQuery telah menjadi pilihan pertama banyak pembangun. Salah satu fungsi biasa ialah mencari elemen pada halaman dan beroperasi padanya. Apabila melakukan operasi ini, keperluan yang sangat biasa adalah untuk menambah beberapa nilai bersama-sama. Artikel ini akan memperkenalkan cara menggunakan JQuery untuk melaksanakan fungsi penambahan.

Pertama, kita perlu menambah kotak input yang mengandungi nilai dan butang pada halaman HTML. Dalam contoh ini, kita akan menggunakan dua kotak input untuk melaksanakan operasi penambahan, seperti yang ditunjukkan di bawah:

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

Seterusnya, kita perlu menulis fungsi JQuery yang akan mengekstrak nilai dari kotak input dan menambah Mereka menambah . Selepas menyelesaikan tugasan ini, kami akan memaparkan keputusan dalam elemen div. Berikut ialah kodnya:

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

Di sini, kami telah menggunakan fungsi click() jQuery. Fungsi ini dipanggil apabila #addBtn diklik. Seterusnya, kami mengekstrak nilai dalam #num1 dan #num2 dan menukarnya kepada integer menggunakan fungsi parseInt(). Kami kemudian menambah dua integer dan menyimpan hasilnya dalam pembolehubah result. Akhir sekali, kami memaparkan hasil ini dalam elemen html() menggunakan fungsi #result.

Perlu diambil perhatian bahawa kami menggunakan fungsi parseInt() di sini untuk menukar nilai kotak input kepada integer. Jika nilai yang terkandung dalam kotak input bukan nilai angka, parseInt() akan mengembalikan NaN, jadi anda perlu memastikan bahawa nilai dalam kotak input ialah nombor sebelum melakukan operasi tambah.

Jika kita perlu menambah lebih banyak nombor, kita boleh menggunakan kaedah yang sama. Sebagai contoh, kita boleh menambah kotak input ketiga dan butang kedua seperti ini:

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

Kita boleh menulis fungsi lain untuk menambah tiga nilai:

$(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);
  });
});

Dalam contoh ini, kami telah menambah yang baharu butang untuk melakukan operasi tambah. Fungsi baharu ini berfungsi sama seperti fungsi sebelumnya, tetapi di sini kita perlu menambah pembolehubah integer tambahan num3 dan menambahnya pada dua nilai pertama.

Ringkasnya, adalah sangat mudah untuk menggunakan JQuery untuk melaksanakan fungsi penambahan. Kami hanya perlu mengekstrak nilai dari kotak input, menambahnya, dan memaparkan hasilnya pada halaman. Ini hanyalah salah satu daripada banyak ciri yang JQuery sediakan untuk membantu pembangun web semasa menulis aplikasi yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk menambah jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!