JS和JQuery教程

置顶 zhangsan3333

已于 2022-08-13 11:19:26 修改

阅读量207

点赞数

文章标签： jquery 动画前端

于 2022-06-15 13:30:20 首次发布

原文链接：https://blog.csdn.net/weixin_44009656/article/details/124536254?spm=1001.2014.3001.5502

版权

JS学习笔记（JavaScript基础学习必备）

一、Jquery入门（超详）

二、jQuery 选择器（超细）

三、jQuery 中的 DOM 操作（超详细）

四、jQuery 中的事件和动画(嘎嘎详细)

五、jQuery 对表单、表格的操作（走过路过瞅瞅吧）

Javascript 教程

jQuery 教程

JavaScript学习指南：JS入门教程（非常详细）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>blue</li>
    <li>white</li>
    <li>red</li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $("ul li").on("click", function () {
            $(this).clone().appendTo("ul");
        });
    });
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
</head>
<body>
<ul>
    <li>blue</li>
    <li>white</li>
    <li>red</li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $("ul li").hover(
            function () {
                $(this).css({
                    "font-size": "24px",
                });
            },
            function () {
                $(this).css({
                    "font-size": "14px",
                });
            }
        );
    });
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p>鼠标指针在: <span></span></p>

<script type="text/javascript">
    $(document).ready(function () {
        $(document).mousemove(function (event) {
            $("span").text("X: " + event.pageX + ", Y: " + event.pageY);
        });
    });
</script>
</body>
</html>