jQuery入门教程，一天学会jQeury，附代码Demo和视频教程

最新推荐文章于 2024-06-12 11:13:48 发布
最新推荐文章于 2024-06-12 11:13:48 发布
阅读量578 收藏 21
点赞数 25
分类专栏： demo 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46085118/article/details/136156213
版权

文章目录

一、视频教程

二、事件

1、click事件

<html>
    <head>
        <title>click事件</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <div id="a">
            <p>
                <span id="luo">luo</span>
            </p>
        </div>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#luo").click(function (){
                    alert(123);
                })
            }
        )
    </script>
</html>

2、jQuery选择器

<html>
    <head>
        <title>jQuery选择器</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <div id="a">
            abc
        </div>
		<div class="c">a</div>
		<div class="c">b</div>
		<div class="c">c</div>
        <div id="d">
            <p>
                p标签里面的值
            </p>
        </div>
        <div id="e">
            <p>
                <span>第一个span</span>
                <span>第二个span</span>
                <span>第三个span</span>
            </p>
        </div>
    </body>
    <script>
        //原生js写法
		// alert(document.getElementById("a").innerHTML);
		// alert(document.getElementsByClassName("c")[0].innerHTML);
        //jQuery写法
        $(document).ready(
            function (){
                alert($("#a").html());
                alert($(".c:eq(0)").html());
                //获取第五个div的值
                //alert($("div:eq(4)").html());
                //获取div标签id为d下面第一个p标签内的值
                //alert($("div#d p:eq(0)").html());
                //获取div标签id为e下面第一个p标签第二个span标签内的值
                //alert($("div#e p:eq(0) span:eq(1)").html());
            }
        )
    </script>
</html>

3、hover事件

<html>
    <head>
        <title>hover事件</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <span id="luo">luo</span>
    </body>
    <script>
        $(document).ready(
            function (){
                // hover 方法需要传入两个函数，第一个是悬浮的时候触发，第二个是离开的时候触发
                $("#luo").hover(
                    function (){
                        $(this).html("123");
                    },
                    function () {
                        $(this).html("abc");
                    }
                )
            }
        )
    </script>
</html>

4、submit提交事件

<html>
    <head>
        <title>submit提交事件</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <form id="f" action="https://www.baidu.com">
            <input type="text" name=""  id="name">
            <input type="submit" value="提交">
        </form>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#f").submit(
                    function (e){
                        if($("#name").val() == "百度"){
                            alert("是百度");
                            return true;
                        }else{
                            alert("不是百度");
                            return false;
                        }
                    }
                )
            }
        )
    </script>
</html>

5、触发事件

<html>
    <head>
        <title>触发事件</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <div onclick="myclick()" style="width: 100px;height: 100px;background-color: red;"></div>
        <form id="f" action="https://www.baidu.com">
            <input type="text" name=""  id="name">
            <input type="submit" value="提交">
        </form>
    </body>
    <script>
        function myclick(){
            alert("我要触发submit事件");
            $("#f").submit();
        }
        $(document).ready(
            function (){
                $("#f").submit(
                    function (e){
                        if($("#name").val() == "百度"){
                            alert("是百度");
                            return true;
                        }else{
                            alert("不是百度");
                            return false;
                        }
                    }
                )
            }
        )
    </script>
</html>

6、隐藏和显示的效果

<html>
    <head>
        <title>隐藏和显示的效果</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <p id="a">abc</p>
        <button id="h">hide</button>
        <button id="s">show</button>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#h").click(
                    function (){
                        $("#a").hide();
                    }
                );
                $("#s").click(
                    function (){
                        $("#a").show();
                    }
                )
            }
        )
    </script>
</html>

7、使用toggle显示和隐藏

<html>
    <head>
        <title>使用toggle显示和隐藏</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <p id="a">abc</p>
        <button id="t">toggle</button>
        <button id="h">hide</button>
        <button id="s">show</button>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#h").click(
                    function (){
                        $("#a").hide();
                    }
                );
                $("#s").click(
                    function (){
                        $("#a").show();
                    }
                );
                $("#t").click(
                    function (){
                        $("#a").toggle();
                    }
                )
            }
        )
    </script>
</html>

8、给隐藏和显示增加回调函数和执行时间

