动画

三种方式显示和隐藏元素

默认显示和隐藏方式

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://www.xn2001.com/archives/583.html

声明：博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！

Last modification：September 10, 2020
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