jquery mengubah nilai dom

Dalam proses pembangunan web, biasanya kita perlu menambah, memadam, mengubah suai dan menyemak elemen DOM. Antaranya, menukar nilai elemen DOM adalah operasi biasa. jQuery, perpustakaan JavaScript yang popular, menyediakan API yang kaya untuk menukar nilai elemen DOM.

Artikel ini akan memperkenalkan cara jQuery mengubah nilai DOM, termasuk cara mendapatkan nilai elemen, cara mengubah suai nilai elemen dan cara mengendalikan berbilang elemen melalui panggilan berantai.

Dapatkan nilai elemen

Dalam jQuery, kita boleh mendapatkan elemen DOM melalui pemilih, dan kemudian dapatkan nilai elemen melalui API. Berikut ialah beberapa API biasa untuk mendapatkan nilai elemen:

1. val(): Dapatkan nilai elemen input, pilih atau textarea.

Contohnya, dapatkan nilai kotak teks:

var value = $('#input-id').val();

2. text(): Dapatkan kandungan teks elemen.

Contohnya, dapatkan kandungan teks elemen p:

var text = $('p').text();

3. html(): Dapatkan kandungan HTML elemen tersebut.

Contohnya, dapatkan kandungan HTML elemen div:

var html = $('div').html();

4. attr(): Dapatkan nilai atribut elemen tersebut.

Sebagai contoh, untuk mendapatkan atribut src elemen img:

var src = $('img').attr('src');

API di atas juga boleh menerima fungsi sebagai parameter untuk menyesuaikan nilai elemen. Sebagai contoh:

var value = $('input').val(function(index, value) {
  return value.toUpperCase();
});

Apabila mendapat nilai berbilang elemen, anda boleh menggunakan fungsi each() untuk melelaran melalui elemen dan mendapatkan nilainya. Contohnya, dapatkan nilai semua kotak teks:

$('input[type="text"]').each(function() {
  console.log($(this).val());
});

Ubah suai nilai elemen

Mendapatkan nilai elemen hanyalah sebahagian daripada operasi menukar elemen DOM yang biasa ialah mengubah suai nilai elemen DOM. Berikut ialah beberapa API biasa untuk mengubah suai elemen DOM:

1. val(): Tetapkan nilai elemen input, pilih atau textarea.

Sebagai contoh, tetapkan nilai kotak teks kepada "hello":

$('#input-id').val('hello');

2. text(): Tetapkan kandungan teks elemen.

Contohnya, untuk menetapkan kandungan teks elemen p kepada "dunia":

$('p').text('world');

3. html(): Tetapkan kandungan HTML elemen tersebut.

Sebagai contoh, tetapkan kandungan HTML elemen div kepada "

title

":

$('div').html('<h1>title</h1>');

4. attr(): Tetapkan atribut daripada nilai unsur.

Sebagai contoh, menetapkan atribut src elemen img kepada "image.jpg":

$('img').attr('src', 'image.jpg');

Operasi pada berbilang elemen

Sekarang, kita tahu Ketahui caranya untuk mendapatkan dan mengubah suai nilai elemen DOM tunggal. Tetapi biasanya, kita perlu melakukan operasi yang sama atau berbeza pada berbilang elemen. jQuery menyediakan panggilan berantai dan penapis untuk beroperasi pada berbilang elemen.

Menggunakan panggilan berantai

Panggilan berantai jQuery membolehkan kami mengendalikan berbilang elemen dalam satu kenyataan. Contohnya, tukar warna latar belakang semua elemen h1 kepada merah:

$('h1').css('background-color', 'red');

Tetapkan nilai semua kotak teks kepada kosong:

$('input[type="text"]').val('');

Ubah suai berbilang atribut pada masa yang sama:

rreee

Menggunakan Penapis

Penapis ialah pemilih berkuasa yang disediakan oleh jQuery yang boleh memilih subset set elemen. Contohnya, pilih semua elemen dengan kelas "aktif":

$('img').attr({
  'src': 'image.jpg',
  'alt': 'image'
});

Pilih elemen p pertama:

$('.active')

Pilih tiga elemen div pertama:

$('p:first')

Anda boleh menapis The pengendali digunakan dalam kombinasi dengan API untuk beroperasi pada elemen yang dipilih. Sebagai contoh, tetapkan nilai kotak teks dengan kelas "serlah" kepada mengosongkan:

$('div:lt(3)')

Contoh di atas menunjukkan penggunaan penapis yang berbeza Dengan membiasakan diri dengan penggunaan penapis, anda boleh memilih elemen yang diperlukan secara fleksibel untuk dikendalikan.

Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari cara jQuery memperoleh dan mengubah suai nilai elemen DOM, dan cara mengendalikan berbilang elemen melalui panggilan berantai dan penapis. Teknik ini membolehkan kami mengendalikan elemen DOM dengan lebih cepat dan meningkatkan kecekapan pembangunan. Pada masa yang sama, mempelajari cara mengendalikan jQuery juga boleh meletakkan asas untuk mempelajari perpustakaan dan rangka kerja JavaScript yang lain.

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