[第七季]9.添加删除网页元素及样式表操作_搭建网页中删除表格元素-CSDN博客

本文链接：https://blog.csdn.net/zeephom/article/details/77243116

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

1.添加元素
(1)在元素里面添加
(2)在元素外面添加
2.怎么在jquery删除元素
(1)remove方法
(2)empty用法
3.改变颜色的方法
(1)红色,蓝色
(2)红色,去除红色,蓝色,去除蓝色
(3)toggle红色切换

5.自测代码

2.课堂笔记

(1)在元素里面添加
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
(2)在元素外面添加
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p:first").after(" <div>这是新添加的内容</div>");
  });

  $("#btn2").click(function(){
      var p=document.createElement("p");
      p.innerHTML="你好";
    $("ol").after(p);
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
2.怎么在jquery删除元素
(1)remove方法
<style type="text/css">
    div
    {
        width:200px;
        height:200px;
        background-color:yellow;
    }
</style>
<script>
    $(function(){
        $("button").click(function(){
            $("div").remove();
        });
    });
</script>
</head>

<body>
<div>
    <p>这是第一段话</p>
    <p>这是第二段话</p>
    <button>测试</button>
</div>
</body>
</html>
(2)empty用法
3.改变颜色的方法
(1)红色,蓝色
<style type="text/css">
    .red
    {
        color:red;

    }
    .blue
    {
        color:blue;
    }
</style>
<script>
    $(function(){
        $("button:eq(0)").click(function(){
            $("p").addClass("red");
        });
        $("button:eq(1)").click(function(){
            $("p").addClass("blue");
        });
    });
</script>
</head>

<body>
<div>
    <p class="a">这是第一段话</p>
    <p class="b">这是第二段话</p>
</div>
<button>按钮1</button><button>按钮2</button>
</body>
</html>
(2)红色,去除红色,蓝色,去除蓝色
<script>
    $(function(){
        $("button:eq(0)").click(function(){
            $("p").addClass("red");
        });
        $("button:eq(1)").click(function(){
            $("p").addClass("blue");
        });
        $("button:eq(2)").click(function(){
            $("p").removeClass("red");
        });
        $("button:eq(3)").click(function(){
            $("p").removeClass("blue");
        });
    });
</script>
</head>

<body>
<div>
    <p class="a">这是第一段话</p>
    <p class="b">这是第二段话</p>
</div>
<button>红色</button><button>蓝色</button><button>去除红色</button><button>去除蓝色</button>
</body>
</html>
(3)toggle红色切换
<style type="text/css">
    .red
    {
        color:red;

    }
    .blue
    {
        color:blue;
    }
</style>
<script>
    $(function(){
        $("button:eq(0)").click(function(){
            $("p").addClass("red");
        });
        $("button:eq(1)").click(function(){
            $("p").addClass("blue");
        });
        $("button:eq(2)").click(function(){
            $("p").removeClass("red");
        });
        $("button:eq(3)").click(function(){
            $("p").removeClass("blue");
        });
        $("button:eq(4)").click(function(){
            $("p").toggleClass("red");
        });
    });
</script>
</head>

<body>
<div>
    <p class="a">这是第一段话</p>
    <p class="b">这是第二段话</p>
</div>
<button>红色</button><button>蓝色</button><button>去除红色</button><button>去除蓝色</button><button>红色切换</button>
</body>
</html>