02.jquery事件绑定、动画

jquery动画&遍历&事件绑定

前提是导入jquery.js文件或者

一、动画

选择器选择的jq对象执行了相关的方法，返回的还是jq对象本身，可以利用这个特性进行链式调用

底层是通过控制【display属性】+【宽高】+【透明】+【定时器】+【清空定时器】实现的

1.默认显示和隐藏的方式

1. show([speed,[easing],[fn]]) 显示
   • speed: 动画速度。可取slow、normal、fast，也可以自定义毫秒数值。
   • easing: 切换效果，默认swing,可用参数为linear
     • swing: 慢，中间块，慢
     • linear: 匀速
   • fn: 动画执行完毕时执行的函数，选择器中的每个元素执行一次
2. hide([speed,[easing],[fn]]) 隐藏
3. toggle([speed],[easing],[fn]) 显示/隐藏，整合show与hide

显示
隐藏
切换

$(function () {
    $("#btn1").click(function () {
        $("#box").show("normal", "linear");
    });

    $("#btn2").click(function () {
        $("#box").hide(1000)
    });

    $("#btn3").click(function () {
       $("#box").toggle("fast", "swing")
    });
})

2.滑动显示和隐藏方式？

1. slideDown([speed],[easing],[fn])
2. slideUp([speed],[easing],[fn])
3. slideToggle([speed],[easing],[fn])

slideDown
slideUp
slideToggle

$(function () {
    $("#btn1").click(function () {
        $("#box").slideDown("slow", "linear")
    });

    $("#btn2").click(function () {
        $("#box").slideUp(1000)
    });

    $("#btn3").click(function () {
       $("#box").slideToggle("fast", "swing")
    });

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

1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed],[easing],[fn])

fadeIn
fadeOut
fadeToggle

