jQuery事件处理 事件对象 动画效果

Posted 2021-08-30 开到荼蘼223's

jQuery事件绑定

事件绑定

语法:

		$(selector).bind('事件类型',function(){
                函数体语句
        });

或

        $(selector).事件类型(functiong(){
                 处理代码
        });

注意:这里的事件类型不加前缀on,并且同一个对象的同一类型事件可以绑定多个程序

事件的反绑定

反绑定是指取消元素上绑定的事件,即事件监听不到
语法:

$(selector).unbind() 取消元素上绑定的所有事件
$(selector).unbind('事件类型') 取消元素上绑定的指定事件

one( )绑定事件

一次性事件的绑定，绑定的事件只能使用一次
语法:

		$(selector).one('事件类型',function(){
              处理代码
        })

加粗样式

on( )绑定事件

on() 方法在匹配元素上绑定一个或多个不同类型事件的事件处理程序
语法：element.on(events,[selector],fn)
参数解释

• events 一个或多个事件类型
• selector 元素的子元素选择器 可选
• fn 事件处理程序

优点
1.可以一次绑定多个事件，多个处理事件处理程序

 $('#id').on({
      click: function(){处理代码}
	  mouseover: function(){处理代码}, 
	  keydown: function(){处理代码},	  	
});    

2.可以进行事件委托，将事件统一绑定给共同的祖先元素，这样当后代元素上的事件触发时，会一直触发到祖先元素 从而通过祖先元素的响应函数来处理事件，可以提高性能

	$('ul').on('click', 'li', function() {处理代码});

模仿鼠标悬停事件

		$(selector).hover(over,out)

over 回调函数 表示鼠标悬停时调用的函数
out 回调函数 表示鼠标离开时调用的函数

jQuery事件对象

当绑定事件处理函数时，会将jQuery格式后的事件对象作为唯一参数传入

例如

		$(selector).bind('click',function(event){
                    ....
         })

event就是jQuery的事件对象

事件对象的相关属性
阻止事件默认行为

			$('div').bind('click',function(e){
				$('div').css('color','red');
                e.preventDefault();
            });

jQuery动画

元素的隐藏与显示

		hide([speed],[callback]) 隐藏
        show([speed],[callback]) 显示
        toggle([speed],[callback]) 交替显示

参数
speed 表示速度 常用取值：

• slow 慢
• normal 普通
• fast 快速

callback 回调函数 动画运行时执行的函数 每个元素只执行一次

收缩与展开

		slideUp(speed,[callback]) 向上收缩
        slideDown(speed,[callback]) 向下展开
        slideToggle(speed,[callback]) 交替

淡入淡出
改变透明度实现

		fadeIn(speed,[callback]) 淡入		
		fadeOut(speed,[callback]) 淡出
		fadeToggle(speed,[callback]) 交替

图片动画效果

    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="toggle">交替</button>
    <button id="slideUp">收缩</button>
    <button id="slideDown">展开</button>
    <button id="fadeIn">淡入</button>
    <button id="fadeOut">淡出</button>
    <br><br>
    <img src="../img/api.png" alt="">
    <script>
        $(function(){
            $('#show').click(function(){
                $('img').show('slow')
            })
            $('#hide').bind('click',function(){
                $('img').hide(1000)
            })
            $('#toggle').bind('click',function(){
                $('img').toggle(2000)
            })
            $('#slideUp').bind('click',function(){
                $('img').slideUp(1000)
            })
            $('#slideDown').bind('click',function(){
                $('img').slideDown(1000)
            })
            $('#fadeIn').click(function(){
                $('img').fadeIn(1000)
            })
            $('#fadeOut').click(function(){
                $('img').fadeOut(1000)
            })
        })
    </script>