masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

atribut dan gaya jquery (1)

Setiap elemen mempunyai satu atau lebih atribut Tujuan atribut ini adalah untuk memberikan maklumat tambahan tentang elemen yang sepadan atau kandungannya. Contohnya: dalam elemen img, src ialah atribut elemen dan digunakan untuk menandakan alamat imej.

Terdapat tiga kaedah DOM utama untuk atribut operasi, kaedah getAttribute, kaedah setAttribute dan kaedah removeAttribute, walaupun begitu, masih terdapat banyak masalah dalam operasi sebenar, yang tidak akan dibincangkan di sini. Dalam jQuery, menggunakan attr() dan removeAttr() boleh menyelesaikan segala-galanya, termasuk isu keserasian

Dalam jQuery, kaedah attr() digunakan untuk mendapatkan dan menetapkan atribut elemen ialah singkatan atribut , attr ()

attr() sering digunakan dalam operasi DOM jQuery Terdapat 4 ungkapan

attr (nama atribut masuk): Dapatkan Nilai atribut

<. 🎜> attr(nama atribut, nilai atribut): Tetapkan nilai atribut

attr(nama atribut, nilai fungsi): Tetapkan nilai fungsi atribut

attr(atribut) : Tetapkan berbilang nilai atribut untuk elemen yang ditentukan, iaitu: {Attribute name one: "Attribute value one", Attribute name two: "Attribute value two", … … }

removeAttr()Alih keluar kaedah

.removeAttr(attributeName): Alih keluar atribut (atribut) daripada setiap elemen dalam set elemen yang dipadankan

Kelebihan:

attr dan removeAttr dikapsulkan oleh jQuery untuk operasi atribut Memanggil kaedah ini secara langsung pada objek jQuery memudahkan untuk mengendalikan atribut, dan tidak perlu memahami masalah nama atribut yang berbeza dalam penyemak imbas

<🎜. >Perkara yang perlu diberi perhatian

: Terdapat perbezaan konsep dalam DOM: Atribut dan Harta kedua-duanya diterjemahkan sebagai "atribut", dan buku "JS Advanced Programming" diterjemahkan sebagai "features" ” dan “ sifat-sifat”. Untuk memahami secara ringkas, Atribut ialah atribut yang disertakan dengan nod dom

Contohnya: id, kelas, tajuk, sejajar, dsb. yang biasa digunakan dalam html: 

<div id="phpcn" title="php中文网"></div>

Dan Harta ialah DOM ini elemen sebagai objek, dan lampirannya Kandungan, seperti tagName, nodeName, nodeType,, defaultChecked dan defaultSelected, gunakan kaedah .prop() untuk mendapatkan atau menetapkan nilai, dsb.

Kepada dapatkan Attribute, anda perlu menggunakan attr, dan untuk mendapatkan Property, anda perlu menggunakan prop


Mari kita lihat contoh untuk menukar nilai atribut imej

Kodnya adalah seperti berikut: 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
   <img src="1.jpg" width="200" height="200" id="img">

    <script type="text/javascript">
        $("#img").attr('width','400');
    </script>
</body>

</html>

Nota: Mula-mula anda perlu mempunyai imej ini 1 .jpg Anda boleh mencari gambar untuk dicuba, dan kemudian jalankan hasilnya

Cara menggunakan attr( ) kaedah untuk mendapatkan nilai atribut, sila lihat contoh di bawah

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
   <input type="text" value="php 中文网" id="ipt">

    <script type="text/javascript">
        alert($("#ipt").attr('value'));
    </script>
</body>

</html>

Anda boleh lihat pop-up Kandungan yang dipaparkan dalam kotak ialah laman web php Cina


Mari lihat cara memadamkan kandungan elemen removeAttr()

Kodnya adalah seperti berikut: 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
   <input type="text" value="php 中文网" id="ipt">

    <script type="text/javascript">
       $("#ipt").removeAttr("value");
    </script>
</body>

</html>

Nota: Kotak teks kami pada asalnya mempunyai kandungan apabila bahasa skrip dilaksanakan , kandungan teks akan dipadamkan

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <input type="text" value="php 中文网" id="ipt"> <script type="text/javascript"> alert($("#ipt").attr('value')); </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492424 permainan