jquery动画、事件绑定、事件委托知识点总结

悠悠 2021-12-22 23:39 437阅读 0赞

## jquery的动画 ##

**基本动画 ：**

show() 没有参数 等价 css：display：block  
可以有三个参数  
第一个参数 ：动画执行的时间  
第二个参数 ： 动画执行方式 linear swing  
第三个参数 ：动画完成后的回调函数  
hide() 隐藏 等价 css：display：none  
toggle() 切换 显示 / 隐藏

**上拉/下拉 ：**  
slideDown() 通过高度的改变 显示 某个元素  
slideUp() 通过高度的改变 隐藏 某个元素  
slideToggle() 切换

**透明度 ：**

fadeIn(1000，function（） \{ \}) 淡入 通过透明度的改变 显示 某个元素  
fadeOut() 隐藏  
fadeToggle() 切换

fadeTo() 调整某个元素的透明度  
第一个参数 ： 时间 （不能省略） 时间为0 也要写出来  
第二个参数 ： 透明度值

![JQ实现基础动画][JQ]  
**自定义动画 ：animate**

对象.animate( \{ \} , 时间 , 回调函数 )  
stop() 停止当前正在运行的动画 其余动画继续执行 （多个相同的元素含有多个同样的事件时 ）  
delay() 动画延时  
return false 在jq的事件中可以完成阻止事件冒泡  
//案例（点击按钮，将盒子顺时针围绕屏幕一圈，各阶段实现不同的动画效果）  
1、给booton按钮一个点击事件  
2、给盒子自定义动画，第一次动画让盒子的宽度变为200px,透明度变为0.3，让盒子运动到右侧停止，left值等于屏幕宽度减去盒子的宽度，这个过程所有时间为2秒  
3、第二次运动，盒子运动到屏幕下方停止运动，top值为屏幕的高度减去盒子的高度所有时间为1秒  
4、设置延时，延时2秒回执行接下来运动  
5、让盒子运动到左侧，left值为0；  
6、让盒子运动到上方，top值为0；

![案例代码详解][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]

**jquery遍历**

$().each( function()\{

\} ) 或  
$.each( $() , function()\{

\} )

**jquery中阻止冒泡方式 ：return false**

size()方法 length属性 获取jq元素的个数  
jquery的offset 和 position  
position() 获取具有**定位**的元素的偏移量 结果是一个对象 有left和top两个属性  
offset() 获取相对于**文档**顶部和左侧的偏移量 结果是一个对象 有left和top两个属性  
![代码测试及结果][20190701115632547.png]

## jquery中的事件处理 ##

事件 ： 原生的去掉on  
mouseover和mouseenter的区别 :  
前者可以产生冒泡现象 会频繁触发事件处理程序  
后者不会产生冒泡行为 不会频繁触发事件处理程序  
![冒泡测试][20190701121600501.png]  
jquery的页面加载 ：  
$(document).ready(function()\{

\}) 简写成  
$(function()\{

\})

jquery的页面加载中的代码 不需要等页面所有内容全部加载完成后执行 dom元素准备就绪即可执行  
**jquery的页面加载函数可以存在多个**  
$(document).ready( callback )  
或简写成  
jQuery（callback）  
$( callback )

## 事件处理 ： ##

**事件绑定 ：**  
bind()  
用法 ：  
对象.bind(“事件”,function()\{ \})  
对象.bind(\{  
事件 ： function()\{\},  
事件 : function()\{\},  
…  
\})  
unbind() 解除绑定 unbind 也可以用  
来关闭on绑定的事件  
![事件绑定使用方法代码详解][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]  
//案例，对一个盒子使用jq完成拖拽

事件委托 delegate：  
对象.delegate(“事件源”,事件,function()\{  
\})  
取消委托 ： undelegate

![jq事件委托的用法][jq]  
事件绑定+事件委托 ： on ---- off off可以用来关闭bind绑定的事件  
事件绑定 用法 和bind()

事件委托 用法 ：

对象.on(事件 , "事件源" , function(){
    
    })

one() 只触发一次事件的事件处理方法

事件切换 hover  
用户 ：

对象.hover(function(){
            mouseenter
        },function(){
            mouseleave
        })

![jq中hover的用法][jq_hover]

[JQ]: /images/20211220/1f7db9f6aa4f4def81ebf3f8f96d2f70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211220/34cf582673b7473b94c04a09e3ead100.png
[20190701115632547.png]: /images/20211220/19bcab49307f4bd99a5c9b3553c8b695.png
[20190701121600501.png]: /images/20211220/1891f00affc04e84a1855d97de451fc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20211220/6344ae70d944420680ce29798b8427ee.png
[jq]: /images/20211220/7773fad2f0434dbcb18f510d36ba8156.png
[jq_hover]: /images/20211220/2445ee21288a4ae3bf63aa7db8e2c37b.png