练习

最新推荐文章于 2021-02-13 13:55:00 发布

qq_42250804

最新推荐文章于 2021-02-13 13:55:00 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/qq_42250804/article/details/100939909

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.js"></script>

</head>
<style>

</style>
<body>
<div id="one" style="width: 300px;height: 300px">1</div>
<div id="tow">
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
<div id="san">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</div>
<button id="btn">点击</button>
    <div class="box" style="width: 300px;height: 300px;background: black;position: relative">1</div>
    <script>
        var box=document.getElementsByClassName('box');
        $(function () {
            $('#one').css({
                background:'red',
            })
        });
        $(function () {
            $('p').text("我是子元素")
            $('p')[1].style.cssText=('background:orange')
        });
        $(function () {
            $('#btn').click(function () {
                $(box).animate({
                    left:'500px',
                })
            });
        });
        $('#tow').on("click","p",function(){
            // 切换li列表样式
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
// 获取当前点击li 的下标
            let index = $(this).index() + 1;
            console.log(index);	});
        $(function () {
            $('#san').children('li:last-child').remove();
        })
    </script>
</body>
<html>

qq_42250804

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.js"></scr...
复制链接

扫一扫