jquery mengubah nilai input input

jQuery ialah perpustakaan JavaScript yang sangat berkuasa yang menyediakan banyak fungsi dan ciri yang boleh memudahkan pembangunan web dengan sangat baik. Satu operasi biasa ialah menukar nilai input elemen input. Dalam artikel ini, kita akan melihat menggunakan jQuery untuk menukar nilai input elemen input.

Pemilih jQuery

Sebelum menggunakan jQuery untuk menukar nilai input elemen input, kita perlu memahami konsep pemilih terlebih dahulu. Pemilih ialah ungkapan yang digunakan untuk memilih elemen HTML. Kita boleh memilih elemen HTML mengikut nama elemen, kelas, ID, atribut, dsb.

Berikut ialah beberapa pemilih jQuery biasa:

1. Pemilih elemen: pilih elemen mengikut nama elemen, contohnya: $("input")
2. Pemilih kelas: Pilih elemen mengikut nama kelas, contohnya: $(".class")
3. Pemilih ID: Pilih elemen mengikut ID, contohnya: $("#id")
4. Pemilih atribut: Pilih elemen melalui atribut elemen, contohnya: $("[name='username']")

Tukar nilai input elemen input

Secara umumnya, Kita boleh menukar nilai elemen input melalui fungsi val(). Fungsi val() ialah fungsi yang disediakan oleh jQuery untuk mendapatkan dan menetapkan nilai elemen. Berikut ialah contoh menukar nilai kotak input:

Kod HTML:

<input id="username" type="text" value="Hello World!">

Kod jQuery:

$("#username").val("New Value");

Dalam kod di atas, kami telah memilih id melalui pemilih ID ialah elemen input nama pengguna dan nilainya ditukar kepada "Nilai Baharu" melalui fungsi .val().

Tukar nilai input elemen input secara dinamik

Kadangkala, kita perlu menukar nilai input elemen input secara dinamik dengan nilai elemen lain. Sebagai contoh, kita boleh menetapkan nilai satu kotak teks ke kotak teks lain selepas mengklik butang. Berikut ialah contoh:

Kod HTML:

<input id="username1" type="text" value="Old Value">
<input id="username2" type="text" value="">

<button id="btn">Click me</button>

Kod jQuery:

$("#btn").click(function() {
  var oldVal = $("#username1").val();
  $("#username2").val(oldVal);
});

Dalam kod di atas, kami telah menambah acara klik pada butang melalui klik() pengendali fungsi. Apabila butang diklik, ia mendapat nilai elemen dengan id username1 dan kemudian memberikannya kepada elemen dengan id username2.

Lebih banyak operasi

Selain fungsi .val(), jQuery juga menyediakan banyak fungsi lain yang boleh digunakan untuk menukar nilai input elemen input. Berikut ialah beberapa fungsi yang biasa digunakan:

1. fungsi text(): digunakan untuk menetapkan kandungan teks biasa elemen input, contohnya: $("#nama pengguna").text("Teks baharu ");
2. fungsi html(): digunakan untuk menetapkan kod HTML sebagai nilai elemen input, contohnya: $("#nama pengguna").html("HTML Baharu" );
3. append() fungsi: digunakan untuk menambah kandungan pada penghujung elemen input, contohnya: $("#username").append(" Appended Text");
4. fungsi prepend( ): digunakan untuk menambah kandungan pada permulaan elemen input, contohnya: $("#nama pengguna").prepend(" Teks yang Diprapendi");

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk menukar nilai input elemen input, serta beberapa fungsi dan pemilih yang biasa digunakan. Menguasai kemahiran ini boleh memudahkan pembangun menyelesaikan tugas pembangunan web dan meningkatkan kecekapan kerja.

Atas ialah kandungan terperinci jquery mengubah nilai input input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!