cari
Rumahhujung hadapan webSoal Jawab bahagian hadapanMari kita bincangkan tentang cara mengalih keluar atribut secara dinamik dalam jQuery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas yang mengoptimumkan, memudahkan dan menyatukan cara manipulasi DOM dilakukan. jQuery menyediakan sejumlah besar fungsi terkapsul untuk memudahkan penggunaan operasi DOM biasa, seperti menambah, memadam, mengubah suai atribut dan kandungan elemen DOM, dsb. Antaranya, fungsi attr() ialah kaedah yang digunakan untuk mendapatkan atau menetapkan nilai atribut elemen DOM. Tetapi kadangkala kita perlu mengalih keluar atribut, dalam hal ini kita perlu menggunakan kaedah removeAttr() attr(). Artikel ini akan memperkenalkan anda kepada kaedah mengalih keluar atribut secara dinamik dalam jQuery.

Gambaran Keseluruhan jQuery attr()

Sebelum memperkenalkan atribut mengalih keluar secara dinamik, mari semak fungsi attr() jQuery. Fungsi attr() mempunyai fungsi untuk mendapatkan atau menetapkan nilai atribut elemen DOM Penggunaannya adalah seperti berikut:

// 获取属性值
$(selector).attr(attribute)
// 设置属性值
$(selector).attr(attribute,value)
  • selector ialah pemilih yang digunakan untuk menentukan elemen HTML. atau koleksi elemen;
  • attribute ialah rentetan nama atribut
  • value ialah rentetan atau fungsi nilai atribut.

Jika anda perlu menetapkan berbilang atribut pada masa yang sama, anda boleh menggunakan objek sebagai parameter Sintaksnya adalah seperti berikut:

$(selector).attr({attribute1:value1, attribute2:value2, ...})

kaedah jQuery removeAttr()

Ia adalah fungsi dalam jQuery yang secara dinamik mengalih keluar atribut Sintaksnya ialah: removeAttr()

$(selector).removeAttr(attribute)
Antaranya, makna

dan selector adalah sama dengan yang. dalam fungsi attr(). Fungsi removeAttr() boleh mengalih keluar atribut HTML secara dinamik dan mengembalikannya kepada keadaan lalainya. attribute

Sebagai contoh, kami boleh mengalih keluar atribut "dilumpuhkan" elemen melalui kod berikut:

$("input[type='button']").removeAttr("disabled");
Perhatikan bahawa fungsi removeAttr() hanya boleh mengalih keluar item tersebut yang wujud Atribut dalam elemen HTML. Jika elemen mempunyai atribut yang ditetapkan dan diubah suai melalui CSS, kaedah ini tidak boleh mengalih keluar nilai atribut yang diubah suai tersebut.

contoh jQuery attr() dan removeAttr()

Dalam contoh berikut, kami menggunakan kaedah attr() dan removeAttr() untuk mengubah suai atribut elemen HTML secara dinamik. Kami mula-mula mencipta sekeping kod HTML:

nbsp;html>


  <meta>
  <title>jQuery attr() 和 removeAttr() 实例</title>
  <script></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").attr("style","background-color:yellow; font-size:24px;");
      });
      $("input[type=&#39;button&#39;]").click(function(){
        $("p").removeAttr("style");
      });
    });
  </script>
  <style>
    p {
      background-color: lightblue;
      font-size: 20px;
    }
  </style>



<h2 id="jQuery-attr-和-removeAttr-实例">jQuery attr() 和 removeAttr() 实例</h2>

<p>点击第一个按钮将更改样式。</p>

<button>更改样式</button>
<input>


Kami merujuk versi terkini pustaka jQuery dalam kod teks ini dan mencipta halaman HTML yang mengandungi butang dan kotak input. Apabila pengguna mengklik butang Tukar Gaya, warna latar belakang elemen

