JQuery高级应用

乐心湖

发布于 2021-01-18 14:50:48

5.9K0

发布于 2021-01-18 14:50:48

文章被收录于专栏：MyTechnology

动画

三种方式显示和隐藏元素

默认显示和隐藏方式

show([speed,easing,fn]) ：显示

参数：

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

- swing：动画执行时效果是 先慢，中间快，最后又慢
- linear：动画执行时速度是匀速的fn：在动画完成时执行的函数，每个元素执行一次。

hide([speed,easing,fn]) ：隐藏

toggle(speed,easing,fn) ：切换，显示则隐藏，隐藏则显示

<body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

    <div id="showDiv" style="width:300px;height:300px;background:pink">
        div显示和隐藏
    </div>
</body>

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

$("#showDiv").hide("slow","swing",function(){
    alert("隐藏了...")
});

//自动切换
$("#showDiv").toggle("slow");

滑动显示和隐藏方式

slideDown(speed,easing,fn)

slideUp([speed,easing,fn])

slideToggle(speed,easing,fn)

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

淡入淡出显示和隐藏方式

fadeIn(speed,easing,fn)

fadeOut(speed,easing,fn)

fadeToggle([speed,easing,fn])

//淡入淡出方式
$("#showDiv").fadeIn("slow");
//淡入淡出方式
$("#showDiv").fadeOut("slow");
//淡入淡出方式
$("#showDiv").fadeToggle("slow");

遍历

js的遍历方式

for(初始化值;循环结束条件;步长)，jq也可以用。

jq的遍历方式

jq对象.each(callback)

语法：

jquery对象.each(function(index,element){});

index：就是元素在集合中的索引
element：就是集合中的每一个元素对象
this：集合中的每一个元素对象

回调函数返回值：

true：如果当前function返回为false，则结束循环(break)。
false：如果当前function返回为true，则结束本次循环，继续下次循环(continue)

$.each(object, callback)，object为需要遍历的jq对象，回调方法中的参数与each一模一样。

for..of：jquery 3.0 版本之后提供的方式。for(元素对象 of 容器对象)

<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>

var citys = $("#city li");
citys.each(function (index, element) {
    alert(index + ": " + $(element).html())
})
//或者
citys.each(function (){
    alert($(this).html())
})

citys.each(function (index, element) {
    if ("上海"=== $(element).html() ){
        return false; //结束循环
    }
    alert(index + ": " + $(element).html())
})
citys.each(function (index, element) {
    if ("上海"=== $(element).html() ){
        return true; //跳过本次循环
    }
    alert(index + ": " + $(element).html())
})

var citys = $("#city li");
$.each(citys,function (index,city) {
    alert(index + ": " + $(city).html())
})

事件绑定

jquery标准的绑定方式

jq对象.事件方法(回调函数)；
注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
表单对象.submit(); //让表单提交

<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 () {
            //获取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>
</head>
<body>
    <input id="name" type="text" value="绑定点击事件">
</body>
</html>

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

事件切换：toggle

jq对象.toggle(fn1,fn2...)
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
注意：1.9版本 .toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。

<script src="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>

案例

广告自动显示和隐藏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>广告自动显示和隐藏</title>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <style>
            #content {
                width: 100%;
                height: 500px;
                background: #999
            }
        </style>
        <script>
            $(function () {
                //1.5秒显示广告
                setTimeout(fade, 1500)
                //3.5秒后关闭广告
                setTimeout(fade, 5000)
            })

            function fade() {
                $("#ad").fadeToggle("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>

插件

增强JQuery的功能

如何定义插件：（看下面两个案例）

$.fn.extend(object)

增强通过Jquery获取的对象的功能 $("#id")

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            //定义对象插件
            $.fn.extend({
                check: function () {
                    this.prop("checked", true);
                },
                uncheck: function () {
                    this.prop("checked", false);
                }
            });
            //使用对象插件
            $(function () {
                $("#btn-check").click(function () {
                    $("input[type='checkbox']").check();
                });
                $("#btn-uncheck").click(function () {
                    $("input[type='checkbox']").uncheck();
                })
            })
        </script>
    </head>
    <body>
        <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
        <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
        <br/>
        <input type="checkbox" value="football">足球
        <input type="checkbox" value="basketball">篮球
        <input type="checkbox" value="volleyball">排球
    </body>
</html>

$.extend(object)

增强JQeury对象自身的功能 $ 或者 jQuery

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全局插件</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            // 对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
            $.extend({
                max: function (a, b) {
                    return a >= b ? a : b;
                },
                min: function (a, b) {
                    return a <= b ? a : b;
                }
            })

            // 使用这两个方法
            alert($.max(10, 8));
            alert($.min(5, 8));
        </script>
    </head>
    <body>

    </body>
</html>

版权属于：乐心湖's Blog
本文链接：https://cloud.tencent.com/developer/article/1774922
声明：博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

jquery

编程算法

登录后参与评论

0 条评论

热度