jQuery -- 事件、事件对象、动画效果

缺乏、安全感 2024-02-18 17:50 20阅读 0赞

8、基础事件：

A、绑定事件

\* .bind(type,\[data\],fn) //type为事件类型

$("input").bind('click',function()\{

alert('弹窗');

\});

$("input").bind('mouseovermouseout',function()\{

$('div').html(function(index,value)\{

return value + '1';

\})

\});

$("input").bind(\{

mouseover:function()\{

alert('移入');

\},

mouseout:function()\{

alert('移出');

\})

\*.unbind()

$('input').unbind();//删除全部事件

$('input').unbind('mouseover'); //只删除mouseover事件

$(‘input’).unbind(‘click’,fn); //删除fn处理的click事件

B、简写事件

\*.click(fn)

$("input").click(function()\{

alert('单击');

\})

\*.dblclick(fn)

$("input").dblclick(function()\{

alert('双击');

\})

\*mouseup(fn)、mousedown(fn)

$("input").mouseup(function()\{

alert('弹起');

\})

\* resize(fn) //页面大小改变时触发

$(window).resize(function()\{

alert("Stop it!");

\});

\*.submit(fn) //表单提交

$('form').submit(function()\{

alert("表单提交");

\});

C、复合事件

\* $('div').mouseover(function()\{

$(this).css('background','green');

\}).mouseout(function()\{

$(this).css('background','red');

\})

\*$('div').mouseover(function()\{ //会触发子节点

$('strong').html(function(index,value)\{

return value + 1;

\});

\})

\* $('div').mouseenter(function()\{ //enter不会触发子节点

$('strong').html(function(index,value)\{

return value + 1;

\});

\})

\* $('div').mouseleave() //离开时触发

\*keydown() 、keyup()

$('input').keydown(function()\{

alert('键盘');

\})

\*focus() //光标激活

$('input').focus(function()\{

alert('光标激活');

\})

复合事件：

1）.ready(fn) //DOM加载完成触发

$(document).ready(function()\{

alert('yes');

\});

2）.hover(fn1,fn2)是mouseleave,和mouseenter的结合

$('div').hover(

function()\{

$(this).css('background','green'); //mouseenter效果

\},

function()\{

$(this).css('background','red'); //mouseleave效果

\})

9、事件对象：也就是event对象

A、事件对象 event ,参数也可以写e

\* $('input').bind('click',function(e)\{

alert(e.type); //获取触发类型 \-> click

\})

\* $('input').bind('click',\{user:'zhansan',age:19\},function(e)\{ //传递额外数据

alert(e.data.user);

\})

\*pageX、pageY、clientY

$(document).bind('click',function(e)\{

alert(e.pageX+","+e.pageY+","+e.clientY);

\})

\*e.which //判断鼠标的左中右键 1 2 3

$(document).bind('mousedown',function(e)\{

alert(e.which);

\})

B、冒泡和默认行为

\*\* 冒泡行为：一个页面中，多个元素重叠，并且绑定在同一个事件中，当触发最上层的元素时，将依次主动触发其他元素

\* $('input').click(function()\{

alert('input');

\})

$('div').click(function()\{

alert('div');

\})

$(document).click(function()\{

alert('document');

\}) //从小范围到大范围触发

\* $('input').click(function(e)\{

e.stopPropagation(); //阻止冒泡行为

alert('input');

\})

$('div').click(function()\{

e.stopPropagation();

alert('div');

\})

$(document).click(function()\{

alert('document');

\})

\*\* 默认行为：如点击超链接，其默认行为是实现页面跳转，现在可以阻止其默认行为

\* $('a').click(function(e)\{

e.preventDefault(); //阻止默认行为

alert('www.bai.com');

\})

\* 对于表单来说：

$('form').submit(function(e)\{

e.preventDefault(); //阻止默认行为

\})

10、高级事件

A、模拟操作：

\*.trigger(‘click’) //模拟用户操作，自动点击按钮

$('input').click(function()\{

alert('按钮');

\}).trigger('click');

也可传递额外数据

$('input').click(function(e,data1,data2)\{

alert(data1 + "|"+data2);

\}).trigger('click',\['123','abc'\]);

$('input').click(function(e,data1,data2,data3)\{

alert(data1 + "|"+data2 + "|" +data3);

\}).trigger('click',\['123','abc',\['a','b','c'\]\]); //传递数组 a b c

$('input').click(function(e,data1,data2,data3,data4)\{

alert(data1 + "|"+data2 + "|"+data3+"|"+data4.user);

\}).trigger('click',\['123','abc',\['a','b','c'\],\{user:'zhangsan'\}\]);

\* 自定义事件

$('input').click('myEvent',function()\{

alert('自定义事件');

\}).trigger('myEvent');

B、命名空间：方便用于解除事件

\* $('input').bind('click.123',function()\{ //.123表示命名空间

alert('123');

\})

$('input').bind('click.abc',function()\{

alert('abc');

\})

$('input').unbind('click.123');

\* $('input').bind('click.123',function()\{

alert('123');

\})

$('input').bind('click.abc',function()\{

alert('abc');

\})

$('input').bind('mouseover.123',function()\{

alert('abc');

\})

$('input').unbind('.123'); //去掉所有以.123的命名空间

C、事件委托：.live() .delegate() ，事件委托可以提高效率

解除事件委托 .die() .undelegate()

D、.on() .off() .one()

$('input').on(\{

mouseover:function()\{

alert('鼠标移入');

\},

mouseout:function()\{

alert('鼠标移出');

\})

11、动画效果

A、显示.show()、隐藏.hide()、淡入、淡出、卷入、卷出

\* $('.show').click(function()\{

$('\#box').show();

\})

$('.hide').click(function()\{

$('\#box').hide();

\})

\* $('.show').click(function()\{

$('\#box').show('slow');

\})

$('.hide').click(function()\{

$('\#box').hide('normal');

\})

//三个参数slow normal fast分别对应600 400 200毫秒

jQuery -- 事件、事件对象、动画效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JQuery（绑定事件/ 解除事件/触发事件/事件对象）

相关 jQuery -- 事件、事件对象、动画效果

相关 jquery事件对象属性

相关 jquery中的动画和事件

相关 jQuery事件对象

相关 JQuery事件与效果

相关 JQuery绑定事件与移除事件、动画

相关 Jquery基础事件&&事件对象

相关 jQuery_事件对象

相关 jquery中的事件与动画