首页 > 其他分享 >jQuery 教程 (二)

jQuery 教程 (二)

时间：2024-06-22 18:57:37浏览次数：17  
标签：jQuery function 教程 animate 方法 click 1000

jQuery 事件

常见 DOM 事件：

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
hover

jQuery 效果

jQuery 效果- 隐藏和显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
    <title>jQuery 效果- 隐藏和显示</title>
</head>
<body>
    <h1>jQuery 效果- 隐藏和显示</h1>
    <button id="btn1">隐藏</button>
    <button id="btn2">显示</button>
    <p id="p1">这是一个段落</p>
    <script>
        $(document).ready(function(){
            // 隐藏
            $("#btn1").click(function(){
                $("#p1").hide();
            });
            // 显示
            $("#btn2").click(function(){
                $("#p1").show();
            });
        });
    </script>
    
</body>
</html>

jQuery 效果 - 淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
    <title>jQuery 效果 - 淡入淡出</title>
</head>
<body>
    <h1>jQuery 效果 - 淡入淡出</h1>
    <p class="p1"> jQuery fadeIn() 用于淡入已隐藏的元素。</p>
    <p class="p2"> jQuery fadeOut() 方法用于淡出可见元素。</p>
    <p class="p3">  jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。   </p>
    <p class="p4">  jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。   </p>
    <script>
        $(document).ready(function(){
            $(".p1").hover(function(){

                $(this).fadeOut(1000);   //淡出
            }, function(){
                $(this).fadeIn(1000);    //淡入
            });
            $(".p2").hover(function(){
                $(this).fadeIn(1000);    //淡入
            }, function(){
                $(this).fadeOut(1000);   //淡出
            });
            $(".p3").hover(function(){
                $(this).fadeToggle(1000);    //淡入淡出
            });
            $(".p4").hover(function(){
                $(this).fadeTo(1000, 0.5);    //淡入淡出
            });
        });
    </script>
    
</body>
</html>

jQuery 效果 - 滑动

jQuery slideDown() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
    <title>jQuery slideDown() 方法</title>
</head>
<body>
    <h1>jQuery slideDown() 方法</h1>
    <p>jQuery slideDown() 方法用于显示隐藏的元素。</p>
    <button id="btn">点击显示/隐藏</button>
    <div id="div1" style="display:none;">
        这是隐藏的元素，点击按钮后将显示。
    </div>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#div1").slideDown();
            });
        });
    </script>
    
</body>
</html>

jQuery slideUp() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
    <title>jQuery slideUp() 方法</title>
</head>
<body>
    <h1>jQuery slideUp() 方法</h1>
    <p>jQuery slideUp() 方法用于隐藏或显示元素。</p>
    <button id="btn">点击显示/隐藏</button>
    <div id="box">这是要隐藏或显示的元素。</div>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#box").slideUp(1000);
            });
        });
    </script>
    
</body>
</html>

jQuery slideToggle() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
    <title>jQuery slideToggle() 方法</title>
</head>
<body>
    <h1>jQuery slideToggle() 方法</h1>
    <p>点击按钮，显示或隐藏段落：</p>
    <button id="btn">显示/隐藏</button>
    <p id="p1">jQuery slideToggle() 方法可以用来显示或隐藏 HTML 元素。</p>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#p1").slideToggle(1000);
            });
        });
    </script>
</body>
</html>

jQuery 效果- 动画

jQuery 动画 - animate() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
    <title>jQuery 动画 - animate() 方法</title>
</head>
<body>
    <div id="box" style="background:#98bf21;height:200px;width:200px;position:absolute;">
        <p>jQuery 动画 - animate() 方法</p>
    </div>

    <script>
        $(document).ready(function(){
            $("#box").click(function(){
                $(this).animate({
                    width: '400px',
                    height: '400px',
                    left: '250px',
                    top: '100px',
                    fontSize: '45px'
                }, 1000);
            });
        });
    </script>
