jQuery事件动画(四)
目录
一,jQuery事件
常见的DOM事件有
加载DOM的两种方式
1window.onload
2.jquery
绑定事件的两种方式
1.element.on/bind(event,function(){})事件委托
2element.event(function(){})
合成事件/事件切换
1.hover():鼠标悬停合成事件
2.toggle():鼠标点击合成事件
事件传播(事件冒泡)
1传播方式:
2.阻止传播:
3.代码示例
移除事件
二,jQuery动画
基本动画
1.控制元素的隐藏和显示
2.toggle
滑动动画
1.控制元素的上下滑动效果
2.slideToggle()
淡化动画
1.控制元素的淡入和淡化
2.fadeToggle()
自定义动画
一,jQuery事件
毫不夸张的讲,jQuery就是为了处理事件特别设计的。
针对不同访问者的响应,通常被称之为事件。
tip:我们在设置事件的时候
常见的DOM事件有
鼠标事件 | 键盘事件 | 表单事件 | 文档//窗口处理事件 |
click (点击事件) |
keypress (键盘按压事件) |
submit (表单提交事件) |
load (页面加载事件) |
dblclick (双击事件) |
keydown (键盘按下事件) |
change (表单改变事件) |
resize () |
mouseenter (鼠标移入事件) |
keyup (键盘事件) |
focus (得到焦点事件) |
scroll (滚动条事件) |
mouseleave (鼠标移除事件) |
blur (失去焦点事件) |
unload (页面关闭事件) |
|
hover (鼠标悬停事件) |
加载DOM的两种方式
1window.onload
当整个页面全部被加载之后执行,只会执行一次,如果页面写了两个Windows加载事件,有且只对第一个生效。
2.jquery
网页结果绘制完成后执行,会执行多次
tip:有且只有jQuery3.0版本的window.onload会比jQuery先执行,其余版本都是jQuery优先于window.onload
notice:在jQuery中加载事件可以简写为$(()=>{}),我们在编写js的时候箭头函数和简单函数中的this指的是不同的东西
//常规函数
element.onclick=function(){this//指的是element
}//箭头函数
element.onclick=()=>{this//指的是window
}
绑定事件的两种方式
1.element.on/bind(event,function(){})事件委托
//点击事件
$("good").on("click",functino(){console.log("hello world");
})
2element.event(function(){})
//点击事件
$("good").click(function(){
console.log("hello world");
})
合成事件/事件切换
1.hover():鼠标悬停合成事件
hover()方法运行时还会运行的两个函数,即mouseenter()和mouseleave(),hover()函数具有两个参数
$("a").hover(function(){$(".big").show();//展示
},function(){$(".big").hide();//隐藏
})
2.toggle():鼠标点击合成事件
toggle()方法在jQuery1.8版本中就已经被废弃了,在1.9中几经被废除,toggle()方法中加入的两个或者多个函数click事件切换做的响应,当点击时调用第一个函数,再次被点击时就调用第二个函数,以此类推。
$("a").toggle(function(){console.log("点击一次");
}.function(){console.log("点击两次");
},function(){console.log("点击三次");
})
//点击一次就显示点击一次,以此类推
目前我们使用的toggle是隐藏和显示
$("div").click(function(){alter("隐藏");
})
//点击一次时隐藏点击两次就是显示
事件传播(事件冒泡)
tip:事件冒泡是从子元素到父元素,而事件传播自我是相反的,从父元素到子元素
1传播方式:
从小到大
2.阻止传播:
在事件后面加上return false;
3.代码示例
$("p").click(function(){console.log("p被教训了");
})
$("div").click(function(){console.log("div被教训了");return false;//阻止传播
})
$("body").click(function(){console.log("body被教训了");
})
//控制台结果为:p被教训了 div被教训了
移除事件
1.element.unbind/off(event)
$("button").unbind("click");//移除点击事件$("button").off("click");//移除点击事件
2.element.one(event,data,function)
$("button").one("click",function(){console.log("只能被点击一次");
})
二,jQuery动画
基本动画
1.控制元素的隐藏和显示
$(selector).hide/show(speed,callback)
speed指的是显示/隐藏的速度,可以取以下值:“show”、"fast"或毫秒
callback指的是执行了hide/show之后执行的函数
$("button").click(function(){$(".a").show(1000,function(){alert("显示完毕");});
})$("button").click(function(){$("button").hide(2000);//将延迟设置为2s
})
2.toggle
toggle刚好包括以上两个,点击一次就是隐藏,再点击一次就是显示
$("#a").click(function(){$(".big").toggle(1000);//点击一次隐藏,再点击一次就是显示,延迟为1s
})
滑动动画
1.控制元素的上下滑动效果
$(selector).slideDown(speed,callback);//向下滑下$(selector).slideUp(speed,callback);//向上滑下
speed参数规定隐藏/显示的速度,可以取以下的值:“slow”,"fast"或毫秒
2.slideToggle()
$("button").click(function(){$(".big").slideToggle(1000);
})
//点击一次就向上滑动,再点击一次就想下滑动,延迟为1s
淡化动画
1.控制元素的淡入和淡化
fadeIn(speed,callback)淡入
fadeOut(speed,callback)淡出
$("#btn").click(function(){$(".big").fadeIn(1000);//淡入
})
$("#btn").click(function(){$(".big").fadeOut(1000);//淡出
})
2.fadeToggle()
$("#btn").click(function(){$("big").fadeToggle(1000);
})
//点击一次就淡出,再点击一次就淡入
自定义动画
$(selector).animate({params},speed,callback)
params填写css样式
speed延迟
callback执行动画后的函数
//点击按钮,控制dic的大小
$("#btn").click(function(){$(".big").animate({height:"100px",width:"100px"},1000)
})//点击按钮控制div的移动,距离网页左上角
$("#btn").click(function(){$(".big").animate({top:100,let:100},1000)
})
//点击按钮控制div的移动,距离此元素
$("#btn").click(function(){$(".big").animate({top:"+=10",let:"+=20"},1000)
})
掌握jQuery的事件,可以在我们编写js的时候省很多事儿。
jQuery事件动画(四)相关推荐
- jQuery事件动画
目录: 一.jQuery事件 二.jQuery动画 (一)事件 1.加载Dom两种方式 1.1 window.onload方式(执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行:编写个数: ...
- 2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
- jQuery——入门(四)JQuery 事件
jQuery--入门(四)JQuery 事件 一.事件初探 加载文档完成触发: window.onload = function(){} //js $(window).load(function( ...
- jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
- 锋利的JQuery —— 事件和动画
大图猛戳 本文转自博客园xingoo的博客,原文链接:锋利的JQuery -- 事件和动画,如需转载请自行联系原博主.
- [jQuery学习系列四 ]4-Jquery学习四-事件操作
[jQuery学习系列四 ]4-Jquery学习四-事件操作 前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 ...
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- JQuery事件的基本使用
1.事件的基本使用 jQuery事件方法语法 on() off() bind() unbind() 快捷绑定click()等 在jQuery中,大多数DOM事件都有一个等效都jQuery方法 页面中指 ...
最新文章
- 【亲测可用】改变鼠标样式
- php 在数组中,PHP 在数组中搜索给定的简单实例 array_search 函数
- 【转】JAVA 并发性和多线程 -- 读感 (二 线程间通讯,共享内存的机制)
- 洛谷 P1242 新汉诺塔
- 200825C文件 复习
- LiveVideoStackCon 2019上海 优秀出品人与讲师
- c语言打印数组元素_C程序打印元素差为0或1的子集数
- 初中文化能学编程吗_网页编程课程来了,确定不来pick一下!!!|科创辅学进行时...
- go channel 缓冲区最大限制_Go语言11周年,泛型问题有望明年得到解决
- CPU虚拟化系列文章之虚拟机切入和退出
- python汉字排序规则_根据规则对python中的列表进行排序
- 网络虚拟化有几种实现方式_机械零件表面实现镜面的几种加工方式
- OSChina 周三乱弹 ——人生四人行,一男两女是夫妻,还有一个单身狗
- ROC和 区别p值和q值
- 企业邮箱续费多少钱一年?企业邮箱域名到期如何续费?
- android关于消防栓的正确使用
- (附源码)流浪动物保护平台的设计与实现 毕业设计 161154
- Causal Intervention for Weakly-Supervised Semantic Segmentation
- C#汉字转拼音(npinyin)
- 2022年起重机司机(限桥式起重机)新版试题及起重机司机(限桥式起重机)作业考试题库