【Django学习笔记】JQuery介绍

JQuery是一个快速、简洁的JavaScript库，设计的目标是“写得少，做得多”。它不仅简化了JavaScript编程，还能增强用户与网站的交互，并促进跨浏览器兼容性的开发。

引入JQuery库

在HTML文件中，我们需要通过<script>标签引入JQuery库。




<!DOCTYPE html>
<html>
<head>
    <title>JQuery 示例</title>
    <!-- 引入JQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
</body>
</html>

JQuery选择器

JQuery选择器允许我们选择DOM元素进行操作。




<!DOCTYPE html>
<html>
<head>
    <title>JQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
    <button>Click me</button>
</body>
</html>

在上述示例中，当按钮被点击时，段落会被隐藏。

JQuery事件

JQuery允许我们绑定各种事件处理程序。




<!DOCTYPE html>
<html>
<head>
    <title>JQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myBtn").click(function(){
                $("p").slideToggle();
            });
        });
    </script>
</head>
<body>
    <p>这是一个段落。</p>
    <button id="myBtn">点击我</button>
</body>
</html>

在上述示例中，当按钮被点击时，段落将滑入或滑出。

JQuery效果

JQuery提供了一系列的效果，如淡入淡出、滑入滑出等。




<!DOCTYPE html>
<html>
<head>
    <title>JQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").fadeToggle();
            });
        });
    </script>
</head>
<body>
    <p>这是一个段落。</p>
    <button>点击我</button>
</body>
</html>

在上述示例中，当按钮被点击时，段落将淡入或淡出。

【Django学习笔记】JQuery介绍

评论已关闭

推荐阅读