jquery menukar kandungan tag-Soal Jawab bahagian hadapan-php.cn

jquery menukar kandungan tag

王林

Lepaskan： 2023-05-14 09:53:07

asal

718 orang telah melayarinya

Dalam pembangunan bahagian hadapan, kami sering menghadapi keperluan untuk menukar kandungan elemen halaman asal melalui JavaScript. Antaranya, menukar kandungan tag juga merupakan keperluan yang sangat biasa. Dalam artikel ini, kami akan memperkenalkan cara menukar kandungan tag melalui jQuery.

Pilih teg yang perlu ditukar melalui pemilih kelas

Dalam halaman, jika kami ingin mengubah suai kandungan teg melalui jQuery, kami pertama perlu mencari kandungan yang perlu diubah suai tag. Mungkin terdapat pelbagai cara untuk mencari teg ini, seperti memilihnya mengikut nama teg, id atau atribut lain. Tetapi di sini, kami akan menggunakan pemilih kelas untuk memilih teg yang kandungannya perlu diubah suai. Kod sampel adalah seperti berikut:

<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('.modify').text('修改后的内容');
        });
    </script>
</head>
<body>
    <a href="#" class="modify">需要修改的内容</a>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menambah nama kelas "ubah suai" pada teg a Melalui pemilih kelas ini, kami menemui teg yang kami mahu ubah suai kandungan dan lulus text( ) kaedah menukar teks di dalamnya. Perlu diingat bahawa apabila melaksanakan kod jQuery, kita perlu memastikan bahawa halaman telah dimuatkan Di sini kita menggunakan $(function(){}) untuk memastikannya.

Pilih teg yang perlu ditukar melalui pemilih id

Selain memilih teg yang perlu ditukar melalui pemilih kelas, satu lagi perkara biasa caranya ialah melalui pemilih id untuk memilih. Kod sampel adalah seperti berikut:

<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('#modify').text('修改后的内容');
        });
    </script>
</head>
<body>
    <a href="#" id="modify">需要修改的内容</a>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menambahkan id "ubah suai" pada teg a Melalui pemilih id ini, kami menemui teg yang kandungannya perlu ditukar dan ditukar melalui kaedah text() teks di dalamnya.

Tambahkan elemen HTML sebagai kandungan teg

Selain menukar teks dalam teg, kami juga boleh menukar kandungan teg dengan menambah kandungan HTML. Dalam contoh berikut, kami akan mencipta elemen span baharu dan kemudian menambahkannya pada teg. Kod sampel adalah seperti berikut:

<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('.modify').html('<span style="color: red;">修改后的内容</span>');
        });
    </script>
</head>
<body>
    <a href="#" class="modify">需要修改的内容</a>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan kaedah html() untuk menukar kandungan dalam teg a. Antaranya, elemen span baharu dicipta melalui teg HTML, dan gayanya ditetapkan kepada merah, dan kemudian digunakan sebagai kandungan dalam teg a.

Ringkasan

Melalui tiga kaedah di atas, kita boleh menggunakan jQuery untuk menukar kandungan tag dengan sangat mudah. Perlu diingatkan bahawa dalam pembangunan sebenar, kita perlu memilih kaedah yang paling sesuai berdasarkan keperluan dan senario tertentu. Pada masa yang sama, sebelum mengubah suai kandungan teg, kita juga harus memastikan bahawa halaman telah dimuatkan untuk mengelakkan masalah unsur tidak ditemui.

Atas ialah kandungan terperinci jquery menukar kandungan tag. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!