html练习5

最新推荐文章于 2022-02-02 19:52:28 发布

Monster X

最新推荐文章于 2022-02-02 19:52:28 发布

阅读量145

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44329441/article/details/100939858

版权

要求：

**1. 使用jquery修改div元素的背景色(随意颜色)
2. 使用jquery修改div的子元素p的内容为"我是子元素"
3. 使用jquery修改第二个p元素的背景色为"orange"
4. 删除列表元素中最后一个li元素
5. 点击当前的p标签,弹出相对应的元素下标
6. 利用jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动500px

源**代码：需要引用Jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery使用</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('#one').children("p:first-child").html('我是子元素');
            $('#one').css('background','blue');
            $('#one').children("p:nth-child(2)").css('background-color','orange')
            $('#one').children("li:last-child").remove();
            $("#one").on("click","p",function(){
                // 切换p列表样式
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
                // 获取当前点击p 的下标
                let index = $(this).index() + 1;
                alert(index);
            });
            $('#btn').click(function() {
                $('.box').animate({
                    left: '500px'
                })
            })
        });
    </script>
</head>
<body>
<div id="one"  onclick="" >我是第一个div
    <p id="pTag1"></p>
    <p id="pTag2">我是第二个子元素</p>
    <li>我是li元素</li>
</div>
<div class="box" style="display:  inline; width: 300px;height: 300px;background-color: orangered;position: relative">我是第二个div框</div>
<button id="btn" >点我移动Box</button>
</body>
</html>

显示效果：

在这里插入图片描述

Monster X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html练习5

要求：**1. 使用jquery修改div元素的背景色(随意颜色)2. 使用jquery修改div的子元素p的内容为"我是子元素"3. 使用jquery修改第二个p元素的背景色为"orange"4. 删除列表元素中最后一个li元素5. 点击当前的p标签,弹出相对应的元素下标6. 利用jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动50...
复制链接

扫一扫