jQuery练习t327，从0到1

最新推荐文章于 2025-01-17 19:26:45 发布

虾米大王

最新推荐文章于 2025-01-17 19:26:45 发布

阅读量189

点赞数

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/113842873

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

这两篇博客展示了如何使用jQuery实现点击元素时的动画效果，将div的尺寸和背景颜色改变。第一篇中，div初始尺寸为50px*50px，点击后变为150px*150px，背景色转为红色。第二篇则在点击事件中动态加载了jquery.color.js，然后同样实现元素尺寸和颜色的变化，但初始尺寸为100px*100px，最终变为200px*200px。

摘要由CSDN通过智能技术生成

t327-1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 50px;
            height: 50px;
            background-color: lightskyblue;
        }
    </style>
    <script src="../../js/jquery-3.5.1.js"></script>
    <script src="../../js/jquery.color.js"></script>
    <script>
        $(function () {
           $("div").click(function () {
               $(this).animate({
                   "width":"150px",
                   "height":"150px",
                   "background-color":"red"
               },1000);
           });
        });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

t327-2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
        }
    </style>
    <script src="../../js/jquery-3.5.1.js"></script>
    <script>
        //$.getScript()
        //优化后，动态加载js文件
        $(function () {
           $("div").click(function () {
               $.getScript("../../js/jquery.color.js");
               $(this).animate({
                   "width": "200px",
                   "height":"200px",
                   "background-color":"red"
               },1000);
           });
        });
    </script>
</head>
<body>
    <div></div>
</body>
</html>