</body>
</html>

jQuery animate() - 使用相对值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
        </script>
        <title>jQuery 动画 - animate() 方法</title>
    </head>
    <body>
        <div id="box" style="background:#98bf21;height:200px;width:200px;position:absolute;">
            <p>jQuery 动画 - animate() 方法-使用相对值</p>
        </div>

        <script>
            $(document).ready(function(){
                $("#box").click(function(){
                    $(this).animate({
                        width: '+=200px',
                        height: '+=200px',
                        left: '250px',
                        top: '100px',
                        fontSize: '+=20px'
                    }, 1000);
                });
            });
        </script>
    </body>
    </html>

jQuery animate() - 使用预定义的值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
        </script>
        <title>jQuery animate() - 使用预定义的值</title>
    </head>
    <body>
        <div id="box">Hello World!</div>
        <button id="btn">toggle</button>
        <button id="btn1">show</button>
        <button id="btn2">hide</button>

        <script>
            $(document).ready(function(){
                $("#btn").click(function(){
                    $("#box").animate({
                        height: "toggle",
                    }, 1000);
                });
                $("#btn1").click(function(){
                    $("#box").animate({
                        height: "show",
                    }, 1000);
                });
                $("#btn2").click(function(){
                    $("#box").animate({
                        height: "hide",
                    }, 1000);
                });

            });
        </script>
    </body>
    </html>

jQuery animate() - 使用队列功能

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
        </script>
        <title>jQuery animate() - 使用队列功能</title>
    </head>
    <body>
        <div id="box" style="background-color: brown; height: 100px; width: 100px;  top: 50px; left: 50px;">
            <p>Hello World!</p>
        </div>
        <button id="btn">点击切换动画</button>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                var div=$("div");
                
                div.animate({height:'300px',opacity:'0.4'},"slow");
                div.animate({width:'300px',opacity:'0.8'},"slow");
                div.animate({height:'100px',opacity:'0.4'},"slow");
                div.animate({width:'100px',opacity:'0.8'},"slow");
                });
            });
        </script>
        
    </body>
    </html>

jQuery 停止动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
        </script>
        <title>jQuery stop() 方法</title>
    </head>
    <body>
        <button id="btn">点击停止</button>
        <p id="p" style="background-color: yellow; position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; opacity: 1;">jQuery stop() 方法</p>
        <script>

            $("#p").click(function() {
                $(this).animate({
                    left: "200px",
                    width: "500px",
                    height: "500px",
                    opacity: 0.5
                }, 5000);
            });

            $("#btn").click(function() {
                $("#p").stop().animate({
                    left: "200px"
                }, 5000);
            });
        </script>
    </body>
    </html>

jQuery Callback 方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
        </script>
        <title>jQuery Callback 方法</title>
    </head>
    <body>
        <button id="btn">点我</button>
        <script>
            $("#btn").click(function(){
                $.ajax({
                    url: "test.php",
                    type: "POST",
                    data: {
                        name: "张三",
                        age: 20
                    },
                    success: function(data){
                        alert(data);
                    },
                    error: function(){
                        alert("出错了");
                    }
                });
            });
        </script>
    </body>
    </html>

jQuery - 链(Chaining)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
        </script>
        <title>jQuery - 链(Chaining),通过 jQuery，可以把动作/方法链接在一起。</title>
    </head>
    <body>
        <div id="box">
            <p>Hello, world!</p>

        </div>

        <script>
            $(document).ready(function() {
                $("#box").css("background-color", "yellow")
                   .css("padding", "20px")
                   .css("border", "1px solid black")
                   .append("<p>jQuery is awesome!</p>");
            });
        </script>
    </body>
    </html>

标签：jQuery,function,教程,animate,方法,click,1000
From： https://blog.csdn.net/2401_82471222/article/details/139865980

