03_18_JavaWeb||day21_JQuery高级||day21_JQuery高级

已于 2022-05-20 09:41:03 修改
阅读量115 收藏
点赞数
分类专栏： 笔记 文章标签： jquery
于 2020-05-11 21:22:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40572023/article/details/106062844
版权

今日内容：

1. JQuery 高级
	1. 动画
	2. 遍历
	3. 事件绑定
	4. 案例
	5. 插件

JQuery 高级

  1. 动画
    1. 三种方式显示和隐藏元素
      1. 默认显示和隐藏方式
        1. show([speed,[easing],[fn]])
          1. 参数：
            1. speed：动画的速度。==三个预定义的值(“slow”,“normal”, “fast”)==或表示动画时长的毫秒数值(如：1000)
            2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
              • swing：动画执行时效果是 先慢，中间快，最后又慢
              • linear：动画执行时速度是匀速的
            3. fn：在动画完成时执行的函数，每个元素执行一次。
        2. hide([speed,[easing],[fn]])
        3. toggle([speed],[easing],[fn])
      2. 滑动显示和隐藏方式
        1. slideDown([speed],[easing],[fn])
        2. slideUp([speed,[easing],[fn]])
        3. slideToggle([speed],[easing],[fn])
      3. 淡入淡出显示和隐藏方式
        1. fadeIn([speed],[easing],[fn])
        2. fadeOut([speed],[easing],[fn])
        3. fadeToggle([speed,[easing],[fn]])
      • 综合代码演示：
            <script>
        //隐藏div
        function hideFn() {
            /*$("#showDiv").hide("slow", "swing", function () {
                alert("隐藏了");
            })*/

            //默认方式
            //$("#showDiv").hide("slow", "swing");

            //滑动方式
            //$("#showDiv").slideUp("slow");

            //淡出方式
            $("#showDiv").fadeOut("normal");
        }

        //显示div
        function showFn() {
            /*$("#showDiv").show("slow", "swing", function () {
                alert("显示了");
            })*/

            //默认方式
            //$("#showDiv").show("slow", "swing");

            //滑动方式
            //$("#showDiv").slideDown();

            //淡入方式
            $("#showDiv").fadeIn("normal");
        }

        //切换div显示和隐藏
        function toggleFn() {
            //默认方式
            //$("#showDiv").toggle("slow");

            //滑动方式
            //$("#showDiv").slideToggle();

            //淡入淡出方式
            $("#showDiv").fadeToggle("normal");
        }
    </script>
  2. 遍历
    1. js的遍历方式
      • for(初始化值;循环结束条件;步长)
      • 代码演示：
            <script type="text/javascript">

        $(function () {
            //js的遍历方式
            //1. 获取所有的ul下面的li
            var citys = $("#city li");
            //2. 遍历li
            for (var i = 0; i < citys.length; i++) {
                if("上海" == citys[i].innerHTML){
                    //break;
                    //continue;
                }
                //获取内容
                alert(i + ":" + citys[i].innerHTML);
            }
        })

    </script>
    2. jq的遍历方式
      1. jq对象.each(callback)【前面对象只能是jq对象】
        • callback是回调函数
        1. 语法：
          • jquery对象.each(function(index,element){});
            • index:就是元素在集合中的索引
            • element：就是集合中的每一个元素对象
            • this：集合中的每一个元素对象
        2. 回调函数返回值：
          • false:如果当前function返回为false，则结束循环(break)。
          • true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
        • 代码演示：
              <script type="text/javascript">

        $(function () {
            //jq对象.each(callback)遍历方式
            //1. 获取所有的ul下面的li
            var citys = $("#city li");
            //2. 遍历li
            //3.1 获取li对象的第一种方式(不能获取索引)-->this
            /*citys.each(function () {
                alert(this.innerHTML);
                //下面就将this(js对象)转为jq对象来调用html方法
                alert($(this).html);
            })*/

            //3.2 获取li对象的第二种方式-->在回调函数中定义参数 index 和 element
            citys.each(function (index, element) {
                //element也是一个js对象，需要调用innerHTML
                //alert(index + ":" + element.innerHTML);
                //下面就将element(js对象)转为jq对象来调用html方法

                //如果是上海，则结束循环
                if("上海" == $(element).html()){
                    //false:如果当前function返回为false，则结束循环(break)。
                    //true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
                    return false;
                }
                alert(index + ":" + $(element).html());
            })
        })

    </script>
      2. $.each(object, [callback])【参数可以是js和jq对象–>也称为全局遍历】
        • 代码演示：
              <script type="text/javascript">

        $(function () {
            //$.each(object, [callback])【参数可以是js和jq对象-->也称为全局遍历】
            //1. 获取所有的ul下面的li
            var citys = $("#city li");
            //2. 遍历li
            //3.1 获取li对象的第一种方式(不能获取索引)-->this
            /*$.each(citys, function () {
                //alert(this.innerHTML);
                alert($(this).html());
            })*/
            //3.2 内容和-->jq对象.each(callback)一样了
            $.each(citys, function (index, element) {
                alert(index + ":" + element.innerHTML);
            })
        })

    </script>
      3. for…of: jquery 3.0 版本之后提供的方式
        • for(元素对象 of 容器对象)
        • 代码演示：
              <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
    
            $(function () {
                //for..of：JQuery3.0版本之后才可以
                //1. 获取所有的ul下面的li
                var citys = $("#city li");
                //2. 遍历li
                for(li of citys){
                    alert($(li).html());
                }
            })
    
        </script>
    </head>
    <body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
    </body>
    </html>
  3. 事件绑定
    1. jquery标准的绑定方式
      • jq对象.事件方法(回调函数)；
      • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
        • jq对象.focus(); //默认不写是让，，文本输入框获得焦点
        • 表单对象.submit();//让表单提交
      • 代码演示：
            <script type="text/javascript">
        $(function () {
            //1. 获取name对象，绑定click对象
            /*$("#name").click(function () {
                alert("我被点击了");
            })*/

            //2. 给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
            /*$("#name").mouseover(function () {
                alert("鼠标来了。。。");
            })
            $("#name").mouseout(function () {
                alert("鼠标走了。。。");
            })*/
            //2.1 简化操作，链式编程(不建议多写)
            /*$("#name").mouseover(function () {
                alert("鼠标来了。。。");
            }).mouseout(function () {
                alert("鼠标走了。。。");
            })*/

            //3. 让文本输入框获得焦点
            alert("点击后获得焦点");
            $("#name").focus(); //默认不写是让，，文本输入框获得焦点

            //4. 一个常用的操作：表单对象.submit(); //让表单提交
        })

    </script>
    2. on绑定事件/off解除绑定
      • jq对象.on(“事件名称”,回调函数)
      • jq对象.off(“事件名称”)
        • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
      • 代码演示：
            <script type="text/javascript">

        $(function () {
            //1. 使用on给按钮绑定点击事件 click
            $("#btn").on("click", function () {
                alert("我被点击了");
            })
            //2. 使用off解除btn按钮点击事件
            $("#btn2").click(function () {
                //解除btn按钮的点击事件
                //$("#btn").off("click");
                $("#btn").off();    //将组件上的所有事件全部解绑
            })
        })

    </script>
    3. 事件切换：toggle
      • jq对象.toggle(fn1,fn2…)
        • 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
      • 【注意】：1.9版本 .toggle()方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
        • 高本版jq想要使用事件切换，还需要导入上面呢个插件
           <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
      • 代码演示：
            <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    
    //不仅要引入高本版的jq，使用该功能还需要引入低版本的jq插件
    <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        $(function () {
            //获取按钮，调用toggle方法
            $("#btn").toggle(function () {
                //改变div的背景色backgroundColor 颜色为 green
                $("#myDiv").css("backgroundColor", "green");
            }, function () {
                //改变div的背景色backgroundColor 颜色为 red
                $("#myDiv").css("backgroundColor", "red");
            })
        })
    </script>
  4. 案例一、广告显示和隐藏
    1. 需求：
      1. 当页面加载完，3秒后。自动显示广告
      2. 广告显示5秒后，自动消失。
    2. 分析：
      1. 使用定时器来完成。setTimeout (执行一次定时器)
      2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
      3. 使用 show/hide方法来完成广告的显示
    3. 代码实现：
         <script>
        /*
            需求：
                1. 当页面加载完，3秒后。自动显示广告
                2. 广告显示5秒后，自动消失。

            分析：
                1. 使用定时器来完成。setTimeout (执行一次定时器)
                2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
                3. 使用  show/hide方法来完成广告的显示
         */

        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法
        $(function () {
            //定义定时器，调用adShow方法 3秒后执行一次
            setTimeout(addShow,3000);
            //定义定时器，调用adHide方法，8秒后执行一次
            setTimeout(addHide,8000);
        })

        //显示广告
        function addShow() {
            //获取广告div，调用显示方法
            $("#ad").show("slow");
        }
        //隐藏广告
        function addHide() {
            //获取广告div，调用隐藏方法
            $("#ad").hide("slow");
        }


    </script>
  5. 案例二、抽奖
    1. 分析：
      1. 给开始按钮绑定单击事件
        1. 定义循环定时器：setInterval
        2. 切换小相框的src属性
          • 定义数组，存放图片资源路径
          • 生成随机数。数组索引
      2. 给结束按钮绑定单击事件
        1. 停止定时器
        2. 给大相框设置src属性
    2. 代码实现：
          <script language='javascript' type='text/javascript'>
	
        /*
            分析：
                1. 给开始按钮绑定单击事件
                    1.1 定义循环定时器：setInterval
                    1.2 切换小相框的src属性
                        * 定义数组，存放图片资源路径
                        * 生成随机数。数组索引


                2. 给结束按钮绑定单击事件
                    1.1 停止定时器
                    1.2 给大相框设置src属性

         */
        var imgs = ["../img/man00.jpg",
                    "../img/man01.jpg",
                    "../img/man02.jpg",
                    "../img/man03.jpg",
                    "../img/man04.jpg",
                    "../img/man05.jpg",
                    "../img/man06.jpg",
                    ];
        var startId;//开始定时器的id
        var index;//随机角标
        $(function () {
            //处理按钮是否可以使用的效果
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);


           //1. 给开始按钮绑定单击事件
            $("#startID").click(function () {
                // 1.1 定义循环定时器 20毫秒执行一次
                startId = setInterval(function () {
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled",true);
                    $("#stopID").prop("disabled",false);


                    //1.2生成随机角标 0-6
                    index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                    //1.3设置小相框的src属性
                    $("#img1ID").prop("src",imgs[index]);

                },20);
            });


            //2. 给结束按钮绑定单击事件
            $("#stopID").click(function () {
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);


               // 1.1 停止定时器
                clearInterval(startId);
               // 1.2 给大相框设置src属性
                $("#img2ID").prop("src",imgs[index]).hide();
                //显示1秒之后
                $("#img2ID").show(1000);
            });
        });



    </script>
  6. 插件：增强JQuery的功能
    1. 实现方式：
      1. $.fn.extend(object)–>对象级别
        • 增强通过Jquery获取的对象的功能 $(“#id”)
            <script type="text/javascript">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
        
        
        //1.定义jqeury的对象插件
        $.fn.extend({
            //定义了一个check()方法。所有的jq对象都可以调用该方法
            check:function () {
               //让复选框选中

                //this:调用该方法的jq对象
                this.prop("checked",true);
            },
            uncheck:function () {
                //让复选框不选中

                this.prop("checked",false);
            }
            
        });

        $(function () {
           // 获取按钮
            //$("#btn-check").check();
            //复选框对象.check();

            $("#btn-check").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").check();

            });

            $("#btn-uncheck").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").uncheck();

            });
        });


    </script>
      2. $.extend(object)–>全局级别
        • 增强JQeury对象自身的功能 $/jQuery
            <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        
        $.extend({
            max:function (a,b) {
                //返回两数中的较大值
                return a >= b ? a:b;
            },
            min:function (a,b) {
                //返回两数中的较小值
                return a <= b ? a:b;
            }
            
            
        });

        //调用全局方法
        var max = $.max(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);
    </script>
