JQuery高级

最新推荐文章于 2021-08-22 09:12:50 发布
最新推荐文章于 2021-08-22 09:12:50 发布
阅读量148 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42390340/article/details/108467500
版权

文章目录

今日内容：

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

1、动画： 三种方式显示和隐藏元素

（1）默认显示和隐藏方式

① show( [speed , [easing] , [fn] ])(三个参数)

1.speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
2.easing：用来指定切换效果，默认是"swing"，可用参数"linear"

  • swing：动画执行时效果是 先慢，中间快，最后又慢
  • linear：动画执行时速度是匀速的

3.fn：在动画完成时执行的函数，每个元素执行一次。

② hide( [speed , [easing] , [fn] ])

③ 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]])
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        //隐藏
        function hideFn() {
            $("#showDiv").hide("3","swing");
        }
        //显示
        function showFn() {
            $("#showDiv").show("3","swing",function () {
                //alert("已正常显示");
            });
        }
        //切换隐藏显示
        function toggleFn() {
            $("#showDiv").toggle("5","swing");
        }

        $(function () {
            //js函数不能写在此处
        });
    </script>

    <script>
        //隐藏
        function hideFn() {
            $("#showDiv").fadeOut("3","swing");
        }
        //显示
        function showFn() {
            $("#showDiv").fadeIn("3","swing",function () {
                //alert("已正常显示");
            });
        }
        //切换隐藏显示
        function toggleFn() {
            $("#showDiv").fadeToggle("5","swing");
        }

        $(function () {
            //js函数不能写在此处
        });
    </script>
    
    <script>
        //隐藏
        function hideFn() {
            $("#showDiv").slideUp("3","swing");
        }
        //显示
        function showFn() {
            $("#showDiv").slideDown("3","swing",function () {
                // alert("已正常显示");
            });
        }
        //切换隐藏显示
        function toggleFn() {
            $("#showDiv").slideToggle("5","swing");
        }
        $(function () {
            //js函数不能写在此处
        });
    </script>



</head>
<body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"><br>
    <img src="../img/0.jpg" id="showDiv" style="width:600px;height:400px;"/>

</body>
</html>

2、遍历

（1）js的遍历方式

for(初始化值;循环结束条件;步长)

（2） jq的遍历方式

  1. jq对象.each(callback)
  1. 语法： jquery对象.each(function(index,element){});
    * index:就是元素在集合中的索引
    * element：就是集合中的每一个元素对象
    ( this：集合中的每一个元素对象)
  2. 回调函数返回值：
    * true:如果当前function返回为false，则结束循环(break)。
    * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

  1. $.each(object, [callback])

  2. 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">
        /* 
            1. js方式for循环
            2. jq对象.each(callback)
    
                1. 语法： jquery对象.each(function(index,element){});
                            * index:就是元素在集合中的索引
                            * element：就是集合中的每一个元素对象
                                        ( this：集合中的每一个元素对象)
    
            3. $.each(object, [callback])
    
            4. for..of: jquery 3.0 版本之后提供的方式
                        for(元素对象 of 容器对象)
        */ 

        $(function () {
            //1.JavaScript方法：获取所有的ul下的li
            var citys = $("#city li");
            for (var i = 0;i<citys.length;i++){
                // alert(citys[i].innerHTML);
            }

            //2.jq对象.each(callback)
            citys.each(function (index,element) {
                //2.1获取li对象 第一种方式 this(是)
                // alert(this.innerText);

                //转成jquery对象
                // alert($(this).html())

                //2.2 获取li对象 第二种方式 在回调函数中定义参数    index(索引)  element(元素对象)
                // alert(index+":"+element.innerText);

                //转成jquery对象
                if ("上海"==$(element).html()){
                    //如果当前function返回为false，为（break）
                    // 如果返回true,为（continue）
                    return true;
                }
                alert(index+":"+$(element).html());
            });


            //3.跳出循环同上
            $.each(citys,function () {
                //alert($(this).html());
            })

            //4.for(元素对象 of 容器对象)
            // for..of:
            // jquery 3.0 版本之后提供的方式
            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对象.事件方法(回调函数)；
② 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。

表单对象.submit();//让表单提交

<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(function () {
           //1.获取name对象，绑定click事件
           $("#name").click(function () {
               alert("我被点击了...")
           });

           //给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
            $("#name").mouseover(function () {
               alert("鼠标来了...")
            });

            $("#name").mouseout(function () {
                alert("鼠标走了...")
            });

            //简化操作，链式编程
            $("#name").mouseover(function () {
                alert("鼠标来了...")
            }).mouseout(function () {
                alert("鼠标走了...")
            });
            alert("我要获得焦点了...")
            //$("#name").focus();//让文本输入框获得焦点
            //表单对象.submit();//让表单提交
        });
    </script>
<input id="name" type="text" value="绑定点击事件">

（2） on绑定事件/off解除绑定

① jq对象.on(“事件名称”,回调函数)
② jq对象.off(“事件名称”)

如果off方法不传递任何参数，则将组件上的所有事件全部解绑

<!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 () {
           //1.使用on给按钮绑定单击事件  click
           $("#btn").on("click",function () {
               alert("我被点击了。。。")
           }) ;

           //2. 使用off解除btn按钮的单击事件
            $("#btn2").click(function () {
                //解除btn按钮的单击事件
                //$("#btn").off("click");
                $("#btn").off();//将组件上的所有事件全部解绑
            });
        });


    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

（3） 事件切换：toggle

① jq对象.toggle(fn1,fn2…)

当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

② 注意： 1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<!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 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 颜色为 pink
               $("#myDiv").css("backgroundColor","pink");
           });
        });

    </script>
