Bagaimana untuk mencapai penonjolan teks dengan jQuery?

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan operasi DOM, pengendalian acara, kesan animasi, dll. dalam pembangunan web. Dalam pembangunan web, kami sering menghadapi keperluan untuk menyerlahkan teks tertentu, dan jQuery boleh melaksanakan fungsi ini dengan mudah. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai kesan penonjolan teks dan memberikan contoh kod khusus.

1. Perkenalkan perpustakaan jQuery

Mula-mula, perkenalkan perpustakaan jQuery ke dalam halaman web. Ia boleh diperkenalkan melalui pautan CDN, atau anda boleh memuat turun fail perpustakaan jQuery secara tempatan dan kemudian memperkenalkannya dalam fail HTML.

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

2. Cipta struktur HTML

Sediakan sekeping kandungan dalam HTML yang memerlukan penyerlahan teks, contohnya:

<p id="content">
    这是一段需要进行文字高亮的内容。
</p>

3 Tulis kod jQuery

Seterusnya, tulis kod jQuery untuk mencapai kesan penyerlahan teks. Anda boleh memilih teks yang perlu diserlahkan melalui pemilih, dan menggunakan gaya CSS untuk menukar warna teks, warna latar belakang, dsb. untuk mencapai kesan penyerlahan.

$(document).ready(function() {
    $("#content").html(function(index, html) {
        return html.replace(/需要进行高亮的关键词/g, "<span style='background-color: yellow;'>需要进行高亮的关键词</span>");
    });
});

Dalam kod di atas, tetapkan atribut 需要进行高亮的关键词替换为需要高亮的关键词，同时添加<span></span>标签，并设置background-color kepada kuning untuk mencapai kesan penyerlahan. Gaya CSS boleh disesuaikan dan diselaraskan mengikut keperluan sebenar untuk mencapai kesan penyerlahan yang berbeza.

4. Demonstrasi Kesan

Akhir sekali, buka penyemak imbas, muatkan fail HTML yang mengandungi kod di atas, dan anda boleh melihat kandungan yang mencapai kesan penyerlahan teks.

Dengan contoh kod ringkas di atas, kami boleh menggunakan jQuery dengan mudah untuk mencapai kesan penyerlahan teks. Pada masa yang sama, dengan mempelajari lebih banyak fungsi dan kaedah perpustakaan jQuery, anda boleh membawa lebih banyak kemudahan dan kesan kepada pembangunan web. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk mencapai penonjolan teks dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!