相关文章

  • 【图文】ROG魔霸3硬件更新教程：清灰换硅脂，液金，加装硬盘ssd
    新三年，旧三年，缝缝补补又三年~~准备1.魔霸3一台2.防静电：手套，静电手环，类似的都可以3.工具：螺丝刀，酒精棉片（大量，仅清灰不必），小刷子（化妆的那种很合适）4.液金，绝缘硅脂，硅脂5.ssd，ssd排线清灰1.关机，拆掉后盖螺丝。左上角和右上角螺丝没法彻底拆下，对称拧松即可。最边上的螺......
  • Javascript 教程
     JavaScript 输出使用 window.alert() 弹出警告框<!DOCTYPEhtml><html><head><metacharset="UTF-8"> <title>使用window.alert()弹出警告框</title></head><body> <script>window.alert(&qu......
  • NSIS 入门教程 (一)
     介绍大多数应用程序都附带一个安装程序，它将所需的文件复制到正确的文件夹中，创建注册表项，并提供卸载例程以（希望）从计算机中彻底删除应用程序.有多种解决方案可以为自主开发的应用程序配备安装程序。除了InstallShield或Wise等商业产品外，还有开源安装工具NullsoftScriptable......
  • NSIS 入门教程 (二)
    引言   在教程的第一部分中创建第一个安装程序后,我们还将需要删除其安装区段中已安装的文件。我们还将展示更多安装引导页面，让用户有机会选择安装的某些部分。   卸载   创建一个安装程序.可以干净的卸载,不仅是一种礼貌，对于程序的开发与发行方也有很多好处: ......
  • 全网最好看的单细胞umap图绘制教程
    作者按大家或许都曾被Nature,Science上的单细胞umap图吸引过，不免心生崇拜。在这里，我们将介绍一种简单方便的顶刊级umap图可视化全文字数|预计阅读时间:2000|5min——Starlitnightly（星夜）环境加载我们先导入一些必须的依赖包importomicverseasovimportscanpyassci......
  • Stable Diffusion部署教程，开启你的AI绘图之路
    本文环境系统：Ubuntu20.0464位内存：32G环境安装2.1安装GPU驱动在英伟达官网根据显卡型号、操作系统、CUDA等查询驱动版本。官网查询链接https://www.nvidia.com/Download/index.aspx?lang=en-us注意这里的CUDA版本，如未安装CUDA可以先选择一个版本，稍后再安装CUDA.点击S......
  • MyBatis-Plus入门教程（一）
    MyBatis-Plus是一个MyBatis的增强工具，在MyBatis的基础上为其提供了许多便捷功能，使开发者能够更快速、高效地进行数据库操作。MyBatis-Plus简介1.什么是MyBatis-Plus？MyBatis-Plus（简称MP）是一个MyBatis的增强工具，它旨在简化开发过程，减少重复代码，提高开发效率。MP通......
  • Mybatis-plus入门教程（二）
    第一步：环境准备1.添加依赖确保在项目的构建文件中添加MyBatis-Plus依赖。Maven:<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3.4</version></dependency>Gradle:im......
  • Docker部署Nginx1.21.5（保姆级图文教程）
    系列文章目录Docker部署Nginx1.21.5（保姆级图文教程）Docker部署MySQL8.3.0（保姆级图文教程）文章目录一、环境二、拉取镜像2.1查找DockerHub上的nginx镜像2.2拉取Nginx镜像2.3查看Nginx镜像三、在宿主机创建目录四、启动临时容器，拷贝nginx容器内配置文件4.1启动......
  • Docker部署MySQL8.3.0（保姆级图文教程）
    系列文章目录Docker部署Nginx1.21.5（保姆级图文教程）Docker部署MySQL8.3.0（保姆级图文教程）文章目录一、环境二、拉取镜像2.1查找DockerHub上的MySQL镜像2.2拉取MySQL镜像2.3查看MySQL镜像三、在宿主机创建目录3.1创建挂载目录3.2创建配置文件四、启动MySQL......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99