WEB_BASIC---08 jQuery事件处理、jQuery动画
发布日期:2021-06-29 15:41:48
浏览次数:2
分类:技术文章
本文共 1648 字,大约阅读时间需要 5 分钟。
1.事件处理 event (1)事件处理知识回顾 1)如何绑订事件处理函数 a,绑订到html元素上 <input type="button" id="b1" οnclick="f1();"/> b,绑订到dom对象上。 var obj = document.getElementById('b1'); obj.οnclick=f1; c,使用浏览器提供的方法。 因为兼容性问题,少用。 2)如何获得事件对象 e1.html 给事件处理函数使用"event"来作为参数。 比如: οnclick="f1(event);" 3)事件对象的作用 e1.html a.找到事件源(谁产生的这个事件) e.target (firefox,chrome) e.srcElement (ie) b,获得鼠标点击的坐标 e.clientX e.clientY c,取消事件冒泡 e.cancelBubble = true; 4)什么是事件冒泡,如何取消 e2.html 子节点产生的事件,会依次向上抛给对应的 父节点。 (2)jQuery对事件处理的支持 1)绑订事件处理函数 e3.html a,正式写法 $obj.bind(事件类型,事件处理函数); 比如: var eventType = 'click'; $obj.bind(eventType,f1); b,简写形式: $obj.click(f1); 2)获得事件对象 e4.html 只需要给事件处理函数传递任意一个变量。 比如 $obj.click(function(e){ e:就是事件对象。 实际上,该事件对象是jQuery对 底层事件对象的一个封装。 }); 3)事件对象的作用 e4.html a,找到事件源 var obj = e.target; b,获得鼠标点击的坐标 e.pageX e.pageY c,取消冒泡 e.stopPropagation(); 4)事件冒泡 e5.html 5)合成事件 e6.html e7.html a, hover(f1,f2); 模拟光标悬停事件(鼠标进入 和离开)。当鼠标进入时,执行f1, 当鼠标离开,执行f2。 b,toggle(f1,f2,f3...);模拟连续单击事件。 6)模拟操作 e8.html a,正式写法 $obj.trigger(事件类型); 比如: $obj.trigger('click'); b,简写形式$obj.click();
2.动画 animate
(1)show,hide a1.html 1)作用 通过同时改变元素的宽度和高度来实现显示和隐藏。 2)用法 $obj.show(speed,callback); 注: speed:执行速度,单位可以是毫秒,也可以是"slow","fast","normal"。 callback:(回调函数)当整个动画完成之后, 执行该函数。 (2)slideDown,slideUp a1.html 1)作用 通过改变元素的高度来实现显示和隐藏。 2)用法 同上。 (3)fadeIn,fadeOut (淡入,淡出) a2.html 1)作用 通过改变元素的不透明度来实现显示和隐藏。 2)用法 同上。 (4)animate a3.html 1)用法 $obj.animate({},speed,callback); 注: {}: 用来描述动画完成之后,元素的样式,比如: {'top':'200px','left':'300px'} speed:只能用毫秒。callback:回调函数。
例子1.
Insert title here
例子2:
Insert title here
A老师:
B老师:
C老师:
D老师:
例子3:
Insert title here
转载地址:https://codingchaozhang.blog.csdn.net/article/details/79823825 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月19日 00时29分09秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
dvsdk_3_10_00-19 编译
2019-04-29
DMAI GStreamer Plug-In 编译
2019-04-29
DM365 linux kernel 移植总结
2019-04-29
DM365 应用层gpio控制
2019-04-29
Vc6 Button 的WM_LBUTTONDOWN、WM_LBUTTONUP消息响应
2019-04-29
linux i2c子系统abc
2019-04-29
kernel 2.6.32 Unknown symbol 错误
2019-04-29
gstreamer GST_BOILERPLATE_FULL 分析
2019-04-29
力扣的两数之和解法(python3)
2019-04-29
力扣的删除排序数组中的重复项解法(python)
2019-04-29
力扣的移除元素 解法 Python3
2019-04-29
力扣的三数之和解法(Python3)
2019-04-29
力扣的最接近的三数之和解法(Python3)
2019-04-29
力扣的买卖股票的最佳时机 III之解法(Python3)
2019-04-29
LeetCode 合并两个有序链表 解法 (Python)
2019-04-29
力扣的删除排序链表中的重复元素解法 (Python3)
2019-04-29
力扣的环形链表解法 (Python)
2019-04-29
力扣的盛最多水的容器解法 (Python)
2019-04-29
力扣的电话号码的字母组合解法(Python)
2019-04-29
力扣的组合总和解法 (Python)
2019-04-29