jQuery——动画、遍历、事件绑定

目录

• jQuery动画
• jQuery遍历
• JQuery事件绑定
• Demo

jQuery动画

跳转到目录 有三种方式显示和隐藏元素

1. 默认显示和隐藏方式

• show([speed,[easing],[fn]])
• hide([speed,[easing],[fn]])
• toggle([speed],[easing],[fn])

参数：

1. `speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear" * swing：动画执行时效果是 先慢，中间快，最后又慢 * linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。

2.滑动显示和隐藏方式

• slideDown([speed],[easing],[fn])
• slideUp([speed,[easing],[fn]])
• slideToggle([speed],[easing],[fn])

3.淡入淡出显示和隐藏方式

• fadeIn([speed],[easing],[fn])
• fadeOut([speed],[easing],[fn])
• fadeToggle([speed,[easing],[fn]])

        function hideFn() {
            // $("#showDiv").hide("slow", "swing", function () {
            //     alert("我被隐藏了!");
            // });

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

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

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

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

            // 默认方式
            // $("#showDiv").show(5000, "linear");

            // $("#showDiv").slideDown("slow");

            // 淡入淡出
            $("#showDiv").fadeIn("slow");
        }

        function toggleFn() {
            // $("#showDiv").toggle("slow", "linear");

            $("#showDiv").fadeToggle("slow");
        }
    

jQuery遍历

跳转到目录 jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此在常常需要对jQuery对象进行遍历。

1、JS遍历方式

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

2、jQuery遍历方式

• jq对象.each(callback回调函数)

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

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

2. 回调函数返回值

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

• $.each(object, [callback]) 此方式是jQuery特有的遍历方式，与上面jQuery的对象方法相似，但此处的each方法不是某个具体jQuery对象的，而是jQuery的全局对象的each方法，名字和功能虽然相同，但语法不同。

• for .. of for (元素对象 of 容器对象);

        $(function () {
            // 一、 方式1: for(初始化值;循环结束条件;步长)
            //1. 获取所有的ul下的li
            var citys = $("#city li");
            //2. 遍历li
            for (var i = 0; i 
    jquery案例之抽奖
    

    
        /*
        分析：
            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);

                    // 生成随机角标 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);
            });
        });
    






    




    










    //准备一个一维数组，装用户的像片路径
    var imgs = [
        "../img/man00.jpg",
        "../img/man01.jpg",
        "../img/man02.jpg",
        "../img/man03.jpg",
        "../img/man04.jpg",
        "../img/man05.jpg",
        "../img/man06.jpg"
    ];