Menggunakan jQuery untuk memanipulasi tag HTML-tutorial js-php.cn

Menggunakan jQuery untuk memanipulasi tag HTML

PHPz

Lepaskan： 2024-02-25 08:57:23

asal

679 orang telah melayarinya

Menggunakan jQuery untuk memanipulasi tag HTML

Cara menggunakan jQuery untuk mengendalikan elemen label

Dalam pembangunan web, jQuery boleh digunakan untuk mengendalikan elemen label dengan mudah dan mencapai kesan dinamik dan fungsi interaktif. Artikel ini akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mengendalikan elemen label dan menyediakan contoh kod khusus.

1. Perkenalkan perpustakaan jQuery

Sebelum anda mula mengendalikan elemen tag, anda perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML terlebih dahulu. Anda boleh memperkenalkan versi terkini jQuery melalui pautan CDN, atau anda boleh memuat turun fail jQuery secara tempatan.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

Salin selepas log masuk

2. Kaedah pengendalian elemen tag yang biasa digunakan

Pilih elemen

Gunakan pemilih jQuery untuk memilih elemen tag pada halaman dengan mudah. Pemilih yang biasa digunakan termasuk:

Pemilih teg: $("NamaName")$("tagName")
类选择器：$(".className")
ID选择器：$("#idName")

// 选择class为example的元素
$(".example").css("color", "red");

// 选择id为test的元素
$("#test").hide();

Salin selepas log masuk

隐藏和显示元素

使用jQuery可以轻松地隐藏或显示页面上的元素。

// 隐藏id为test的元素
$("#test").hide();

// 显示class为example的元素
$(".example").show();

Salin selepas log masuk

添加和移除类名

通过添加和移除类名，可以实现动态改变元素样式的效果。

// 添加class为newClass的类名
$("#test").addClass("newClass");

// 移除class为oldClass的类名
$(".example").removeClass("oldClass");

Salin selepas log masuk

改变元素内容

可以使用text()和html()方法来改变元素的文本内容或HTML内容。

// 修改id为test的元素文本内容
$("#test").text("新内容");

// 修改class为example的元素HTML内容
$(".example").html("<p>新内容</p>");

Salin selepas log masuk

获取和设置属性值

使用attr()

Pemilih kelas: $(".className")

Pemilihan ID Penganjur: < code>$("#idName")

// 获取id为test的元素src属性值
var src = $("#test").attr("src");

// 设置class为example的元素href属性值
$(".example").attr("href", "https://www.example.com");

Salin selepas log masuk

Gunakan jQuery untuk menyembunyikan atau menunjukkan elemen pada halaman anda dengan mudah.

// 绑定点击事件
$("#btn").click(function() {
    alert("按钮被点击了");
});

// 绑定鼠标悬停事件
$("#hover").hover(function() {
    alert("鼠标悬停在元素上");
});

Salin selepas log masuk

Tambah dan alih keluar nama kelas





jQuery操作元素示例
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#showBtn").click(function(){
        $("#image").toggle();
    });
});
</script>

Salin selepas log masuk

text()

html()

attr()

Atas ialah kandungan terperinci Menggunakan jQuery untuk memanipulasi tag HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!