<html>
    <head>
        <title>给隐藏和显示增加回调函数和执行时间</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <p id="a">abc</p>
        <button id="t">toggle</button>
        <button id="h">hide</button>
        <button id="s">show</button>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#h").click(
                    function (){
                        $("#a").hide(3000,function (){
                            alert("经过3秒，完全消失!")
                        });
                    }
                );
                $("#s").click(
                    function (){
                        $("#a").show(1000);
                    }
                );
                $("#t").click(
                    function (){
                        $("#a").toggle();
                    }
                )
            }
        )
    </script>
</html>

9、淡入淡出fadeln和fadeOut

<html>
    <head>
        <title>淡入淡出fadeln和fadeOut</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <p id="a">abc</p>
        <button id="t">fadeToggle</button>
        <button id="out">fadeOut</button>
        <button id="in">fadeln</button>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#out").click(
                    function (){
                        $("#a").fadeOut(3000,function (){
                            alert("经过3秒，完全消失!")
                        });
                    }
                );
                $("#in").click(
                    function (){
                        $("#a").fadeIn(1000);
                    }
                );
                $("#t").click(
                    function (){
                        $("#a").fadeToggle();
                    }
                )
            }
        )
    </script>
</html>

10、滑入和滑出slideUp和slideDown

<html>
    <head>
        <title>滑入和滑出slideUp和slideDown</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <p id="a">abc</p>
        <button id="t">slideToggle</button>
        <button id="up">slideUp</button>
        <button id="down">slideDown</button>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#up").click(
                    function (){
                        $("#a").slideUp(3000,function (){
                            alert("经过3秒，完全消失!")
                        });
                    }
                );
                $("#down").click(
                    function (){
                        $("#a").slideDown(1000);
                    }
                );
                $("#t").click(
                    function (){
                        $("#a").slideToggle();
                    }
                )
            }
        )
    </script>
</html>

三、动画效果

1、动画效果animate

<html>
    <head>
        <title>动画效果animate</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
    <div id="a" style="background-color: blue;width: 200px;height: 200px;position: relative;top: 10px;left: 10px;">abc</div>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#a").animate({
                    "left":"200px",
                    "top":"300px"
                })
            }
        )
    </script>
</html>

2、修改动画时间

<html>
    <head>
        <title>修改动画时间</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
    <div id="a" style="background-color: blue;width: 200px;height: 200px;position: relative;top: 10px;left: 10px;">abc</div>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#a").animate({
                    "left":"200px",
                    "top":"300px"
                },4000)
            }
        )
    </script>
</html>

3、动画修改字体大小fontSize

<html>
    <head>
        <title>动画修改字体大小fontSize</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
    <div id="a" style="background-color: blue;width: 200px;height: 200px;position: relative;top: 10px;left: 10px;">abc</div>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#a").animate({
                    "left":"200px",
                    "top":"300px",
                    "fontSize":"50px"
                },4000)
            }
        )
    </script>
</html>

4、动画修改宽高

<html>
    <head>
        <title>动画修改字体大小fontSize</title>
        <meta name="viewport" content="width=device-with,initial-scale=1,maximum-scale=1">
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
    <div id="a" style="background-color: blue;width: 200px;height: 200px;position: relative;top: 10px;left: 10px;">abc</div>
    </body>
    <script>
        $(document).ready(
            function (){
                $("#a").animate({
                    "left":"200px",
                    "top":"300px",
                    "width":"20px",
                    "height":"20px",
                    "fontSize":"50px"
                },4000)
            }
        )
    </script>