$(function () {
    $("#btn1").click(function () {
        $("#box").fadeIn("slow", "linear")
    });

    $("#btn2").click(function () {
        $("#box").fadeOut(1000)
    });

    $("#btn3").click(function () {
       $("#box").fadeToggle("fast", "swing")
    });

4.animate自定义动画特效

1. 语法：animate(params,[speed],[fn])
2. 参数
   • params: 一组包含作为动画属性和终值的样式和及其值的集合【key:value】的形式
   • speed: [可选参数]，三种预定义速度【“slow”、“normal”、“fast”】或者毫秒值
   • fn: [可选参数]，动画完成时执行的回调函数，每个元素执行一次。

html代码

start
stop

同时执行效果

$(function () {
    $("#start").click(function () {
        // 同时执行
        $("#box").animate({
            width: '300px',
            height: '300px',
            left: '100px',
            top: '200px'
        }, 2000)
    });
})

顺序执行【链式调用】

$(function () {
    $("#start").click(function () {
        // 顺序执行
        $("#box").animate({left: '100px'}, 2000)
                 .animate({top: '100px'}, 2000)
                 .animate({left: '0'}, 2000)
                 .animate({top: '0'}, 2000)
    });
})

delay延迟效果

$(function () {
    $("#start").click(function () {
        // 延迟效果
        $("#box").animate({left: '100px'}, 2000)
                 .delay(2000)
                 .animate({top: '100px'}, 2000)
    });
})

stop停止动画效果

stop是终止当前正在执行的动画效果，如果有链式调用，不会影响其他的执行

$(function () {
    $("#start").click(function () {
        // 顺序执行
        $("#box").animate({left: '200px'}, 2000)
                 .animate({top: '200px'}, 2000)
                 .animate({left: '0'}, 2000)
                 .animate({top: '0'}, 2000)
    });

    // stop停止动画效果
    $("#stop").click(function () {
        $("#box").stop();
    })
})

5.【案例】右边弹出小广告(核心代码)

  宝
芝
林


$(function () {
    $("#box")
        .slideDown(1000)
        .click(function () {
            $(this).fadeOut(2000)
        })
})

二、遍历

1.js的遍历方式

for(var=0;i<10;i++){}

2.jquery的遍历方式

1.jquery对象.each(callback)

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

1. 参数介绍
   • index: 元素在集合中的索引
   • element: 集合中的每一个元素对象,dom对象
   • this: 集合中的每一个元素对象，dom对象
2. 回调函数返回值
   • true: 如果当前function返回true,结束本次循环，继续下次循环(continue)
   • false: 如果当前function返回为false,则结束循环(break)

p1
p2
p3

$(function () {
    $("p").each(function (index, element) {
        if(index === 0)
            return true;

        console.log(index + ":" + element.innerText)

        if(index === 1)
            return false;
    })
})

2. $.each(jq选择器object, [callback])：(与第1种是等价的)

p1
p2
p3

$(function () {
    $.each($("p"), function (index, element) {
        console.log(index + ":" + element.innerText)
    })
})

3. for..of:for(元素对象 of 元素容器)

jquery3.0版本之后提供的方式

p1
p2
p3

$(function () {
    for(element of $("p")) {
        console.log(element.innerText)
    }
})

三、事件绑定

1.事件概念

事件流：dom树接受事件的顺序，“DOM2级事件”规定的事件流包括三个阶段

• 事件捕获阶段
• 目标阶段
• 事件冒泡阶段

JQuery不支持事件的捕获，没有事件捕获的阶段

1. 阻止事件默认事件与事件冒泡

阻止事件冒泡可以应用在模态框中：点击蒙版处取消模态框，而点击模态框则不会取消

$('a').click(function (ev) {
    // 阻止a标签的默认事件
    ev.preventDefault();

    // 阻止事件冒泡
    ev.stopPropagation();

    // 这句代码可以同时阻止默认行为和冒泡行为
    return false;
})

2. jquery标准的绑定方式

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

$("#input").focus() //让文本获取焦点

3. on绑定/代理事件;off解除绑定

1. jq对象.on("事件名称", 回调函数)：绑定事件

在事件之后添加的相应dom节点不能触发事件,事件代理能解决在事件绑定之后添加的新dom元素能触发相应的事件核心思想就是：【自己不能完成当前的事件 交给父级元素来做这件事情】

2. 父级jq对象.on('事件名字','子选择器','回调函数')：代理事件

$('ul').on('click','#new,.one',function () {
    console.log(this);
});

$('ul').append('
新插入的
');

3. delegate事件代理专业户

$("父选择器").delegate("子选择器", "事件", function() {...})

4. jq对象.off("事件名称")：解除绑定
   • 注意：如果off方法不传递任何参数，则将组件上的所有事件全部解绑

4. 事件切换：toggle

1. jq对象.toggle(fn1,fun2...):
   • 当单击jq对象对应的组件后，会执行fn1,第二次点击会执行fn2...

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

5. bind 事件绑定方式

1. jq对象.bind("事件类型 事件类型...", fn回调函数)：给当前的dom元素绑定事件

$('选择器').bind('click mouseenter',function () {
    alert('事件被绑定了')
});

// ---------- //

function funOne(){};
finction funTwo(){};
$("选择器").bind({
    'click':funOne,
    'mouseover':funTwo
})

2. unbind() 绑定事件的移除

$("选择器").unbind() // 移除所有事件
$("选择器").unbind('click') // 移除单击事件

3. 【了解】绑定自定义事件

//绑定自定义的事件,接受的参数只能是一一对应，不能用一个变量接受一个数组。
$('button').bind('myClick',function(ev,a,b,c){
    alert(ev);
    alert(a + '' + b + c);
});

//触发自定义的事件用trigger ,可以给相应的事件传递参数
$('button').trigger('myClick',[1,2,3])

四、jq事件大杂烩

1.鼠标事件

鼠标事件 单击 双击 鼠标移入 鼠标移出 鼠标进入/离开 获取焦点 失去焦点等等

1. 点击事件

$('#box').click(function () {
    console.log("单击事件");
});

2. 双击事件(用的比较少) 一般点击和双击不回同时出现在同一个dom元素上

$('#box').dblclick(function () {
    console.log('双击事件');
}).delay(1000)

3. 鼠标按下mousedown和弹起mouseup

$('#box').mousedown(function () {
    console.log('mousedown');
});
$('#box').mouseup(function () {
    console.log('mouseup');
});

4. 键盘按下和键盘弹起

$('input[type=password]').keydown(function(){
    console.log($(this).val());
});
$('input[type=password]').keyup(function(){
    console.log($(this).val());
})

5. 移入和移出mouseover mouseout 鼠标指针穿过/离开【被选元素】或者当前元素的【子元素】，会触发事件

$('#box').mouseover(function () {
    console.log('mouseover')
});
$('#box').mouseout(function () {
    console.log('mouseout')
});

6. 进入和离开 mouseenter mouseleave 鼠标指针只在穿过/离开【被选元素】触发事件

$('#box').mouseenter(function () {
    console.log('mouseenter')
});
$('#box').mouseleave(function () {
    console.log('mouseleave')
})

7. 鼠标移动的时候

$('#box').mousemove(function () {
    console.log('mousemove');
})

8. 获取焦点用focus(jquery表单获取值用val,而不是value)

$('input[type=text]').focus(function () {
    console.log($(this).val());
});

9. 失去焦点用blur

$('input[type=text]').blur(function () {
    console.log($(this).val());
});

2.表单事件

表单事件:change内容改变/selected选项被选中

1. change() 表单元素发生改变时出发的事件

仅限于input textarea selected

$('select').change(function () {
    console.log($('select option:selected').text()); //选择被选中的选项
    $('.show').text($('select option:selected').text());
});

2. select选中事件,

仅限于input type=text/textarea中

$("#other").select(function () {
    console.log($(this).val())
});

2. submit

$('form').submit(function (ev) {
    //阻止默认事件的发生(点击submit属性的input会触发form的提交行为)
    ev.preventDefault();
})

五、插件【了解】

自定义一些方法功能，增强jquery

1. $.fn.extend({...}): 增强通过jquery获取的对象的功能 $("#id")

全选
全不选 

 
 

$(function () {
    // 自定义函数功能
    $.fn.extend({
        choice: function () {
            // 这里的this是jquery对象
            this.prop("checked", true)
        },
        unchoice: function f() {
            this.prop("checked", false)
        }
    });

    $("#checked").click(function () {
        $("input").choice();
    })

    $("#unchecked").click(function () {
        $("input").unchoice();
    })
})

2. $.extend({...}): 增强jquery对象自身的功能 $/JQuery

$(function () {
    $.extend({
        max: function (a, b) {
            return a > b ? a : b;
        },
        min: function (a, b) {
            return a < b ? a : b;
        }
    });

    console.log($.max(5, 6))
    console.log($.min(5, 6))
})