jQuery事件绑定与常用事件

妖狐艹你老母 2021-12-20 10:07 363阅读 0赞

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>  
    <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>

转载于:https://www.cnblogs.com/Forever77/p/10353055.html