</html>
北风toto
关注
  • 25
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三阶段P114~P187（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑 马pink老师前端入门基础视频教程（持续更新）
qq_31645143的博客
08-06 562
JavaScript课堂笔记JavaScript函数1. 函数的概念2. 函数的使用2.1 声明函数 JavaScript函数 1. 函数的概念 在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。 虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS中的函数\color{red}{JS 中的函数}JS中的函数。 函数：\color{red}{函数：}函数：就是封装了一段可被重复调用执行的代码块\color{red}{可被重复
《jQuery精品教程视频》视频目录
weixin_34233856的博客
08-07 144
  \day01\03-视频\02-使用js的缺点.avi; \day01\03-视频\03-jQuery初体验.avi; \day01\03-视频\04-什么是jQuery.avi; \day01\03-视频\05-jQuery版本问题.avi; \day01\03-视频\06-jQuery入口函数的解释.avi; \day01\03-视频\07-jq对象与DOM对象的区别.av...
学习jQuery的免费资源：电子书、视频、教程和博客
weixin_30800807的博客
12-27 70
jQuery毫无疑问是目前最流行的JavasScript库。排名最前的网站中70%使用了jQuery，并且jQuery也成为了Web开发的标准。如果你想找Web开发方面的工作，了解jQuery会大大的给你加分。 到目前为止教学资源无论从质量还是获取途径上都获得了进步。换句话说，现在就是学习web开发的最佳时机。本文将为大家提供一系列的资源。我多希望我学习jQuery的时候也有这些资源啊，但是已经...
python教程 it教程网_it教程网Python实战班视频免费下载
weixin_39870132的博客
12-04 158
教程内容：第一章内容Hello Python上手简单脚本游戏 图形 WEB 你能想到的方方面面PYTHON都可以实现github上python的项目也足够多运行速度不是瓶颈课程实战目标python的基础,掌握基本的编程思想,具体的任务ACCESS_LOG日式处理-url ip 访问状态维度,统计访问次数排序,打印出访问最多次数的前十简单的CMDB基于FLASK数据库MYSQL前端JQUERY+BO...
Chrome 插件开发，入门Demo
热门推荐
小单的博客专栏
04-19 2万+
1、Chrome扩展文件Chrome扩展文件以.crx为后缀名，在Google Chrome扩展官方网站下载扩展时，Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\Us
python自动化运维视频_最新python自动化运维实战视频教程完整版
weixin_39738380的博客
11-20 195
下载服务器：五号服务器---VIP资料下载八区\VIP专题教程二区游客，如果您要查看本帖隐藏内容请回复学习使用流行的zabbix、Ansible、Git、Docker、Rancher、ELK等开源框架与工具，和最广泛的django框架为基础，来构造企业级的运维自动化解决方案．最新python自动化运维实战视频教程完整版2017-9-3 15:51:55 上传下载附件 (25.27 KB)├─pyt...
python视频实战_reboot第五期Python实战班视频_IT教程网
weixin_39614521的博客
12-08 111
资源名称：reboot第五期Python实战班视频教程内容：第一章内容Hello Python上手简单脚本游戏 图形 WEB 你能想到的方方面面PYTHON都可以实现github上python的项目也足够多运行速度不是瓶颈课程实战目标python的基础,掌握基本的编程思想,具体的任务ACCESS_LOG日式处理-url ip 访问状态维度,统计访问次数排序,打印出访问最多次数的前十简单的CMDB基...
React 入门实例教程
红豆和绿豆的博客
08-02 2634
http://www.ruanyifeng.com/blog/2015/03/react.html 阮一峰的网络日志 » 首页 » 档案 上一篇：使用 Make 构建网 下一篇：尾调用优化       分类：   JavaScript React 入
jquery插件及大量实例
hubowei的专栏
11-14 606
地址：http://www.ajaxsamples.cn/html/list4_1.html jQuery插件-Cycle Plugin,图片循环播放，酷，另类 (2008-9-23 18:50:15) jQuery UI-单选框,多选框优化.Radiobutton,Checkbox (2008-9-23 18:48:23) jQuery插件-CrossSlide，图片平滑切换，
jquery教程15天学会jquery
07-22
资源名称：jquery教程 15天学会jquery资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
jQueryEasyUI入门视频教程【20讲】
07-22
教程名称：jQuery EasyUI入门视频教程【20讲】课程目录：【】1__JQuery实战视频教程_页面加载时弹出一个对话框【】2_JQuery实战视频教程_点击时弹出一个对话框【】30__JQuery实战视频教程_UI动画效果【】3_JQuery...
【新手入门】PHP下的jQuery网站开发视频教程
07-22
教程名称：【新手入门】 PHP下的jQuery 网站开发视频教程课程目录：【】01-昨天内容回顾【】02-介绍【】02-昨天作业总结【】03-$符号由来【】03-事件绑定的三种形式【】03-简单使用【】04-jquery对象与dom对象互调...
jquery 入门教程 [翻译] 推荐
10-29
此文以实例为基础一步步说明了jQuery的工作方式。现以中文翻译（添加我的补充说明）如下。如有相关意见或建议请 EMAIL 告知。或者在 BLOG中留言。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 380
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 540
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 262
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 350
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
jquery ajax教程
05-16
jQuery是一个流行的JavaScript库，它提供了一种简单的方式来处理浏览器中的DOM操作、事件处理、动画效果和AJAX请求等。其中，AJAX是一种在不刷新页面的情况下向服务器发送请求和接收响应数据的技术。 jQuery中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值