jQuery を使用して HTML タグを操作する

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>



    
    显示/隐藏图片