2021-04-29

                                                                              一些JQuery事件

什么是叫事件：页面对不同访问者的响应叫做事件。

事件应用：事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

例如：

1. 页面载入：查询及操纵时绑定的一个要执行的函数

• 下面意思是当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。

  2.事件处理：添加事件

下面意思是向li添加点击事件的处理程序

3.添加/删除类

toggleClass() 对被选元素进行添加/删除类的切换操作

on() 向元素添加事件处理程序

在下面意思是向li标签添加divHover类

 

4.一个元素绑定同功能的多种事件：

  mouseover() 当鼠标指针位于元素上方时触发的事件。事件在鼠标指针进入被选元素或任意子元素时都会被触发

  mouseout() 添加/触发鼠标离开事件。事件在鼠标离开被选元素的子元素时也会触发

on() 向元素添加事件处理程序

在下面意思是鼠标指针进入#div2就添加divHover类，当鼠标离开#div2时divHover类就又被删除

5.多元素绑定同一事件（同事件委托）事件名称，选择器，事件要执行的方法

on() 向元素添加事件处理程序

在下面意思是绑定点击事件和选择li还有事件执行控制台输出

6.绑定多个不同功能的事件

  mouseenter() 添加/触发鼠标移入事件

addClass() 向被选元素添加一个或多个类。

mouseleave()添加/触发鼠标离开事件事件只有在离开被选元素的时候才会触发，该事件大多数时。候会与 mouseenter 事件一起使用。

mousemove() 添加/触发移动事件。

在下面意思是鼠标指针进入#div3就添加divHover类，当鼠标离开#div3时divHover类就又被删除，鼠标在#div3中mousemove() 添加/触发移动事件。

7.将数据传递到处理函数中,动态传参

  在下面意思是点击#btn3就会输出Hello btn3

 

8.移除事件

  （1）off() 移除通过 on() 方法添加的事件处理程序

      移除按钮上的点击事件：

在下面意思是使用off移除#btn3按钮上的点击事件;

(2)undelegate() 从现在或未来的被选元素上移除事件处理程序 

  移除li上的点击事件：

在下面意思是使用off移除li上的点击事件

 

9.添加一个或多个事件

    （1）添加一个或多个，只能触发一次

     one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次

在下面意思是使用one(),在点击#div3中只能触发一次，也就是在控制台输出一次one();

 

（2）当前或未来的子元素添加

      delegate() 向匹配元素的当前或未来的子元素添加处理程序

在下面意思是向匹配元素的当前添加处理程序

 

（3）添加新元素   

     append()在被选元素的结尾插入内容（结束标签之前插入）

在下面意思是在ul标签结尾插入<li>li_“+i+”</li>

 

 

这是我所学到的一些JQuery事件，分享给你们，希望可以帮助到你们。

新手上道，请多多指教，大神勿喷。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔，谢谢！