jQuery04(事件&动画)

今天给大家带来的是有关于事件和动画的操作

一、事件

1、加载Dom两种方式：

1.1 window.onload方式:

执行时间：整个网页种所有内容(包括图片)加载完成后，才会执行

我们先来测试一下js的方式可不可以写多个

效果：

所以我们可以知道js方式不可以写多个，不然会被覆盖，只能写一个

1.2 jQuery方式:

执行时间：网页结构绘制完成后，执行

现在我们再来测试一下jQuery方法可以写多个吗？

 效果：

 效果我们也看到了，所以我们可以知道jQuery方法可以写多个，而且不会被覆盖。

 现在我们来看看js方法和jQuery方法都在的时候谁先打印出来

 我们jQuery类库的版本是3.3的，我们来看看效果，谁出来

效果：

我们可以看到是js方式先出来，但是有人可能又会问了如果将位置调换一下呢，效果还会不会是js方式先出来，毕竟代码执行的方式是从上往下的方式来执行的，ok，那我们来看看位置调换后的效果是上面？

 

 效果：

效果明显可见了位置调换了后还是js方式先出来的，所以我们可以知道当jQuery类库版本为三点几的时候是js方法先出来，那如果版本为一点几呢？效果还会不会js先出来? 

现在我们的jQuery版本已经改为1.7的版本

效果：

看到效果后，我们可以看见jQuery方式先出来，那我们再来看看位置调换后是不是还会是jQuery先出来呢

 

 效果：

位置调换后效果还是jQuery方式先出来，所以我们知道当jQuery类库版本为一点几的时候是jQuery方式先出来。我们总结一下当版本为三点几的js方法快一点，而版本为一点几的时候jQuery方法快一点。 

2、绑定事件两件方式:

2.1 元素.on/bind("事件名",function(){})

概述：在选择元素上绑定一个或多个事件的事件处理函数。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。

代码块：

 效果：

代码块：

效果：  

2.2 元素.事件名(function(){})

代码块：

 这一种方式是我们比较熟悉的用法。

效果：

3、合成事件/事件切换:

3.1hover([over,]out)：鼠标悬停合成事件

概念：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

代码块：

效果：

 

 抱歉没有录屏，所以效果不是很明显

3.2 toggle()：鼠标点击合成事件

概述：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

注意：1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

代码块：

效果： 

 抱歉没有录屏，所以效果不是很明显

4、事件传播(事件冒泡):

传播：小-->中-->大

代码块：

当我们点击p标签的时候效果如下：

 点击div的时候：

点击body的时候：

 当我们想阻止传播的时候，可以事件后面加上  return false

代码块：

当我们再一次点击p标签的时候，效果如下 

5、事件坐标:

5.1、offsetX：当前元素左上角

5.2、clientX：窗口左上角

5.3、pageX：网页左上角

以上三个的代码块都是一样，不同的就是将info括号里面变动一下就可以了

代码块：

 效果：

 这个效果是根据你鼠标点击div容器的位置，所以效果可以有很多

6、移除事件:

元素.unbind("事件名"):

概述：bind()的反向操作，从每一个匹配的元素中删除绑定的事件，jQuery 3.0中已弃用此方法，请用off()代替。如果没有参数，则删除所有绑定的事件。

由于我的jQuery版本是3.3的所以我们的改用于off()

代码块：

 效果：

二、动画

1、基本：

1.1、show(Time)

概述：显示隐藏的匹配元素。

代码块：

 效果：

1.2、hide(Time)

概述：隐藏显示的元素

代码块：

效果： 

 

1.3、toggle（Time）

概述：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

代码块：

 效果就是上面两种的效果来回的切换

效果不是很明显请见谅

 2、滑动：

2.1、slideUp(Time)：动画收缩(向上滑动)-->隐藏

代码块：

效果：

 2.2、slideDown(Time)：动画展开(向下滑动)-->显示

代码块：

效果：

  

 2.3、slideToggle(Time)：动画切换

代码块：

效果就是上面两种的效果来回的切换

效果不是很明显请见谅

3、淡入淡出(透明度)：

3.1、fadeIn(Time)：淡入(透明度减少)

代码块：

 3.2、fadeOut(Time)：淡出(透明度增大)

代码块：

 3.3、fadeToggle(Time)：切换

代码块：

效果和上面的展开没有上面的展开、收缩的效果不差多少，外加上没有录屏所以就不给大家看效果了抱歉

4、自定义动画：

元素.animate({属性：属性值},Time)

代码块：

 这是在100后面加上了px，所以需要加上双引号，没有后面加上px的话可以不要双引号

效果呢这边给大家看个效果较明显的移动，代码也是和上面图内的一样，只需要将双引号里面的100px改为+=几就好了

效果：

好了今日的分享就到这里结束了，下次再见