akan bertukar kepada kuning dan saiz fon akan berubah kepada 24px. Apabila pengguna mengklik butang Alih Keluar Gaya, elemen

Pengendali acara untuk kedua-dua butang ini menggunakan kaedah attr() dan removeAttr() jQuery. Sudah tentu, kami juga boleh menguji kedua-dua kaedah ini dalam konsol.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara mengalih keluar atribut secara dinamik dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
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
CSS IDS vs kelas: Mana yang lebih baik untuk kebolehcapaian?CSS IDS vs kelas: Mana yang lebih baik untuk kebolehcapaian?May 10, 2025 am 12:02 AM

Classesarebetterforaccessibilityinwebdevelopment.1) classescanbeappliedtomultipleelements, memastikan konsistenStylesandbehaviors, whoidsuserswithdisabilities.2) thefacilitatetheuseofariaattributesacrossgress.)

CSS: Memahami perbezaan antara pemilih kelas dan IDCSS: Memahami perbezaan antara pemilih kelas dan IDMay 09, 2025 pm 06:13 PM

ClassselectorsarereusableFormultipleelements, whersidselectorsareuniqueandusedonceperpage.1) kelas, denotedbyaperioD (.), AreidealforstylingmultipleelementsLikeButtons.2) ID

CSS Styling: Memilih antara pemilih kelas dan IDCSS Styling: Memilih antara pemilih kelas dan IDMay 09, 2025 pm 06:09 PM

Dalam gaya CSS, pemilih kelas atau pemilih ID hendaklah dipilih mengikut keperluan projek: 1) Pemilih kelas sesuai untuk digunakan semula dan sesuai untuk gaya yang sama pelbagai elemen; 2) Pemilih ID sesuai untuk unsur -unsur yang unik dan mempunyai keutamaan yang lebih tinggi, tetapi harus digunakan dengan berhati -hati untuk mengelakkan kesukaran penyelenggaraan.

HTML5: BatasanHTML5: BatasanMay 09, 2025 pm 05:57 PM

Html5hasseverallimitationscludinglackofsupportforadvancedgraphics, BasicFormValidation, Cross-browsererCompatibilitySsues, PrestiveImpacts, andSecurityConcerns.1) forcomplexgraphics, html5'scanvasisficient.scanveorsfic.jghlike.scanveorsufficient.scanveorsufficient.scanveorsuffice.scanveorsuffice.scanveorsuffice.scanveorsuffice

CSS: Adakah satu gaya lebih keutamaan daripada yang lain?CSS: Adakah satu gaya lebih keutamaan daripada yang lain?May 09, 2025 pm 05:33 PM

Ya, onestylecanhavemoreprioritythananotherincsduetospecificityandthecascade.1) spesifikactsasascoringsystemwheremorespecificselectorshavehigherpriority.2)

Apakah matlamat penting dalam spesifikasi HTML5?Apakah matlamat penting dalam spesifikasi HTML5?May 09, 2025 pm 05:25 PM

Thesignificantgoalsofhtml5aretoenhancemultimeDiasupport, cutionhumanweadability, maintenconsistencyacrossdevices, andensureBackwardcompatibility.1) html5improvesmultimediawithnationelementslikeAnd.2)

Apakah batasan React?Apakah batasan React?May 02, 2025 am 12:26 AM

React'slimitationscincu: 1) asteeplearningcurveduetoitsvastecosystem, 2) seochallengeswithclient-siderendering, 3) potensiperformanceisseSsueSinlarGeapplications, 4) complexstatemanagementasappsgrow, dan5) theneedtokeepupwithitshiteVolution.terichePupePher.

Kurva Pembelajaran React: Cabaran untuk pemaju baruKurva Pembelajaran React: Cabaran untuk pemaju baruMay 02, 2025 am 12:24 AM

ReactischallengingforbeginnersduetoitssteeplearningcurveandParadigmshifttocomponent-rasedarchitecture.1) permulaan

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).