[第七季]9.添加删除网页元素及样式表操作

来源：互联网发布：淘宝二次元粉丝节编辑：程序博客网时间：2024/06/04 19:10

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>

3.课程效果图

这里写图片描述

1.代码

阅读全文

0 0