jQuery事件和动画

最新推荐文章于 2022-05-04 10:58:12 发布

划船不用桨全靠浪吗

最新推荐文章于 2022-05-04 10:58:12 发布

阅读量304

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_39145111/article/details/80618492

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery事件和动画

事件的概念: 在JavaScript和HTML之间的交互是通过用户和浏览器操作页面是引发的事件来处理,当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件

事件的定义:

1.通俗的讲,我们要做的那件事(操作,动作,行为),就是一个事件

2.在浏览器,事件是指: 浏览器打开到关闭这个过程中,用户在浏览器所做的一系列操作就是事件;同时,用户所做的事件,一般都有相应的响应(函数),因此,完整的事件,一般都会有某个操作的同时,会做出相应的响应

3.浏览器事件一般有以下分类

1)鼠标事件 -> 单击双击鼠标经过离开.....

2)键盘事件 -> 键盘按下弹起......

3)浏览器事件 -> 加载事件窗口大小改变

4.事件源 -> 发生事件的源头

1、事件的绑定

1.bind(type,[data],fn) -> 为每个匹配元素的特定事件绑定事件处理函数 -> $选择器事件类型事件类型或者$ ("选择器").bind("事件类型", function(){}) ;

2.on(enents,[selector],[data],fn) -> 在选择元素上绑定一个或多个事件的事件处理函数 -> $("选择器").on("事件类型", function(){}) ;

3.one(type,[data],fn) -> 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数 -> $("选择器").one("事件类型", function(){});

4.简写绑定事件 -> $("选择器").事件类型(function(){}) ;

-> $("p").click(function(){

//函数体

}) ;

2、事件的移除

1.unbind() -> bind()的反向操作，从每一个匹配的元素中删除绑定的事件 -> $("选择器").unbind()

2.off() ->在选择元素上移除一个或多个事件的事件处理函数 -> $选择器$ ("选择器").off( "事件类型", "**" )

3、事件对象 & 事件冒泡

1.事件源: event.target -> 最初触发事件的DOM元素

2.鼠标相对页面的坐标: event.pageX & event.pageY -> 鼠标相对于文档的左右边缘的位置(单位像素(px))

3.鼠标键的类型: event.which() -> 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮(左键 1; 右键 3; 中间键 2)

4.阻止事件冒泡: event.stopPropagation() -> 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

$("选择器").click(function(event){

event.stopPropagation(); // do something

});

5.阻止默认行为: event.preventDefault() -> 阻止默认事件行为的触发 -> $("a").click(function(event) {

event.preventDefault();

}) ;

4、合成事件

1.hover([over,]out): 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态

2.toggle():用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件 -> $("p").toggle("slow");

3.trigger() -> 在每一个匹配的元素上触发某类事件 ->

$("#btn").trigger("click") ; 等于 $("#btn").click() ;

5、动画

1.动画基础

1)width()/height(): 取得第一个匹配元素当前计算的宽度值(px)/取得第一个匹配元素当前计算的高度值(px)

2)offset(): 获取匹配元素在当前视口的相对偏移

3)position(): 获取匹配元素相对父元素的偏移

4)scrollTop()/scrollLeft(): 获取匹配元素相对滚动条顶部的偏移/获取匹配元素相对滚动条左侧的偏移

2.常用动画

1)show()/hide(): 显示隐藏的匹配元素/隐藏显示的元素 -> ("p").hide()

2)fadeIn()/fadeOut():通过不透明度的变化来实现所有匹配元素的淡入/淡出效果, 并在动画完成后可选地触发一个回调函数

-> ("p").fadeOut("slow");

3)slideUp()/slideDown():通过高度变化(向上减小)来动态地隐藏/显示所有匹配的元素,在隐藏/显示完成后可选地触发一个回调函数 -> ("p").slideDown("slow");

4)toggle():用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件 -> $("td").toggle() ;

5)slideToggle(): 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数 -> $("p").slideToggle("slow") ;

6)fadeTo():把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数 -> $("p").fadeTo("slow", 0.66);

.......

3.自定义动画

animate(params,[speed],[easing],[fn])

params: 一组包含作为动画属性和终值的样式属性和及其值的集合

speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如: 1000)

easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn: 在动画完成时执行的函数,每个元素执行一次

#one {

width: 100px;

height: 100px;

background:red ;

color:#FFF ;

} ->

$("#one").animate({ //选择要操作的节点,创建自定义动画

                 width : "300px", // 宽度 100px -> 300px

                 height : "200px", // 高度 100px -> 300px

                 fontSize : "50px", // 字体 默认 -> 50px

                 opacity : 0.5 // 透明度 1.0 -> 0.5  

          },5000,"linear",function(){ // 5000ms(5s)完成动画效果

                 alert("动画已经完成! ") ; // 提示完成动画

   }) ;