jQuery绑定事件

一、事件绑定bind(),live(),delegate(),on()绑定事件方式

相同点：
1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式;
2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；

比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置

//01.事件直接绑定
    $("#btn").click(function(){});
    //02.on 事件绑定
    $("#btn").on("click",function(){})
    //03.
    $("#btn").on("click",{"food":"水果"},function(event){
        console.log(event.data.food)
    })
    //04.多事件链式编程绑定
    $("div").mouseover(function(){
        console.log("进入....");
    }).mouseout(function(){
        console.log("离开....");
    });
    //05.on多事件绑定
    $("div").on("mouseover mouseout", function(){console.log("根本停不下来");})
    //06.假设给不同事件绑定不同处理函数
    $("div").on({
        mouseover:function(){console.log("到此一游");},
        mouseout:function(){console.log("鼠标已经移开了");}
   })

二、jquery事件解绑

$('p').unbind(); // 移除所有
$("div").unbind("mouseover mouseout"); 
$('p').off(); // 移除所有
$('p').off('click'); //移除点击事件（而不会移除其他的事件）

三、js监听屏幕变化

window.addEventListener('resize',function(){alert("屏幕发生变化了！")})

四、jquery监听屏幕变化

$(window).resize(function(){
    alert("屏幕发生变化了！");
})

五、模拟事件页面中创建一个文本框,并给文本一个默认值，当该页面加载时，自动获取文本框的值，显示在页面中,同时文本框处于选中状态 .

实现代码如下
$(function(){  
    var oTxt=$("input");//获取文本框  
    oTxt.trigger("select");//自动选中文本框  
    oTxt.bind("btn_click",function(){ //自定义事件  
        var txt=$(this).val();//获取自身内容  
        $("#div").html(txt);//显示在页面中  
    })  
    oTxt.trigger("btn_click");//自动触发自定义事件  
})  

六、jquery动画

<input type="button" value="隐藏" id="hidden">
<input type="button" value="显示" id="show">
<input type="button" value="隐藏/显示" id="toggle">
<div></div>
<script src="jquery.js"></script>
<script>
    $("#hidden").on('click',function(){
        $("div").hide(2000,'swing',function(){
            alert("动画完成");
        })
        // $("div").fadeOut(1000);
        //$('div').slideUp(2000);
    })
    $("#show").on("click",function(){
        $("div").show(2000,'linear',function(){
            alert('动画完成');
        })
        //$('div').slideDown(2000);
        //$('div').fadeIn(2000);
    })
    $("#toggle").on('click',function(){
        $('div').toggle(2000);
    })
</script>

七、自定义动画

01.animate({properties},[duration],[easing],[callback])
    properties: 设置相关动画需要的CSS的属性内容
    duration:  设置自定义动画执行的时长(毫秒)
    easing:    默认jQuery提供"linear" 和 "swing".
    callback:  自定义动画执行完毕后的回调函数
02.animate({properties},options)
    properties: 设置相关动画需要的CSS的属性内容
    options: 选项
    duration - 设置自定义动画执行的时长(毫秒)
    easing  - 默认jQuery提供"linear" 和 "swing".
    complete - 自定义动画执行完毕后的回调函数
    queue   - Boolean值,(默认值: true) 设定为false将使此动画不进入动画队列，会立刻执行