【jQuery】31-jQuery事件委托 32-jQuery移入移出事件 33-jQuery显示和隐藏动画 34-jQuery展开和收起动画 35-jQuery淡入淡出动画

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_20535249/article/details/96971371

31-jQuery事件委托

 <script>
        $(function () {
            /*
            1.什么是事件委托?
            请别人帮忙做事情, 然后将做完的结果反馈给我们
            */
            $("button").click(function () {
                $("ul").append("<li>我是新增的li</li>");  //为这个li添加事件需要使用事件委托
            })

            /*
            在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
            */
            // $("ul>li").click(function () {
            //     console.log($(this).html());
            // });
            /*
            以下代码的含义, 让ul帮li监听click事件
            之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
            之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
            */
            $("ul").delegate("li", "click", function () {
                console.log($(this).html());
            });
        });
    </script>

32-jQuery移入移出事件

 <script>
        $(function () {
            // 编写jQuery相关代码
            /*
            mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
            */
            /*
            $(".father").mouseover(function () {
                console.log("father被移入了");
            });
            $(".father").mouseout(function () {
                console.log("father被移出了");
            });
            */

            /*
            mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件
            推荐大家使用
            */
            /*
            $(".father").mouseenter(function () {
                console.log("father被移入了");
            });
            $(".father").mouseleave(function () {
                console.log("father被移出了");
            });
            */

            /*
            $(".father").hover(function () {
                console.log("father被移入了");
            },function () {
                console.log("father被移出了");
            });
            */

            $(".father").hover(function () {
                console.log("father被移入移出了");
            });
        });
    </script>

33-jQuery显示和隐藏动画

  <script>
        $(function () {
            // 编写jQuery相关代码
            $("button").eq(0).click(function () {
                // $("div").css("display", "block");
                // 注意: 这里的时间是毫秒
                $("div").show(1000, function () {
                    // 作用: 动画执行完毕之后调用
                    alert("显示动画执行完毕");
                });
            });
            $("button").eq(1).click(function () {
                // $("div").css("display", "none");
                $("div").hide(1000, function () {
                    alert("隐藏动画执行完毕");
                });
            });
            $("button").eq(2).click(function () {
                $("div").toggle(1000, function () {
                    alert("切换动画执行完毕");
                });
            });
        });
    </script>

34-jQuery展开和收起动画

 <script>
        $(function () {
            // 编写jQuery相关代码
        $("button").eq(0).click(function () {
            $("div").slideDown(1000, function () {
                alert("展开完毕");
            });
        });
        $("button").eq(1).click(function () {
            $("div").slideUp(1000, function () {
                alert("收起完毕");
            });
        });
        $("button").eq(2).click(function () {
            $("div").slideToggle(1000, function () {
                alert("收起完毕");
            });
        });
        });
    </script>

35-jQuery淡入淡出动画

<script>
        $(function () {
            // 编写jQuery相关代码
            $("button").eq(0).click(function () {
                $("div").fadeIn(1000, function () {
                    alert("淡入完毕");
                });
            });
            $("button").eq(1).click(function () {
                $("div").fadeOut(1000, function () {
                    alert("淡出完毕");
                });
            });
            $("button").eq(2).click(function () {
                $("div").fadeToggle(1000, function () {
                    alert("切换完毕");
                });
            });
            $("button").eq(3).click(function () {
                $("div").fadeTo(1000, 0.2, function () {
                    alert("淡入完毕");
                })
            });
        });
    </script>