</head>
<body>

    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>
</body>
</html>

4、 案例

（1）广告显示和隐藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            需求：
                1. 当页面加载完，3秒后。自动显示广告
                2. 广告显示5秒后，自动消失。

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

        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法
        $(function () {
           //定义定时器，调用adShow方法 3秒后执行一次
           setTimeout(adShow,3000);
           //定义定时器，调用adHide方法，8秒后执行一次
            setTimeout(adHide,8000);
        });
        //显示广告
        function adShow() {
            //获取广告div，调用显示方法
            $("#ad").show("slow");
        }
        //隐藏广告
        function adHide() {
            //获取广告div，调用隐藏方法
            $("#ad").hide("slow");
        }



    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

（2） 抽奖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>

        /*
            分析：
                1. 给开始按钮绑定单击事件
                    1.1 定义循环定时器
                    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>

</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px">


</body>
</html>

5、插件：增强JQuery的功能(两种实现方式)

（1） $.fn.extend(object) 
	增强通过Jquery获取的对象的功能  $("#id")
（2）$.extend(object)
	增强JQeury对象自身的功能  $/jQuery
strongsix
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习的第十天
zxc1006183503的博客
08-16 111
今日内容： 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) speed：动画的速度，三个与选项"slow" "normal" "fast"或者放毫秒值 easing:指...
2024年最全学习jQuery初级中级高级用法 一篇就够了_jquery-3(4)，2024年最新大数据开发原生开发如何深入进阶
最新发布
2401_84185471的博客
05-14 863
jQuery提供了animate方法来实现更复杂的动画效果比如：图片用到了再去加载，常见于有大量图片的网页，比如电商网页。比如：图片用到了再去加载，常见于有大量图片的网页，比如电商网页。
Jquery高级
troysps的博客
05-13 883
Jquery 高级 什么是事件: 事件是可以被 JavaScript 侦测到的行为 比如: JavaScript 创建动态页面。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。 jquery事件 focus事件 获取焦点事件 一般不...
jquery 高级
wahaha
09-17 119
1. 动画 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) ...
jQuery的动态使用总结
zjq_1234的博客
02-13 138
 1. 动画          1. 三种方式显示和隐藏元素              1. 默认显示和隐藏方式     1. show([speed,[easing],[fn]])            1. 参数：                         1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如...
JavaWeb快速入门--JQuery(2)
龙源IT 的博客
05-02 777
JQuery 高级：动画、遍历、绑定事件
JQuery的动画、遍历、事件绑定
qq_44341488的博客
07-11 116
动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast") 或表示动画时长的毫秒数值(如：1000)。 2. easing：用来指定切换效果，默认是"swing"，可用参数"lin...
JQuery 高级
云别
09-26 215
JQuery 高级 1. 动画 * JS对象：显示与隐藏 js对象.display=block/none; 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速...
JQuery高级操作详解
小皮皮LL的博客
08-22 778
文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件 文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件 JQuery高级操作详解 1.动画 三种方式显示和隐藏元素： 默认显示和隐藏方式 show([speed,[easing],[fn]])。（显示） hide([speed,[easing],[fn]])。（隐藏） toggle([speed,[easing],[fn]])。（在显示和隐藏之间切换） 三个参数： 1.speed：动画的速度。三个预定义的值(“s
jQuery高级
大白的博客
06-29 167
1. 事件冒泡 什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 事件冒泡...
jQuery宽width、高height
qq_45216853的博客
05-03 148
jQuery宽width、高height <div></div> <div></div> <div></div> <div></div> // 设置jQuery对象列表中，每个元素宽高100像素 $("div").width(100).height("100px"); // 设置jQuery对象列表...
jQuery.Running.js
delv1345的博客
11-17 294
jQuery.Running.js (奔跑吧，数字！)是一款可以让数字，柱形图，饼形图跑起来的插件，支持滚动条响应。 使用方法 加载jQuery.Running.css 样式文件 <link rel="stylesheet" href="css/jquery.running.css"> 调用jQuery类库和jQuery.Running.min.js文件 ...
JQuery(二)——简单动画效果
学会改变自己——才能突破
12-20 5125
上一篇博客总结了JQuery的一些基本知识，这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结。总结一些常见的常用的基本效果的必备方法。从隐藏显示，淡入淡出，滑动，动画等几个方面来简单总结一下。          一，JQuery实现隐藏显示的功能： 1，jQuery hide() 和 show()     通过 jQuery，您可以使用hide() 和 sho
jQuery高级编程PDF：Linux公社分享技术资源
"《jQuery高级编程》是一本深入解析jQuery的权威指南，它针对JavaScript库jQuery进行了高级级别的讲解。jQuery是一个流行的JavaScript框架，被广泛应用于Web开发中，因为它简化了HTML文档遍历、事件处理、动画和AJAX...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值