狂野小白兔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb视频教程_day2-资料源码.rar_JavaWeb视频教程_javaweb
09-21
【JavaWeb视频教程_day2-资料源码.rar_JavaWeb视频教程_javaweb】这个压缩包文件是针对JavaWeb开发的学习资源，尤其侧重于JavaScript技术的讲解。在JavaWeb开发中，JavaScript扮演着至关重要的角色，它是客户端脚本...
JavaWeb视频教程_day4-资料源码.rar_JavaWeb视频教程
09-20
在提供的"JavaWeb视频教程_day4-资料源码"中，你可能会找到配套的代码示例，通过查看和运行这些代码，可以更好地理解和应用上述知识点。学习过程中，不断实践和调试代码是提升技能的最佳途径。祝你在JavaWeb的学习...
day18_综合案例(用户信息).zip
11-30
在本综合案例中，我们将探讨如何使用JavaWeb技术来实现用户信息管理功能，包括用户登录、用户信息的增删改查以及分页查询。这个项目是面向初学者和进阶者设计的，无论你是前端开发者还是后端开发者，都能通过此案例...
day9_bytgq_javascript_
10-02
在“JavaWeb视频教程_day9-资料源码”中，可能会讲解到JavaScript与服务器端的交互，比如使用AJAX（Asynchronous JavaScript and XML）技术进行异步通信。XMLHttpRequest对象是实现AJAX的关键，现在更常用的是基于...
day28_综合案例4_docx1
08-04
在本综合案例中，我们关注的是JavaWeb应用中的一个常见功能——旅游线路收藏。这个案例主要涉及了四个关键部分：线路收藏的分析、判断是否收藏的后台处理、判断是否收藏的前端实现以及收藏次数的动态展示。 1.1 ...
10_36_Docker【实战】—Redis集群部署实战【部署方式采用：分片+高可用+负载均衡】
qq_40572023的博客
03-23 2430
Redis集群部署实战【部署方式采用：分片+高可用+负载均衡】
10_32_Docker【进阶知识】—Docker0网络详解（用来给容器编排，集群部署做铺垫）
qq_40572023的博客
03-14 1912
Docker0网络详解（用来给容器编排，集群部署做铺垫）
10_21_Docker—容器数据卷的使用【数据卷挂载的方式二：volume（具名和匿名挂载）】
qq_40572023的博客
02-11 1721
数据卷挂载的方式二：volume（具名和匿名挂载）
使用Visual Studio Code工具创建Vue项目并运行
qq_40572023的博客
08-17 1639
1
09_01_第七阶段：微服务开发||01-SpringBoot||00常用注解【观看狂神随笔】【lombok】
qq_40572023的博客
06-22 1633
常用注解 ###@Component（把普通pojo实例化到spring容器(组件)中，相当于配置文件中的 ）——pojo下 泛指各种组件，就是说当我们的类不属于各种归类的时候（不属于@Controller、@Services等的时候），我们就可以使用@Component来标注这个类。 ###@ConfigurationProperties（prefix = “yaml配置文件中的类名”）（用yaml配置文件绑定到任何java类上都可以） 具体看04 ###@Controller 控制器（
10_34_Docker【进阶知识】—容器互联：自定义网络【推荐使用[可以不通过--link直接ping容器名字]，而不是用默认】
qq_40572023的博客
03-17 1424
容器互联：自定义网络【推荐使用[可以不通过--link直接ping容器名字]，而不是用默认】
10_10_Docker—常用的其他命令：进入容器的命令和拷贝命令
qq_40572023的博客
01-06 1247
常用的其他命令：进入容器的命令和拷贝命令
10_19_Docker—容器数据卷的使用【数据卷挂载的方式一：目录挂载】
qq_40572023的博客
02-09 1163
容器数据卷的使用
10_37_Docker【实战】—SpringBoot微服务打包Docker镜像
qq_40572023的博客
03-24 1157
SpringBoot微服务打包Docker镜像
10_33_Docker【进阶知识】—容器互联--link【更建议用自定义网络】
qq_40572023的博客
03-17 1152
容器互联--link【更建议用自定义网络】
10_12_Docker—练习一：部署Nginx【curl】
qq_40572023的博客
01-10 1104
10-12-Docker—练习一：部署Nginx
10_20_Docker—实战：MySQL同步数据
qq_40572023的博客
02-10 1055
实战：MySQL同步数据
10_18_Docker—commit镜像
qq_40572023的博客
02-08 1042
commit镜像
10_09_Docker—常用的其他命令：日志，进程，元数据[常用]【查看日志，查看容器内部的进程信息，查看镜像的元数据的查看】
qq_40572023的博客
01-06 954
常用的其他命令：日志，进程，元数据[常用]【查看日志，查看容器内部的进程信息，查看镜像的元数据的查看】
java onetowthree替换_FCKEditor2.6.6 配合 JavaWeb 的 使用步骤
最新发布
05-30
首先，你需要将 FCKEditor2.6.6 的相关文件拷贝到你的 JavaWeb 项目中。接着，在需要使用 FCKEditor 的页面中引入 FCKEditor 的 JavaScript 文件： ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

狂野小白兔

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

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

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

打赏作者

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

抵扣说明：

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

余额充值