Jquery-事件简介

本是古典何须时尚 2022-05-26 10:27 208阅读 0赞

**1、什么是事件？**

在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

![70][]

**2、常用鼠标事件的方法**

<table style="color:rgb(0,0,0);font-family:punctuation, '微软雅黑', Tohoma;font-weight:bold;text-align:center;"> 
 <tbody> 
 <tr> 
 <td style="text-align:center;">&nbsp; &nbsp; &nbsp;方法 &nbsp;&nbsp;</td> 
 <td style="text-align:center;">&nbsp;描述 &nbsp;&nbsp;</td> 
 <td style="text-align:center;">执行时机</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">&nbsp;click()&nbsp;</td> 
 <td style="text-align:center;">触发或将函数绑定到指定元素的click事件&nbsp;</td> 
 <td style="text-align:center;">&nbsp; &nbsp; 鼠标单击时</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">mouseover() &nbsp;&nbsp;</td> 
 <td style="text-align:center;">触发或将函数绑定到指定元素的mouseover事件</td> 
 <td style="text-align:center;">鼠标指针移过时</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">mouseout()</td> 
 <td style="text-align:center;">触发或将函数绑定到指定的元素的mouseout事件 &nbsp;&nbsp;</td> 
 <td style="text-align:center;">&nbsp;&nbsp; &nbsp;鼠标指针移除时</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">mouseenter()&nbsp;&nbsp;</td> 
 <td style="text-align:center;">触发或将函数绑定到指定元素的mouseenter事件</td> 
 <td style="text-align:center;">&nbsp;&nbsp;鼠标指针进入时</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;">mouseleave()</td> 
 <td style="text-align:center;">触发或将函数绑定到指定元素的mouseleave事件&nbsp;&nbsp;</td> 
 <td style="text-align:center;">&nbsp; 鼠标指针离开时&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

**3、常用键盘事件的方法**

<table> 
 <tbody> 
 <tr> 
 <td>方法&nbsp;</td> 
 <td>描述&nbsp; &nbsp;</td> 
 <td>执行时机</td> 
 </tr> 
 <tr> 
 <td>keydown()&nbsp;</td> 
 <td>触发或将函数绑定到指定元素的keydown事件</td> 
 <td>执行按键时</td> 
 </tr> 
 <tr> 
 <td>keyup()&nbsp;</td> 
 <td>&nbsp;触发或将函数绑定到绑定到指定元素的keyup事件</td> 
 <td>&nbsp;&nbsp; 释放按键时</td> 
 </tr> 
 <tr> 
 <td>keypress()&nbsp;&nbsp;</td> 
 <td>触发或将函数绑定到指定元素的keypress事件&nbsp;</td> 
 <td>产生可打印的字符时</td> 
 </tr> 
 </tbody> 
</table>

**4、绑定事件和移除事件**

**1.绑定事件 **

** bind  语法  : bind(type,\[data\],fn)**

**type       事件类型      主要包括click，mouseover，mouseout等基础事件，此外，还可以时自定义事件  
\[data\]     可选参数      作为event，data属性值传给事件对象的额外数据对象，该参数不是必须的**

**fn            处理函数     用来绑定处理函数**

**实例：**

示例：
    $(".dv).bind({
          mouseover : $(".topDown").show();
           mouseout :   $(".topDown").hide();
    })

**移除 bind();**

**语法：unbind(\[type\],\[fn\]);**

**实例：**

$("#del").click(function{
    $("#nav li:first").unbind("click",content1);
    })

**on :在选择元素上绑定一个或多个事件的事件处理函数。**

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see [.bind()][.bind], [.delegate()][.delegate], 和 [.live()][.live]. 要删除的.on()绑定的事件，请参阅[.off()][.off]。要附加一个事件，只运行一次，然后删除

####  ####

## 语法：on(events,\[selector\],\[data\],fn) ##

**events**:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

**selector**:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

**data**:当一个事件被触发时要传递event.data给事件处理函数。

**fn**:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

实例：

$("p").on("click", function(){
    alert( $(this).text() );
    });

#### 移除 on();    ####

**实例：**

$("p").off()

5、复合事件：

**1.hover()方法**

**hover()方法用于模拟鼠标的指针移入和移除事件。相当于mouseover和mouseout事件。**

**语法  hover(enter,level);**

**实例：**

$("li").hover(
    function () {
    $(this).children("div").show();
    $(this).toggleClass("orange");
    }, function () {
    $(this).children("div").hide();
    $(this).toggleClass("orange");
    }  )

6、控制元素显示和隐藏

####   1.控制元素显示      $(selector).show(\[speed\],\[callback\]);    speed       可选，规定元素从隐藏到完全可见的速度，默认为“0”, 可选值：毫秒（1000）,slow,normal,falst                      在设置素的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变高度，宽度，外边距，内边距和透明度   callback     可选。show函数执行完毕后，要执行的函数 ####

####  2.控制元素隐藏      $(selector).hide(\[speed\].callback\]); ####

#### 7、淡入淡出 事件：    ####

1、$(selector).fadeIn(\[speed\].callback\]); 淡入

2、$(selector).fadeOut(\[speed\],\[callback\]); 淡出

3.把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。  
$(selector).fadeTo((\[\[speed\],opacity,\[easing\],\[fn\]\])  
opacity:一个0至1之间表示透明度的数字。  
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。返回值:jQuery fadeToggle(\[speed,\[easing\],\[fn\]\])

**8.改变元素高度**  
slideUp()        元素从下到上缩短直至隐藏，语法： **$(selector).slideUp(\[speed\],\[callback\])**  
slideDown()    元素从上到下延伸显示  语法：$(selector0.slideDowm(\[speed\],\[callback\]);

####  ####

####     ####

[70]: /images/20220526/09ca6ebec887434f9c0bde12c4aee621.png
[.bind]: http://api.jquery.com/bind/
[.delegate]: http://api.jquery.com/delegate/
[.live]: http://api.jquery.com/live/
[.off]: http://api.jquery.com/off/