秤砣小组钟—3day02

最新推荐文章于 2019-09-22 20:42:46 发布

@白少爷

最新推荐文章于 2019-09-22 20:42:46 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/ZMY_King/article/details/100979897

版权

@工商web实战开发软件1722秤砣小组钟—3day02
1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3day02</title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background: #2aabd2;
        }
    </style>
</head>
<body>
<script src="jquery/jquery-3.4.1.min.js"></script>
<div id="div">

</div>
<button>变色</button>
<script>
    $('button').click(function () {
        $('div').css('background','red');
    })
</script>
</body>
</html>

效果图
在这里插入图片描述

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 200px;height: 200px; background-color: yellowgreen;">
    <p>大月</p>
</div>
<script src="../jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $('div').text("我是子元素");
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3day02</title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background: #2aabd2;
        }
    </style>
</head>
<body>
<script src="jquery/jquery-3.4.1.min.js"></script>
<p style="height: 50px;width: 100px;background: red">大月</p>
<p2 style="height: 50px;width: 100px;background: red">二月</p2>
<button>修改</button>
<script>
    $('button').click(function () {
        $('p2').css("background","orange");
    })
</script>
</body>
</html>

效果图
在这里插入图片描述

4.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3day02</title>
</head>
<body>
<script src="jquery/jquery-3.4.1.min.js"></script>
<button>删除</button>
<div>
<ul>
    <li1>
        <a href="#">PHH</a>
    </li1>
    <li2>
        <a href="#">JAVA</a>
    </li2>
    <li3>
        <a href="#">C++</a>
    </li3>
</ul>
</div>
<script>
$(function () {
    $('button').click(function () {
        $(li3).empty();
    })
})
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq隐藏显示</title>
</head>
<body>
<p id="hideText" style="display:none;">文本</p>
<button id="showBtn">按钮</button>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
      var flag=false;
        $('#showBtn').click(function () {
            if(!flag){
                $('#hideText').show();
                flag=true;
            }else {
                $('#hideText').toggle();//hide()和toggle()会显示出同一种效果；
                flag=false;
            }
        })
    })
    </script>
</body>
</html>

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({
                left:'500px',
                height:'100px',
                width:'100px'
            });
        });
    });
</script>
<button>开始动画</button>
<div style="background:blue;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

效果图
在这里插入图片描述

@白少爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
秤砣小组钟—3day02

@工商web实战开发软件1722秤砣小组钟—3day021.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3day02</title> <style> #div{ ...
复制链接

扫一扫