【jQuery】学习笔记（三）

àì夳堔傛蜴生んèń 2021-09-20 20:02 366阅读 0赞

### 文章目录 ###

*   *  jQuery事件
     *   *  jQuery绑定事件的方式
         *  jQuery事件的移除
         *  注册事件
         *  jQuery时间冒泡
         *  功能标签的默认行为 a、button
         *  自动触发事件
         *  trigger（）、triggerHander（）的区别
         *  jQuery事件命名空间
         *  什么是事件委托？
         *  事件委托使用的方法delegate（"selector","eventType",fn）
         *  jQuery事件
     *  jQuery动画
     *   *  jQuery动画队列
         *  jQuery淡入淡出动画
         *  jQuery自定义动画
         *  在原来CSS属性值基础上累加属性
     *  综合滚动轮播Demo

## jQuery事件 ##

### jQuery绑定事件的方式 ###

1.  eventName（）
2.  on（eventName，fn）

**二者的区别：**  
通过第一种方式可以调用jQuery中内部定义好的事件。二如果代用原生JS的某些jQuery没有实现的方法时则不能调用。而on（）这种方法刚好不上了这个短板，是jQuery绑定事件有更多方式。  
**jQuery事件的特点：**

1.  可以添加多个事件，事件不会覆盖
2.  可以为通过元素添加多个相同的事件
3.  可以使用自定义的事件
4.  可以自动触发事件

### jQuery事件的移除 ###

off（），用来移除事件，可以传递参数用来移除指定的

### 注册事件 ###

//第一种注册事件的方法
        $("button").click(function(){ 
                console.log("click");
            });
    
        //第二种注册事件的方式，比较灵活使用性更强，可以注册费jQuery事件
        $("button").on("click",function () { 
            console.log("click");
        });

### jQuery时间冒泡 ###

若干个标签嵌套，子元素触发事件后会触发父元素的事件，这种现象称为事件冒泡。  
**去除冒泡的方法：** 在子元素的事件回调函数中return false即可解决。

### 功能标签的默认行为 a、button ###

a标签默认会进行跳转、button默认会跳转到提交数据的页面。为了改变这种行为可在事件的回调函数中返回一个false。

### 自动触发事件 ###

使用trigger（“事件名称”）。

### trigger（）、triggerHander（）的区别 ###

利用trigger（）触发事件会触发一些功能的默认行为，而triggerHander（）则不会触发。

### jQuery事件命名空间 ###

在触发事件的名称后面加“.name”, 使用触发事件的方法时可以触发指定的方法。

### 什么是事件委托？ ###

事件委托就是请别人做事情。  
当jQuery核心函数找到不止一个元素添加事件时，jQuery底层会遍历找到的元素，然后依次为它们注册事件。

### 事件委托使用的方法delegate（“selector”,“eventType”,fn） ###

用来实现一个元素对另一个元素的监听。  
**代码示例：**  
通过点击按钮弹出登陆框，然后在登陆框点击后关闭登陆框。

### jQuery事件 ###

*  mouseover（）移入
 *  mouseout（）移出  
    注意：子元素移入移移出也会触发父类的事件
 *  mouseenter（）移出
 *  mouseleave（）移出  
    这个方法不会触发父类的事件

## jQuery动画 ##

*  show(\[s,\[e\],\[fn\]\]) 显示元素，改变的是display属性，可以传递一个值来控制切换的时间（slow、normal，fast）
 *  hide(\[s,\[e\],\[fn\]\]) 显示元素，改变的是display属性
 *  toggle(\[s\],\[e\],\[fn\]) 切换显示/隐藏

**滑动：**

*  slideDown(\[s\],\[e\],\[fn\]) 展开元素
 *  slideUp(\[s,\[e\],\[fn\]\]) 收起元素
 *  slideToggle(\[s\],\[e\],\[fn\]) 切换展开收起

### jQuery动画队列 ###

jQuery中所有触发的动画都会放到这个队列中，然后依次执行。在极段的时间内多次触发动画效果会导致用户不触发事件之后动画依然在执行。  
解决办法是在执行动画前将该元素的动画都停止掉，该元素调用stop（）方法即可。

### jQuery淡入淡出动画 ###

*  fadeIn(\[s\],\[e\],\[fn\]) 淡入
 *  fadeOut(\[s\],\[e\],\[fn\]) 淡出
 *  fadeTo(\[\[s\],o,\[e\],\[fn\]\]) 淡入到
 *  fadeToggle(\[s,\[e\],\[fn\]\]) 淡入淡出切换

### jQuery自定义动画 ###

使用animate（）方法。  
第一个参数：接受一个对象，各个CSS属性以伪数组形式保存  
第二个参数：指定动画的时长  
第三个参数：指定动画的运动速率，默swing  
第四个参数：动画执行完毕后的回调callBack

$("selector").animate({ 
    	width:500,
    	height:500
    },1000,"linear",function(){ 
    	alert("自定义动画执行完毕，执行了回调函数");
    });

### 在原来CSS属性值基础上累加属性 ###

**代码示例：**

## 综合滚动轮播Demo ##