Web应用开发实战#Day9

最新推荐文章于 2022-09-27 19:56:53 发布

JimYagYong

最新推荐文章于 2022-09-27 19:56:53 发布

阅读量71

点赞数

本文链接：https://blog.csdn.net/JimYagYong/article/details/100970862

版权

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

在这里插入图片描述