jQuery中的事件与动画 笔记整理 |
您所在的位置:网站首页 › jquery中的什么方法可以实现事件解除控制 › jQuery中的事件与动画 笔记整理 |
一. jQuery中的事件
jQuery事件是对javaScript事件的封装。 1.基础事件在javaScript中,常用的基础事件有鼠标事件、键盘事件、window事件、表单事件。事件的绑定和处理函数的语法格式如下: 语法:时间名=”函数名()”; 或: DOM 对象.事件名=函数 1.载入事件在jQuery中,常用的window事件有文档载入事件,它对应的方法是ready()。 2.鼠标事件当用户在文档上移动或单击鼠标而产生的事件。 方法 描述 执行时机 click() 触发或将函数绑定到指定元素的click事件 鼠标单击时 mouseover() 触发或将函数绑定到指定元素的mouseove事件 鼠标移到时 mouseout() 触发或将函数绑定到指定元素的mouseout事件 鼠标移出时 mouseenter() 触发或将函数绑定到指定元素的mouseenter事件 鼠标进入时 mouseleave() 触发或将函数绑定到指定元素的mouseleave事件 鼠标离开时 3.键盘事件 键盘事件是指当键盘聚焦到Web浏览器时,用户每次按下或释放键盘上的按键时都会产生事件。常用的键盘事件有keydown、keyup、keypress。 方法 描述 执行时机 Keydown() 触发或将函数绑定到指定元素的keydown事件 按下键盘时 Keyup() 触发或将函数绑定到指定元素的keyup事件 释放键盘时 Keypress() 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时 标准:产生可打印的字符时(相当于用户输入字符) 4.浏览器事件在浏览网页时,大家经常会调整浏览器窗口的大小。这些都是通过jQuery中的resize()方法触发resize事件,进而处理相关的函数,来完成页面的一些特效。 语法: $(selector).resize(); 2.绑定与移除事件 1.绑定事件在jQuery中,如果需要为匹配的元素同时绑定一个或多个事件,则可以使用bind()方法。 语法: bind(type,[data],fn);//这种已经过时,建议使用on On(type,[data],fn); 参数类型 参数含义 描述 type 事件类型 主要包扩click、mouseover等基础事件,还可以自定义事件 [data] 可选参数 作为even.data属性值传递给事件对象的额外数据对象,可选项 fn 处理函数 用来绑定处理函数 2.移除事件 当事件执行完了,需要把绑定的事件通过一定的方法取消。在jQuery中提供了移除事件的方法,同样可以移除单个或多个事件,可以使用unbind()方法。 语法:undind([type],[fn]); Undind()方法有两个参数,这两个参数不时必须的。当unbind()不带参数时,表示移除所绑定的全部事件。 3.复合事件 在jQuery中有两个复合事件方法-hover()和toggle(),这两个方法与ready()类似,都是jQuery自定义的方法。 1.hover()方法在jQuery中,hover()方法用于模拟鼠标移入和移出事件。当鼠标移入时,会触发指定的第一个函数(enter);当鼠标移除这个函数时,会触发指定的第二个函数(leave),该方法相当于mouseenter和mouseleave事件的组合。 语法:hover(enter,leave); 2.toggle()方法在jQuery中,toggle()方法分为带参数和不带参数。 带参数的方法用于模拟鼠标连续click事件。第一次单击元素,触发指定的第一个函数,再次单击则触发指定的第二个函数,如果有更多函数,则依次触发,直到最后一个。随后的单击都重复对几个函数的轮番调用。 语法:toggle(fn1,fn2…..fnN); toggle()不带参数时,与show()和hide()方法的作用一样,切换元素的可见状态。如果是可见的,则切换为隐藏状态;如果是隐藏的,则切换为可见状态。语法: toggle(); 与jQuery中的toggle()方法一样,toggleClass()可以对样式进行切换,实现事件触发时某元素在“加载某个事件”和“移除某个事件”之间切换。 语法:toggleClass(className); 3.事件冒泡当一个父元素的子元素有与父元素相同的事件时,那么父元素的事件执行时,子元素的事件也会执行,那么父元素的一次click事件相当于执行了2次。 1.阻止冒泡事件 下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分别将三种元素都注册click事件。 那么,click事件会按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。 我是**** $("span").bind("click", function(){ alert('span click'); }); $("div").bind("click", function(){ alert('div click'); }); $("body").bind("click", function(){ alert('body click'); }); 解决这个问题的办法是:在SPAN执行完click事件后,停止事件冒泡。 $("span").bind("click", function(event){ alert('span click'); event.stopPropagation(); //停止冒泡 });
二. jQuery中的动画 1.控制元素显示与隐藏 1.控制元素的显示 在jQuery中,可以使用show()方法控制元素的显示,除此之外,它还能定义显示时的效果,如显示速度。 语法:$(selector).show([speed],[callback]); 参数 描述 speed 可选项,用于设置显示的速度,取值范围:如1000(毫秒),slow,normal,fast Callback 可选项,show()函数执行完后,要执行的函数 2控制元素的隐藏 用法与show()方法类似。 语法:$(selector).hide([speed],[callback]); 2.改变元素透明度 1.控制元素淡入 在jQuery中,如果元素是隐藏的,则可以使用fadeIn()方法控制元素淡入,它与show()方法相同,可以定义淡入时的效果,如显示速度 语法:$(selector).fadeIn([speed],[callback]); 其中callback表示fadeIn()执行完后要执行的函数。 2.控制元素淡出语法:$(selector).fadeOut([speed],[callback]); 3.改变元素的高度在jQuery中,用于改变元素高度的方法是slideUp()和slideDown()。若元素中的display属性值为none,当调用slideDown()方法时,这个元素会从上向下延伸显示,而slideUp()方法正好相反,元素下到上缩短直至隐藏。 语法:$(selector).slideUp([speed],[callback]); $(selector).slideDown([speed],[callback]); 4.自定义动画在jQuery中,可以创建自定义动画,实现各种比较复杂的动画。 语法:$(selector).animate({params},[speed],[callback]); params:必选项目,定义形成动画的CSS属性。 speed和callback时可选项。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |