jQuery事件绑定与常用事件

jQuery事件与js类似，只是在名称上将前面的on去掉了，例如jQuery的click、mousedown、keypress事件。jQuery绑定事件有2种方法，下面用最基本的例子做演示。

①直接绑定，$('selector').event(function () { 代码块;})

<button>click me</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
    $('button').click(function () {
        alert('hello world');
    })
</script>

 

②通过bind绑定，$('selector').bind('event',function () { 代码块;})

通过这种方法可以解绑事件，$('selector').unbind('event')

<button>click me</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
    $('button').bind('click',function () {
         alert('hello world');
    })
    $('button').unbind('click' )  
</script>

 

为了避免在文档未完全加载之前就运行jQuery代码导致错误，或者动态增加的标签不会自动绑定事件，可通过两种方法解决。

1.保证文档在完全加载之后再运行jQuery代码

$(document).ready(function(){ 
   // 开始写 jQuery 代码... 
});

//等价于
$(function(){
   // 开始写 jQuery 代码... 
});

②事件委托与绑定

<ul>
    <li>11</li>  <li>22</li>  <li>33</li>  <li>44</li>
</ul>
<button>add li</button>  <!--按钮，点击增加li标签-->
<script src="baidu_jquery_2.1.4.js"></script>
<script>
    $('button').click(function () {
        var $ele=$('<li>')
        $ele.html(($('li').length+1)*11);  //新增li标签的文本内容
        $('ul').append($ele)
    })
    $('li').bind('click',function () {   //点击li标签，弹出提示框
         alert('hello world');
    })
</script>

对于上面这个例子，原本文档中的11、22、33和44标签，点击分别可弹出提示框，单只对于点击按钮后新增的55、66、77等标签，则不会自动绑定上原li标签的click事件，即点击不会弹出hello world提示框。为此，可将事件绑定在ul标签、并委托给ul标签的li标签。

//将原本li标签的click事件修改为如下
$('ul').bind('click','li',function () {
         alert('hello world');
})

 jQuery常见事件

①显示与隐藏：show()、hide()与toggle()

三个函数不加参数分别表示直接显示、隐藏与切换；加上时间参数如hide(1000)，表示隐藏这个动作持续1000ms；也可使用'slow'或者'fast'作为参数。

<div style="width: 200px;background: pink">hello world</div><br>
<button id="showing">显示</button>
<button id="hiding">隐藏</button>
<button id="toggling">切换</button>
<script>
   $('#showing').click(function () {
       $('div').show();
   })
   $('#hiding').click(function () {
       $('div').hide();
   })
   $('#toggling').click(function () {
       $('div').toggle();  //切换，如果div是显示则隐藏，如果是隐藏则显示
   })
</script>

②向上与向下滑动：slideUp()、slideDown()与slideToggle()

三个函数不加参数分别表示直接向上滑动、向下滑动与切换；加上时间参数如slideUp(1000)，表示向上滑动这个动作持续1000ms；也可使用'slow'或者'fast'作为参数。

<div style="width: 200px;background: pink">hello world</div><br>
<button id="slideup">向上滑动</button>
<button id="slidedown">向下滑动</button>
<button id="slidetoggle">切换</button>
<script>
   $('#slideup').click(function () {
       $('div').slideUp(1000);
   })
   $('#slidedown').click(function () {
       $('div').slideDown(1000);
   })
   $('#slidetoggle').click(function () {
       $('div').slideToggle(1000);  //切换，如果当前状态为向下滑动则向上滑动，如果当前状态为向上滑动则向下滑动
   })

 ③淡入与淡出：fadeIn()、fadeOut()、fadeToggle()与fadeTo()

这四个参数实际是对标签的透明度进行设置，前三个参数的用法类似前面两个，而fadeTo()需要两个参数，第一个参数表示速度，可使用毫秒数或者'slow'和'fast'，第二个参数为指定的透明度，在0和1之间。

<div style="width: 200px;background: pink">hello world</div><br>
<button id="fadein">淡入</button>
<button id="fadeout">淡出</button>
<button id="fadetoggle">切换</button>
<button id="fadeto">透明度</button>
<script>
　　$('#fadein').click(function () {
       $('div').fadeIn(1000);
   })
   $('#fadeout').click(function () {
       $('div').fadeOut(1000);
   })
   $('#fadetoggle').click(function () {
       $('div').fadeToggle(1000);
   })
   $('#fadeto').click(function () {
       $('div').fadeTo(1000,0.3);
   })
</script>

 

对于上述三对方法，除了可以加上毫秒或者'slow'和'fast'作为第一个参数，还可以加上第二个参数即回调函数，表示原方法完成后执行的函数，语法

$(selector).event(speed,function() { //回调函数代码})，以下例子以第一对函数为例。点击点击隐藏按钮时，会先隐藏div标签，隐藏动作完成后会弹出“已隐藏”提示框；点击显示按钮时，会先显示div标签，显示动作完成后会弹出“已显示”提示框。

<div style="width: 200px;background: pink">hello world</div><br>
<button id="showing">显示</button>
<button id="hiding">隐藏</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
   $('#showing').click(function () {
       $('div').show('slow',function () {
           alert('已显示');
       });
   })
   $('#hiding').click(function () {
       $('div').hide('slow',function () {
           alert('已隐藏');
       });
   })
</script>