Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk mendapatkan nilai atribut tag dalam jquery

Bagaimana untuk mendapatkan nilai atribut tag dalam jquery

PHPz
Lepaskan: 2023-04-06 10:09:39
asal
5347 orang telah melayarinya

Dalam beberapa tahun kebelakangan ini, bahagian hadapan Web telah menjadi industri yang sangat hangat, dan jQuery, sebagai perpustakaan JavaScript yang sangat baik, digunakan secara meluas dalam semua aspek pembangunan bahagian hadapan Web. Apabila menggunakan jQuery, mendapatkan nilai atribut tag adalah asas asas. Seterusnya, mari kita lihat beberapa cara jQuery boleh mendapatkan nilai atribut tag.

1. kaedah attr()

kaedah attr() ialah kaedah biasa dalam jQuery, yang digunakan untuk mendapatkan atau menetapkan nilai atribut bagi elemen tertentu. Berikut ialah sintaks asas kaedah attr():

$(selector).attr(attribute)
Salin selepas log masuk

di mana pemilih mewakili elemen yang ditentukan dan atribut mewakili nama atribut yang akan diperolehi atau ditetapkan. Jika anda ingin mendapatkan nilai atribut bagi elemen tertentu, anda boleh menghantar nama atribut dalam parameter atribut. Sebagai contoh, jika kita ingin mendapatkan nilai atribut kelas bagi elemen div tertentu, kita boleh menulisnya seperti ini:

var className = $('div').attr('class');
Salin selepas log masuk

Dalam kod di atas, $('div') bermaksud memilih semua div elemen, attr('class' ) bermakna mendapat nilai atribut kelas bagi elemen ini. Jika anda ingin menetapkan nilai atribut sesuatu elemen, anda perlu memasukkan nama atribut dan nilai atribut dalam parameter atribut. Sebagai contoh, jika kita ingin menukar nilai atribut src elemen img kepada newImg.png, kita boleh menulisnya seperti ini:

$('img').attr('src', 'newImg.png');
Salin selepas log masuk

Apabila menggunakan kaedah attr() untuk mendapatkan nilai atribut tag , anda perlu memberi perhatian kepada perkara berikut:

  • Jika terdapat berbilang elemen yang dipadankan oleh pemilih, hanya nilai atribut elemen pertama akan dikembalikan.
  • Jika harta itu tidak wujud, pulangan tidak ditentukan.
  • Jika nama atribut ditulis dengan salah, undefined juga akan dikembalikan.

2. kaedah prop()

Kaedah prop() adalah serupa dengan kaedah attr() dan juga digunakan untuk mendapatkan atau menetapkan nilai atribut bagi elemen yang ditentukan. Perbezaannya ialah kaedah prop() digunakan terutamanya untuk mendapatkan atau menetapkan beberapa atribut khusus elemen, seperti diperiksa, dipilih, dsb. Berikut ialah sintaks asas kaedah prop():

$(selector).prop(property)
Salin selepas log masuk

di mana pemilih mewakili elemen yang ditentukan dan sifat mewakili nama atribut yang akan diperolehi atau ditetapkan. Jika anda ingin mendapatkan nilai harta bagi elemen tertentu, anda boleh menghantar nama harta dalam parameter sifat. Sebagai contoh, jika kita ingin mendapatkan nilai atribut yang disemak bagi elemen kotak pilihan tertentu, kita boleh menulisnya seperti ini:

var isChecked = $('input[type=checkbox]').prop('checked');
Salin selepas log masuk

Dalam kod di atas, $('input[type=checkbox]') bermaksud untuk memilih semua elemen kotak semak prop('ditanda') bermaksud untuk mendapatkan nilai atribut yang disemak bagi elemen ini. Jika anda ingin menetapkan nilai atribut sesuatu elemen, anda perlu memasukkan nama atribut dan nilai atribut dalam parameter sifat. Sebagai contoh, jika kita ingin menetapkan nilai atribut yang ditandakan bagi elemen kotak semak kepada benar, kita boleh menulisnya seperti ini:

$('input[type=checkbox]').prop('checked', true);
Salin selepas log masuk

Apabila menggunakan kaedah prop() untuk mendapatkan nilai atribut label, anda perlu memberi perhatian kepada perkara berikut:

  • Jika terdapat berbilang elemen yang dipadankan oleh pemilih, hanya nilai atribut elemen pertama akan dikembalikan.
  • Jika harta itu tidak wujud, pulangan tidak ditentukan.
  • Jika nama atribut ditulis dengan salah, undefined juga akan dikembalikan.

3. kaedah data()

kaedah data() ialah satu lagi kaedah biasa dalam jQuery untuk mendapatkan nilai atribut tag Ia digunakan untuk mendapatkan penyesuaian elemen yang ditentukan Atribut data. Berikut ialah sintaks asas kaedah data():

$(selector).data(key)
Salin selepas log masuk

Antaranya, pemilih mewakili elemen yang ditentukan, dan kunci mewakili nama atribut data tersuai yang akan diperolehi. Sebagai contoh, jika kita ingin mendapatkan nilai id data atribut data tersuai bagi elemen div tertentu, kita boleh menulisnya seperti ini:

<div data-id="123"></div>
Salin selepas log masuk
var dataId = $('div').data('id');
Salin selepas log masuk

Dalam kod di atas, $( 'div') bermaksud memilih semua Untuk elemen div, data('id') bermaksud mendapatkan nilai data-id atribut data tersuai bagi elemen ini. Jika anda ingin menetapkan atribut data tersuai bagi elemen, anda perlu memasukkan nama atribut dan nilai atribut dalam kaedah data(). Contohnya, jika kita ingin menetapkan nama data atribut data tersuai bagi elemen div kepada myName, kita boleh menulisnya seperti ini:

$('div').data('name', 'myName');
Salin selepas log masuk

Apabila menggunakan kaedah data() untuk mendapatkan atribut label nilai, anda perlu memberi perhatian kepada mata berikut Mata:

  • Jika terdapat berbilang elemen yang dipadankan oleh pemilih, hanya nilai atribut data tersuai bagi elemen pertama akan dikembalikan.
  • Jika atribut data tersuai tidak wujud, mengembalikan tidak ditentukan.
  • Jika nama atribut data tersuai ditulis dengan tidak betul, undefined juga akan dikembalikan.

Kesimpulan

Di atas adalah beberapa kaedah biasa untuk jQuery mendapatkan nilai atribut tag. Dalam pembangunan sebenar, kita boleh memilih kaedah yang sesuai mengikut keperluan sebenar. Perlu diingatkan bahawa kaedah yang berbeza sesuai untuk jenis atribut yang berbeza, dan kita perlu memilih mengikut situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai atribut tag dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan