jQuery 教程 (二)

最新推荐文章于 2024-09-11 16:14:29 发布
最新推荐文章于 2024-09-11 16:14:29 发布
阅读量305 收藏 3
点赞数 12
分类专栏： javascript 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82471222/article/details/139865980
版权

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插件开发教程
we
07-10 718
如果你跟我一样，jQuery属于入门级的，那么我建议你看我下一篇jQuery教程：自己动手开发jquery插件 ，这篇插件比较容易理解和模范，适合新手开发jQuery插件。推荐你去看一看。 在逛codeproject网站的时候，突然看到一篇文章：How to write plugin in Jquery. 如果对E文好的同学 ，可以看上面的连接。 现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。 插件编写的目的是给已经有的一系列方法或函数做一个封装，以
jQuery 教程
freeking101的博客
04-26 2709
菜鸟教程 --- jQuery 教程：https://www.runoob.com/jquery/jquery-tutorial.html jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery简介 什么是 jQuery ？ jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： HTML...
jquery详细基础教程
hero_th的博客
12-22 1898
1. jquery选择器 1.基础选择器 和css中的选择器基本一致 $("div1,div2,div3") $("ul li") 后代选择器 $("ul>li") 子代选择器 2.筛选选择器 :first $('li:first') 获取第一个|i元素 :last $('li:last') 获取最后一个li元素 :eq(index) $("li:eq(2)") 获取到的1i元素中，选择索引号为2的元素,索引号index从0开始。 :odd $(
jquery教程
weixin_45991188的博客
03-08 2832
jquery教程 jQuery简介  jQuery也就是JavaScript和查询（Query）即 辅助JavaScript开发的类库。  jQuery是一个兼容多浏览器的javascript库。  核心理念是 write less,do more (写得更少,做得更多)。  jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多 JavaSc...
jQuery超详细入门教程
MsWRight的博客
05-21 4465
jquery其实总的来说东西不是很多 期间发现一点问题就是界面中使用本地存储之后，刷新后虽然数据不会丢失，但是刷新会整个页面重新渲染，有些只想在修改数据之前加载的内容也会被重新加载。 然后是我jquery总结的一些知识点 jQuery $是jQuery的别称，jQuery顶级对象 jQuery是一个js函数库，包含以下功能 html元素选取 html元素操作 css操作 html事件函数 js特效和动画 html DOM遍历和修改 AJAX Utilities 除此之外，jQuer还提供了大量的插件 j
jQuery教程
种麦南山下的博客
10-10 413
jQuery设计的宗旨是“write Less，Do More”
jQuery入门到精通学习教程，收藏我这篇就够了_jquery教程
2401_85111850的博客
05-25 396
});});});
JQuery入门学习教程
Kint的博客
02-15 1329
JQuery入门学习，包含基于JQuery的AJAX教程，适合新手小白，附带源码参考学习。
2024年最新jQuery入门到精通学习教程，收藏我这篇就够了_jquery教程
2401_84302761的博客
05-01 746
});});});
JQuery教程全集
11-25
在《JQuery教程全集》的第一章中，作者首先阐述了为何选择 JQuery 这个 JavaScript 库。随着 Web 开发技术的发展，JavaScript 的使用变得越来越普遍。然而，在没有库或框架的支持下，编写复杂的 DOM 操作和 AJAX ...
jquery基础教程中文版2015
06-26
二、jQuery选择器 jQuery的选择器是基于CSS的，用于选取HTML元素。例如，`$("#id")`选择ID为"id"的元素，`$(".class")`选择所有class为"class"的元素，`$("tagname")`选择所有tagname类型的元素。更复杂的选择器如`:...
jQuery基础教程（第二版）源码
11-14
《jQuery基础教程（第二版）源码》是一个用于学习jQuery库的配套资源，包含了多个章节的实例代码。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这个教程源码...
jquery1.4 教程二 ajax方法的改进
01-19
如果你想要使用旧的序列化方式，有三种设置方法： 代码如下: jQuery.ajaxSettings.traditional = true; jQuery.param( stuff, true ); $.ajax({ data: stuff, traditional: true }); 2 自动检测json和javascript的...
[项目][WebServer][日志设计]详细讲解
SnowK博客
09-11 4429
[项目][WebServer][日志设计]详细讲解
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 390
【代码】easyexcel模板导出并且公式自动计算的方法。
经验笔记：Web 浏览器存储手段
qq_45831414的博客
09-10 876
以上就是使用 IndexedDB 的基本步骤。IndexedDB 提供了强大的数据存储能力，并且可以通过索引来优化数据检索性能。在实际应用中，可能还需要处理更复杂的场景，比如数据迁移、错误处理等。务必确保你的代码能够妥善处理各种异常情况。
JS笔记
最新发布
2201_76100326的博客
09-11 502
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
从零开始的jQuery入门教程
2. **选择器**：在第二部分，介绍了jQuery的强大选择器，它们能帮助开发者快速准确地选取DOM元素，如ID选择器、类选择器、属性选择器等，大大提高了代码的可读性和效率。 3. **jQuery包装集**：第三部分讲解了如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员-张师傅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值