Bagaimana untuk kehilangan fokus dan menukar kandungan span dalam jquery

Dengan pembangunan berterusan teknologi web, semakin banyak fungsi halaman web direalisasikan bukan lagi melalui pembangunan program bahagian belakang, tetapi melalui perpustakaan JS bahagian hadapan seperti JavaScript dan jQuery. Antaranya, interaksi halaman adalah fungsi yang agak biasa, dan interaksi bentuk adalah yang paling biasa. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menukar kandungan teg secara automatik apabila kotak input borang hilang fokus.

1. Pengetahuan prasyarat

Sebelum memperkenalkan cara menggunakan jQuery untuk menukar kandungan tag

1. Versi jQuery

Versi terkini jQuery ialah 3.x, dan pegawai telah berhenti mengekalkan 1.x dan 2.x. Oleh itu, artikel ini akan menggunakan versi terkini jQuery, jQuery 3.x.

2. Pemilih

Pemilih ialah salah satu konsep yang sangat penting dalam jQuery Ia boleh memilih elemen berdasarkan nama teg, nama kelas, ID dan atribut lain. Contohnya, pemilih $('input[type="text"]') boleh memilih semua kotak input teks pada halaman.

3. Acara

Dalam JavaScript, acara ialah konsep yang sangat biasa. Ia merujuk kepada tingkah laku yang dicetuskan oleh operasi tertentu dalam DOM (Model Objek Dokumen), seperti klik, pergerakan tetikus, dsb. Dalam jQuery, peristiwa boleh diikat menggunakan kaedah on(), contohnya: $('button').on('click', function(){ alert('Button clicked'); }).

2. Cara melaksanakan

1. bahagian HTML

Dalam HTML, kita perlu mentakrifkan kotak input teks dan teg terlebih dahulu. Contohnya:

<input type="text" id="txtName" />
<span id="spnName"></span>

Antaranya, tag input digunakan untuk menerima input pengguna, dan tag span digunakan untuk memaparkan kandungan yang dimasukkan oleh pengguna boleh kosong.

2. bahagian jQuery

Dalam kod jQuery, kita perlu memilih kotak input teks dahulu, dan kemudian gunakan kaedah on() untuk mengikat acara kabur. Apabila kotak input teks kehilangan fokus, fungsi panggil balik dalam kod boleh dilaksanakan. Kod khusus adalah seperti berikut:

$(function() {
    $('#txtName').on('blur', function() {
        $('#spnName').text($(this).val());
    });
});

Antaranya, kaedah $(this).val() digunakan untuk mendapatkan nilai dalam kotak input teks, manakala $('#spnName') Kaedah .text() digunakan Tetapkan kandungan teks teg

3. Ringkasan

Melalui pengenalan di atas, saya percaya anda boleh memahami dengan jelas kaedah menggunakan jQuery untuk menukar kandungan tag yang sepadan apabila kotak input borang hilang fokus. Sudah tentu, selain menggunakan kaedah text() untuk menetapkan kandungan teg kami juga boleh menggunakan kaedah html() untuk menetapkan kandungan HTML, atau menggunakan kaedah append() untuk menambahkan kandungan baharu kepada teg

Akhir sekali, perlu diingatkan bahawa walaupun jQuery menyediakan banyak kaedah mudah untuk mengendalikan DOM, dalam pembangunan sebenar, anda juga perlu memberi perhatian untuk mengoptimumkan prestasi kod untuk mengelakkan terlalu kembung dan menjejaskan prestasi halaman.

Atas ialah kandungan terperinci Bagaimana untuk kehilangan fokus dan menukar kandungan span dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!