cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menukar id elemen menggunakan jQuery?

Bagaimana untuk menukar id elemen menggunakan jQuery?

WBOY
WBOYke hadapan
2023-08-24 09:49:421522semak imbas

如何使用 jQuery 更改元素 id？

jQuery ialah salah satu perpustakaan JavaScript yang pantas, kecil dan kaya dengan ciri. Ia digunakan untuk melaksanakan pengendalian acara, animasi, dsb. Ia adalah gabungan kepelbagaian dan kebolehskalaan. jQuery digunakan untuk memudahkan panggilan AJAX dan manipulasi DOM.

Menggunakan jQuery, kami boleh menjadikan halaman web interaktif dengan bertindak balas kepada peristiwa klik tetikus. jQuery termasuk ciri seperti acara, kesan, animasi, Ajax, penghuraian JSON, sokongan merentas pelayar dan kebolehlanjutan. Ia diedarkan sebagai fail JavaScript tunggal yang mentakrifkan semua antara muka seperti DOM, acara dan fungsi Ajax.

jQuery terdiri daripada dua fungsi, satu ialah fungsi utiliti statik dan satu lagi ialah kaedah objek.

Kita boleh menggunakan fungsi attr() dalam jQuery untuk menukar nilai id elemen. Anda juga boleh menggunakan fungsi prop() .

Mari bincangkan kedua-dua kaedah jQuery ini secara terperinci.

Kaedah 1: Gunakan kaedah jQuery attr()

Ini adalah salah satu cara untuk menukar ID sesuatu elemen. Anda boleh menggunakan kaedah attr() untuk menetapkan atau mengembalikan atribut dan nilai elemen yang dipilih. Jika jQuery attr() mengembalikan atribut ini, ia mengembalikan nilai pertama elemen HTML yang sepadan. Jika jQuery attr() menetapkan nilai atribut, ia menetapkan satu atau lebih atribut atau pasangan nilai untuk satu set elemen HTML yang sepadan.

Tatabahasa

Berikut ialah sintaks kaedah attr() -

Untuk mengembalikan nilai atribut, lihat seperti ini -

$(selector).attr(attribute)

Untuk menetapkan nilai dan sifat

$(selector).attr(attribute, value)

Tetapkan nilai dan sifat menggunakan fungsi seperti yang ditunjukkan di bawah - 

$(selector).attr(attribute, function(index, currentvalue))

Untuk menetapkan berbilang nilai dan sifat, gunakan yang berikut - 

$(selector).attr({attribute:value, attribute:value,…})

Parameter

  • Hartanah - Nyatakan nama hartanah.

  • nilai - nilai atribut yang ditentukan.

  • fungsi(indeks,nilai semasa) - Tentukan fungsi yang mengembalikan nilai sifat untuk ditetapkan. Di sini, indeks menerima kedudukan indeks dalam elemen dalam koleksi. nilai semasa menerima nilai atribut semasa bagi elemen yang dipilih.

Contoh

Dalam contoh ini, kami akan menggunakan kaedah attr() jQuery untuk menukar ID elemen. 

<html>
<head>
   <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <style>
      #myColor {color: white; background: black; padding:30px; height: 90px; width: 400px;
      }
      #newColor {background: pink; width: 650px; color: white; padding:30px; height: 90px;
      }
   </style>
</head>
<body>
   <div id="myColor"><p style="text-align:center;">Changing the Element ID</p> </div><br>
   <button onclick = "myFuntion()"> Click here </button>
   <script>
      function myFuntion() {
         $("div").attr('id', 'newColor');
      }
   </script>
   </center>
</body>
</html>

Seperti yang telah kita lihat dalam contoh, di sini kita telah menggunakan kaedah attr() yang digunakan untuk menukar ID elemen elemen HTML, ia adalah kaedah atribut jQuery. Kita perlu mengimport perpustakaan jQuery untuk melaksanakan fungsi berkaitan jQuery.

Anda boleh menggunakan kaedah attr() untuk menetapkan atau mengembalikan atribut dan nilai elemen yang dipilih. Jika anda menggunakan jQuery attr() untuk mengembalikan atribut, nilai elemen padanan pertama dikembalikan. Kaedah atribut ini menukar ID elemen elemen.

Sebelum kita mengklik butang, warna latar belakang kelihatan hitam dan sebaik sahaja kita mengklik butang, warna latar belakang menjadi merah jambu.

Kaedah 2: Gunakan kaedah prop()

Kami boleh menukar ID elemen elemen HTML menggunakan kaedah prop(). Ia digunakan untuk menetapkan atau mengembalikan atribut dan nilai elemen HTML yang dipilih. Apabila menggunakan jQuery prop() untuk mengembalikan nilai hartanah, nilai elemen padanan pertama akan dikembalikan. Jika anda menggunakan kaedah jQuery prop() untuk menetapkan nilai harta, satu atau lebih sifat yang sepadan dengan set pasangan nilai elemen yang merupakan koleksi.

Berikut ialah sintaks kaedah prop() -

digunakan untuk mengembalikan nilai atribut, seperti berikut -

$(selector).prop(property)

Untuk menetapkan sifat dan nilai

$(selector).prop(property, value)

Tetapkan sifat dan nilai menggunakan fungsi seperti yang ditunjukkan di bawah - 

$(selector).prop(property, function(index, currentvalue))

Tetapkan berbilang sifat dan nilai seperti berikut -

$(selector).prop(property:value, property:value,…))

Parameter

  • Atribut - Nyatakan nama atribut

  • nilai – Nyatakan nilai atribut

  • fungsi(indeks,nilai semasa) – Tentukan fungsi yang mengembalikan nilai atribut untuk ditetapkan. Di sini, indeks menerima kedudukan indeks elemen HTML dalam koleksi. nilai semasa menerima nilai atribut bagi elemen yang dipilih pada masa ini.

Contoh

Mari kita ambil contoh lain dan lihat cara menukar ID elemen menggunakan kaedah prop(). 

<html>
<head>
   <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <style>
      #myColor {color: white; background: black; padding:30px; height: 90px; width: 550px;
      }
      #newColor {background: green; width: 550px; color: white; padding:30px; height: 90px;
      }
   </style>
</head>
<body>
   <div id="myColor"><p style="text-align:center;">Changing the Element ID</p> </div><br>
   <button onclick = "myFuntion()"> Click here </button>
   <script>
      function myFuntion() {
         $("div").prop('id', 'newColor');
      }
   </script>
   </center>
</body>
</html>

Seperti yang kita lihat dalam contoh, di sini kita menggunakan kaedah prop() untuk menukar ID elemen elemen HTML, iaitu kaedah atribut jQuery.

Sebelum kita mengklik butang, warna latar belakang kelihatan hitam dan sebaik sahaja kita mengklik butang, warna latar belakang bertukar menjadi hijau.

Kesimpulan

Dalam artikel ini, kami menunjukkan cara menukar ID elemen dengan contoh. Kami melihat dua contoh berbeza di sini, dalam contoh pertama kami menggunakan kaedah attr() dan acara onclick untuk menukar ID elemen selepas mengklik butang. Dalam contoh kedua, kami menggunakan kaedah prop() dan acara onClick untuk menukar ID elemen selepas mengklik butang.

Atas ialah kandungan terperinci Bagaimana untuk menukar id elemen menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menetapkan faktor skala mendatar bulatan menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan faktor skala mendatar bulatan menggunakan FabricJS?

Artikel berkaitan

Lihat lagi