Bagaimana untuk mendapatkan teg semasa dengan jquery

Dalam pembangunan bahagian hadapan, mendapatkan teg semasa secara dinamik adalah operasi yang sangat biasa. Sebagai ahli rangka kerja bahagian hadapan, jQuery menyediakan pelbagai cara untuk mendapatkan teg semasa. Dalam artikel ini, kami akan memperincikan cara jQuery mendapat teg semasa.

I. Dapatkan ID elemen semasa

Anda boleh mendapatkan ID elemen semasa melalui kod berikut:

$(this).attr("id");

Sebagai contoh, kami mentakrifkan ID dengan ID "my" dalam elemen HTML file -id":

<div id="my-id">这是一个文本框</div>

Kita boleh menggunakan kod jQuery berikut untuk mendapatkan ID elemen:

$("#my-id").click(function(){
    console.log($(this).attr("id"));
});

Apabila pengguna mengklik pada elemen , jQuery akan mendapat ID elemen semasa dan menukarnya Output ke tetingkap konsol.

II Dapatkan kelas elemen semasa

Anda boleh mendapatkan kelas elemen semasa melalui kod berikut:

$(this).attr("class");

Sebagai contoh, kami mentakrifkan kelas dalam fail HTML sebagai elemen "my -class":

<div class="my-class">这是一个文本框</div>

Kita boleh menggunakan kod jQuery berikut untuk mendapatkan kelas elemen:

$(".my-class").click(function(){
    console.log($(this).attr("class"));
});

Apabila pengguna mengklik pada elemen, jQuery akan dapatkan kelas elemen semasa dan tukar Output ke tetingkap konsol.

III Dapatkan atribut tersuai elemen semasa

Anda boleh mendapatkan atribut tersuai elemen semasa melalui kod berikut:

$(this).attr("data-*");

Antaranya, "*" mewakili definisi kami sendiri Nama Harta. Sebagai contoh, kami mentakrifkan elemen dengan atribut tersuai "warna data" dalam fail HTML:

<div data-color="red">这是一个文本框</div>

Kami boleh menggunakan kod jQuery berikut untuk mendapatkan atribut tersuai elemen:

$("div").click(function(){
    console.log($(this).attr("data-color"));
});

Apabila pengguna mengklik pada elemen, jQuery mendapat sifat tersuai elemen semasa dan mengeluarkannya ke tetingkap konsol.

IV Dapatkan nama tag bagi elemen semasa

Anda boleh mendapatkan nama tag bagi elemen semasa melalui kod berikut:

$(this).prop("tagName");

Sebagai contoh, kami mentakrifkan nama teg dalam fail HTML Untuk elemen "div":

<div>这是一个文本框</div>

Kita boleh menggunakan kod jQuery berikut untuk mendapatkan nama tag bagi elemen:

$("div").click(function(){
    console.log($(this).prop("tagName"));
});

Apabila pengguna mengklik pada elemen, jQuery akan mendapat nama tag bagi elemen semasa, dan mengeluarkannya ke tetingkap konsol.

V. Dapatkan nilai elemen semasa

Anda boleh mendapatkan nilai elemen semasa melalui kod berikut:

$(this).val();

Sebagai contoh, kami mentakrifkan kotak input dalam fail HTML:

<input type="text" value="这是一个文本框" />

Kita boleh menggunakan kod jQuery berikut untuk mendapatkan nilai kotak input:

$("input").keyup(function(){
    console.log($(this).val());
});

Apabila pengguna memasukkan kandungan dalam kotak input, jQuery akan mendapat nilai daripada elemen semasa dan keluarkannya ke dalam tetingkap konsol.

VI Dapatkan kedudukan elemen semasa dalam dokumen

Anda boleh mendapatkan kedudukan elemen semasa dalam dokumen melalui kod berikut:

$(this).offset().top;
$(this).offset().left;

Sebagai contoh , kami mentakrifkannya dalam fail HTML Elemen:

<div>这是一个文本框</div>

Kami boleh menggunakan kod jQuery berikut untuk mendapatkan kedudukan elemen dalam dokumen:

$("div").click(function(){
    console.log($(this).offset().top);
    console.log($(this).offset().left);
});

Apabila pengguna mengklik pada elemen , jQuery akan mendapat kedudukan elemen semasa dalam dokumen, dan mengeluarkannya ke tetingkap konsol.

Dalam artikel ini, kami memperkenalkan secara terperinci cara jQuery mendapat teg semasa dari segi mendapatkan ID, kelas, atribut tersuai, nama teg, nilai dan kedudukan dalam dokumen elemen semasa. Dengan mengkaji artikel ini, kami boleh mempunyai pemahaman yang lebih mendalam tentang pengetahuan berkaitan jQuery, mengukuhkan keupayaan pembangunan bahagian hadapan dan menyediakan lebih banyak kemungkinan untuk kerja dan amalan projek kami.

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