【JS常用代码】Div层处理

最新推荐文章于 2022-08-04 22:34:58 发布

原创最新推荐文章于 2022-08-04 22:34:58 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #toggle #div #ViewUI

javascript代码大全专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用jQuery操作DOM元素的具体实例，包括显示、隐藏、切换显示状态、获取内容、设置内容、删除元素、清空元素、添加样式、删除样式等常见操作。

//层显示
$("#btnshow").click(function()

{
$("#div1").show();

});

//层隐藏

$("#btnhide").click(function()
{
$("#div1").hide();

});

//层显示隐藏相互切换
$("#btntoggle").click(function()
{
$("#div1").toggle();

});

//获取层内容
$("#btndivgethtml").click(function()
{
var divcontent=$("#div1").html();
alert("层的内容为：\n"+divcontent+"");

});

//给层赋值

$("#btndivsethtml").click(function()
{
$("#div1").html("<p>HELLO WORLD!</p>");

});

//层删除
$("#btndivsethtml").click(function()
{
$("#div1").remove();

});

//层清空
$("#btndivsethtml").click(function()
{
$("#div1").empty();

});

//添加新的样式到层
$("#btndivaddClass").click(function()
{
$("#div1").addClass("mybox");

});

//删除指定样式到层
$("#btndivremoveClass").click(function()
{
$("#div1").removeClass("mybox");
});