jQuery 学习6 操纵元素显示效果的函数

让我来详细讲解一下 " jQuery 学习6 操纵元素显示效果的函数" 的完整攻略。

1. 添加和移除元素类名

我们可以使用 jQuery 来添加和移除元素的类名。以下是相关的两个函数：

addClass(className)

该函数可以向选定的元素添加一个或多个类名。函数接受一个参数 className，表示要添加的类名。如果需要添加多个类名，可以使用空格分隔它们。

$("p").addClass("myClass");

removeClass(className)

该函数可以从选定的元素中移除一个或多个类名。函数接受一个参数 className，表示要移除的类名。如果需要移除多个类名，可以使用空格分隔它们。

$("p").removeClass("myClass");

2. 显示和隐藏元素

我们可以使用 jQuery 来显示和隐藏元素。以下是相关的两个函数：

show(speed, easing, callback)

该函数可以显示选定的元素。函数的第一个参数 speed 表示动画的速度。默认值为 400。函数的第二个参数 easing 表示动画效果。默认值为 swing。函数的第三个参数 callback 是一个回调函数，在动画完成后执行。

$("p").show();

hide(speed, easing, callback)

该函数可以隐藏选定的元素。函数的参数与 show() 函数相同，不再赘述。

$("p").hide();

3. 淡入和淡出元素

我们可以使用 jQuery 来淡入和淡出元素。以下是相关的两个函数：

fadeIn(speed, easing, callback)

该函数可以淡入选定的元素。函数的参数与 show() 函数相同，不再赘述。

$("p").fadeIn();

fadeOut(speed, easing, callback)

该函数可以淡出选定的元素。函数的参数与 fadeIn() 函数相同，不再赘述。

$("p").fadeOut();

示例说明

下面是两个示例，展示了如何使用 addClass()、 removeClass()、show() 和 hide() 函数。

示例一

该示例演示了如何添加和移除元素类名，以及如何显示和隐藏元素。

<!DOCTYPE html>
<html>
<head>
    <title>示例一</title>
    <style>
        .myClass {
            color:blue;
            font-size:24px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 添加类名
            $("p").addClass("myClass");
            // 移除类名
            $("p").removeClass("myClass");
            // 显示元素
            $("#show").click(function(){
                $("p").show();
            });
            // 隐藏元素
            $("#hide").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <p>Hello World!</p>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
</body>
</html>

示例二

该示例演示了如何使用 fadeIn() 和 fadeOut() 函数来淡入和淡出元素。

<!DOCTYPE html>
<html>
<head>
    <title>示例二</title>
    <style>
        p {
            display:none;
            font-size:24px;
            color:blue;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 淡入元素
            $("#fadeIn").click(function(){
                $("p").fadeIn();
            });
            // 淡出元素
            $("#fadeOut").click(function(){
                $("p").fadeOut();
            });
        });
    </script>
</head>
<body>
    <p>Hello World!</p>
    <button id="fadeIn">淡入</button>
    <button id="fadeOut">淡出</button>
</body>
</html>

以上就是 " jQuery 学习6 操纵元素显示效果的函数" 的完整攻略，希望对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 学习6 操纵元素显示效果的函数 - Python技术站