# jquery动画&遍历&事件绑定

> 前提是导入jquery.js文件`<script src=".../jquery-3.2.1.js"></script>`或者`<script src=".../jquery-3.3.1.min.js"></script>`

## 一、动画

> 选择器选择的jq对象执行了相关的方法，返回的还是jq对象本身，可以利用这个特性进行**链式调用**

> 底层是通过控制【display属性】+【宽高】+【透明】+【定时器】+【清空定时器】实现的

### 1.默认显示和隐藏的方式

1. **`show([speed,[easing],[fn]])`** 显示
    - speed: 动画速度。可取`slow`、`normal`、`fast`，也可以自定义毫秒数值。
    - easing: 切换效果，默认`swing`,可用参数为`linear`
        - `swing`: 慢，中间块，慢
        - `linear`: 匀速
    - fn: 动画执行完毕时执行的函数，选择器中的每个元素执行一次
2. **`hide([speed,[easing],[fn]])`** 隐藏
3. **`toggle([speed],[easing],[fn])`** 显示/隐藏，整合show与hide

```
<div id="box" style="width: 100px;height: 100px;
background-color: darkcyan;display: none"></div>

<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>

$(function () {
    $("#btn1").click(function () {
        $("#box").show("normal", "linear");
    });

    $("#btn2").click(function () {
        $("#box").hide(1000)
    });

    $("#btn3").click(function () {
       $("#box").toggle("fast", "swing")
    });
})
```

### 2.滑动显示和隐藏方式？
1. **`slideDown([speed],[easing],[fn])`**
2. **`slideUp([speed],[easing],[fn])`**
3. **`slideToggle([speed],[easing],[fn])`**

```
<div id="box" style="width: 100px;height: 100px;
background-color: darkcyan;display: none"></div>

<button id="btn1">slideDown</button>
<button id="btn2">slideUp</button>
<button id="btn3">slideToggle</button>

$(function () {
    $("#btn1").click(function () {
        $("#box").slideDown("slow", "linear")
    });

    $("#btn2").click(function () {
        $("#box").slideUp(1000)
    });

    $("#btn3").click(function () {
       $("#box").slideToggle("fast", "swing")
    });
```

### 3.淡入淡出显示和隐藏方式
1. **`fadeIn([speed],[easing],[fn])`**
2. **`fadeOut([speed],[easing],[fn])`**
3. **`fadeToggle([speed],[easing],[fn])`**

```
<div id="box" style="width: 100px;height: 100px;
background-color: darkcyan;display: none"></div>

<button id="btn1">fadeIn</button>
<button id="btn2">fadeOut</button>
<button id="btn3">fadeToggle</button>

$(function () {
    $("#btn1").click(function () {
        $("#box").fadeIn("slow", "linear")
    });

    $("#btn2").click(function () {
        $("#box").fadeOut(1000)
    });

    $("#btn3").click(function () {
       $("#box").fadeToggle("fast", "swing")
    });
```

### 4.animate自定义动画特效

1. 语法：**`animate(params,[speed],[fn])`**
2. 参数
    - params: 一组包含作为动画属性和终值的样式和及其值的集合【key:value】的形式
    - speed: [可选参数]，三种预定义速度【“slow”、“normal”、“fast”】或者毫秒值
    - fn: [可选参数]，动画完成时执行的回调函数，每个元素执行一次。

***html代码***
```
<button id="start">start</button>
<button id="stop">stop</button>
<div id="box" style="width: 100px;height: 100px;
background-color: darkcyan;position: absolute"></div>
```

***同时执行效果***
```
$(function () {
    $("#start").click(function () {
        // 同时执行
        $("#box").animate({
            width: '300px',
            height: '300px',
            left: '100px',
            top: '200px'
        }, 2000)
    });
})
```

***顺序执行【链式调用】***
```
$(function () {
    $("#start").click(function () {
        // 顺序执行
        $("#box").animate({left: '100px'}, 2000)
                 .animate({top: '100px'}, 2000)
                 .animate({left: '0'}, 2000)
                 .animate({top: '0'}, 2000)
    });
})
```

***delay延迟效果***
```
$(function () {
    $("#start").click(function () {
        // 延迟效果
        $("#box").animate({left: '100px'}, 2000)
                 .delay(2000)
                 .animate({top: '100px'}, 2000)
    });
})
```

***stop停止动画效果***
> stop是终止当前正在执行的动画效果，如果有链式调用，不会影响其他的执行
```
$(function () {
    $("#start").click(function () {
        // 顺序执行
        $("#box").animate({left: '200px'}, 2000)
                 .animate({top: '200px'}, 2000)
                 .animate({left: '0'}, 2000)
                 .animate({top: '0'}, 2000)
    });

    // stop停止动画效果
    $("#stop").click(function () {
        $("#box").stop();
    })
})
```

### 5.【案例】右边弹出小广告(核心代码)
```
<div id="box" style="width: 100px;height: 180px;
     background-color: darkcyan;position: fixed;
     right: 0;
     top: 200px;
     display: none;
     border: 2px solid yellowgreen; font-size: 40px;
     color: white;text-align: center">
  宝<br>芝<br>林
</div>

$(function () {
    $("#box")
        .slideDown(1000)
        .click(function () {
            $(this).fadeOut(2000)
        })
})
```

## 二、遍历

### 1.js的遍历方式
```
for(var=0;i<10;i++){}
```

### 2.jquery的遍历方式

#### 1.`jquery对象.each(callback)`
```
jquery对象.each(function(index,element){...})
```
1. 参数介绍
    - index: 元素在集合中的索引
    - element: 集合中的每一个元素对象
    - this: 集合中的每一个元素对象
2. 回调函数返回值
    - true: 如果当前function返回true,结束本次循环，继续下次循环(continue)
    - false: 如果当前function返回为false,则结束循环(break)

```
<p>p1</p>
<p>p2</p>
<p>p3</p>

$(function () {
    $("p").each(function (index, element) {
        if(index === 0)
            return true;

        console.log(index + ":" + element.innerText)

        if(index === 1)
            return false;
    })
})
```

#### 2. `$.each(jq选择器object, [callback])`
```
<p>p1</p>
<p>p2</p>
<p>p3</p>

$(function () {
    $.each($("p"), function (index, element) {
        console.log(index + ":" + element.innerText)
    })
})
```

#### 3. `for..of`:`for(元素对象 of 元素容器)`
> jquery3.0版本之后提供的方式
```
<p>p1</p>
<p>p2</p>
<p>p3</p>

$(function () {
    for(element of $("p")) {
        console.log(element.innerText)
    }
})
```

## 三、事件绑定

### 1.事件概念
> 事件流：dom树接受事件的顺序，“DOM2级事件”规定的事件流包括三个阶段
- 事件捕获阶段
- 目标阶段
- 事件冒泡阶段

***JQuery不支持事件的捕获，没有事件捕获的阶段***

1. 阻止事件默认事件与事件冒泡
> 阻止事件冒泡可以应用在模态框中：点击蒙版处取消模态框，而点击模态框则不会取消
```
$('a').click(function (ev) {
    // 阻止a标签的默认事件
    ev.preventDefault();

    // 阻止事件冒泡
    ev.stopPropagation();

    // 这句代码可以同时阻止默认行为和冒泡行为
    return false;
})
```

### 2. jquery标准的绑定方式
1. **`jq对象.事件方法(回调函数)`**;
    - 注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
    - 表单对象.submit()：让表单提交

### 3. on绑定/代理事件;off解除绑定
1. **`jq对象.on("事件名称", 回调函数)`**：绑定事件
> 在事件之后添加的相应dom节点不能触发事件,事件代理能解决在事件绑定之后添加的新dom元素能触发相应的事件核心思想就是：【**自己不能完成当前的事件 交给父级元素来做这件事情**】

2. **`父级jq对象.on('事件名字','子选择器','回调函数')`**：代理事件
```
$('ul').on('click','#new,.one',function () {
    console.log(this);
});

$('ul').append('<li id="new">新插入的</li>');
```

3. **`jq对象.off("事件名称")`**：解除绑定
    - 注意：如果off方法不传递任何参数，则将组建上的所有事件全部解绑

### 4. 事件切换：toggle
1. **`jq对象.toggle(fn1,fun2...)`**:
    - 当单击jq对象对应的组件后，会执行fn1,第二次点击会执行fn2...
> 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
```
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
```

### 5. bind 事件绑定方式

1. **`jq对象.bind("事件类型 事件类型...", fn回调函数)`**：给当前的dom元素绑定事件
```
$('选择器').bind('click mouseenter',function () {
    alert('事件被绑定了')
});

// ---------- //

function funOne(){};
finction funTwo(){};
$("选择器").bind({
    'click':funOne,
    'mouseover':funTwo
})
```

2. **`unbind()`** 绑定事件的移除
```
$("选择器").unbind() // 移除所有事件
$("选择器").unbind('click') // 移除单击事件
```

3. 【了解】绑定自定义事件
```
//绑定自定义的事件,接受的参数只能是一一对应，不能用一个变量接受一个数组。
$('button').bind('myClick',function(ev,a,b,c){
    alert(ev);
    alert(a + '' + b + c);
});

//触发自定义的事件用trigger ,可以给相应的事件传递参数
$('button').trigger('myClick',[1,2,3])
```


## 四、jq事件大杂烩

### 1.鼠标事件

> 鼠标事件 单击 双击 鼠标移入 鼠标移出 鼠标进入/离开 获取焦点 失去焦点等等

1. 点击事件
```
$('#box').click(function () {
    console.log("单击事件");
});
```

2. 双击事件(用的比较少) 一般点击和双击不回同时出现在同一个dom元素上
```
$('#box').dblclick(function () {
    console.log('双击事件');
}).delay(1000)
```

3. 鼠标按下mousedown和弹起mouseup
```
$('#box').mousedown(function () {
    console.log('mousedown');
});
$('#box').mouseup(function () {
    console.log('mouseup');
});
```

4. 键盘按下和键盘弹起
```
$('input[type=password]').keydown(function(){
    console.log($(this).val());
});
$('input[type=password]').keyup(function(){
    console.log($(this).val());
})
```

5. 移入和移出mouseover mouseout 鼠标指针穿过/离开【**被选元素**】或者当前元素的【**子元素**】，会触发事件
```
$('#box').mouseover(function () {
    console.log('mouseover')
});
$('#box').mouseout(function () {
    console.log('mouseout')
});
```

6. 进入和离开 mouseenter mouseleave 鼠标指针只在穿过/离开【**被选元素**】触发事件
```
$('#box').mouseenter(function () {
    console.log('mouseenter')
});
$('#box').mouseleave(function () {
    console.log('mouseleave')
})
```

7. 鼠标移动的时候
```
$('#box').mousemove(function () {
    console.log('mousemove');
})
```

8. 获取焦点用focus(jquery表单获取值用val,而不是value)
```
$('input[type=text]').focus(function () {
    console.log($(this).val());
});
```

9. 失去焦点用blur
```
$('input[type=text]').blur(function () {
    console.log($(this).val());
});
```

### 2.表单事件
> 表单事件:change内容改变/selected选项被选中


1. change() 表单元素发生改变时出发的事件
> 仅限于input textarea selected
```
$('select').change(function () {
    console.log($('select option:selected').text()); //选择被选中的选项
    $('.show').text($('select option:selected').text());
});
```

2. select选中事件,
> 仅限于input type=text/textarea中
```
$("#other").select(function () {
    console.log($(this).val())
});
```

2. submit
```
$('form').submit(function (ev) {
    //阻止默认事件的发生(点击submit属性的input会触发form的提交行为)
    ev.preventDefault();
})
```

## 五、插件?????
> 增强jquery的功能

1. `$.fn.extend(object)`: 增强通过jquery获取的对象的功能 `$("#id")`
2. `$.extend(object)`: 增强jquery对象自身的功能 `$/JQuery`

# jquery动画&遍历&事件绑定

> 前提是导入jquery.js文件`<script src=".../jquery-3.2.1.js"></script>`或者`<script src=".../jquery-3.3.1.min.js"></script>`

## 一、动画

> 选择器选择的jq对象执行了相关的方法，返回的还是jq对象本身，可以利用这个特性进行**链式调用**

> 底层是通过控制【display属性】+【宽高】+【透明】+【定时器】+【清空定时器】实现的

### 1.默认显示和隐藏的方式

1. **`show([speed,[easing],[fn]])`** 显示
    - speed: 动画速度。可取`slow`、`normal`、`fast`，也可以自定义毫秒数值。
    - easing: 切换效果，默认`swing`,可用参数为`linear`
        - `swing`: 慢，中间块，慢
        - `linear`: 匀速
    - fn: 动画执行完毕时执行的函数，选择器中的每个元素执行一次
2. **`hide([speed,[easing],[fn]])`** 隐藏
3. **`toggle([speed],[easing],[fn])`** 显示/隐藏，整合show与hide

```
<div id="box" style="width: 100px;height: 100px;
background-color: darkcyan;display: none"></div>

<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>

$(function () {
    $("#btn1").click(function () {
        $("#box").show("normal", "linear");
    });

    $("#btn2").click(function () {
        $("#box").hide(1000)
    });

    $("#btn3").click(function () {
       $("#box").toggle("fast", "swing")
    });
})
```

### 2.滑动显示和隐藏方式？
1. **`slideDown([speed],[easing],[fn])`**
2. **`slideUp([speed],[easing],[fn])`**
3. **`slideToggle([speed],[easing],[fn])`**

```
<div id="box" style="width: 100px;height: 100px;
background-color: darkcyan;display: none"></div>

<button id="btn1">slideDown</button>
<button id="btn2">slideUp</button>
<button id="btn3">slideToggle</button>

$(function () {
    $("#btn1").click(function () {
        $("#box").slideDown("slow", "linear")
    });

    $("#btn2").click(function () {
        $("#box").slideUp(1000)
    });

    $("#btn3").click(function () {
       $("#box").slideToggle("fast", "swing")
    });
```

### 3.淡入淡出显示和隐藏方式
1. **`fadeIn([speed],[easing],[fn])`**
2. **`fadeOut([speed],[easing],[fn])`**
3. **`fadeToggle([speed],[easing],[fn])`**

```
<div id="box" style="width: 100px;height: 100px;
background-color: darkcyan;display: none"></div>

<button id="btn1">fadeIn</button>
<button id="btn2">fadeOut</button>
<button id="btn3">fadeToggle</button>

$(function () {
    $("#btn1").click(function () {
        $("#box").fadeIn("slow", "linear")
    });

    $("#btn2").click(function () {
        $("#box").fadeOut(1000)
    });

    $("#btn3").click(function () {
       $("#box").fadeToggle("fast", "swing")
    });
```

### 4.animate自定义动画特效

1. 语法：**`animate(params,[speed],[fn])`**
2. 参数
    - params: 一组包含作为动画属性和终值的样式和及其值的集合【key:value】的形式
    - speed: [可选参数]，三种预定义速度【“slow”、“normal”、“fast”】或者毫秒值
    - fn: [可选参数]，动画完成时执行的回调函数，每个元素执行一次。

***html代码***
```
<button id="start">start</button>
<button id="stop">stop</button>
<div id="box" style="width: 100px;height: 100px;
background-color: darkcyan;position: absolute"></div>
```

***同时执行效果***
```
$(function () {
    $("#start").click(function () {
        // 同时执行
        $("#box").animate({
            width: '300px',
            height: '300px',
            left: '100px',
            top: '200px'
        }, 2000)
    });
})
```

***顺序执行【链式调用】***
```
$(function () {
    $("#start").click(function () {
        // 顺序执行
        $("#box").animate({left: '100px'}, 2000)
                 .animate({top: '100px'}, 2000)
                 .animate({left: '0'}, 2000)
                 .animate({top: '0'}, 2000)
    });
})
```

***delay延迟效果***
```
$(function () {
    $("#start").click(function () {
        // 延迟效果
        $("#box").animate({left: '100px'}, 2000)
                 .delay(2000)
                 .animate({top: '100px'}, 2000)
    });
})
```

***stop停止动画效果***
> stop是终止当前正在执行的动画效果，如果有链式调用，不会影响其他的执行
```
$(function () {
    $("#start").click(function () {
        // 顺序执行
        $("#box").animate({left: '200px'}, 2000)
                 .animate({top: '200px'}, 2000)
                 .animate({left: '0'}, 2000)
                 .animate({top: '0'}, 2000)
    });

    // stop停止动画效果
    $("#stop").click(function () {
        $("#box").stop();
    })
})
```

### 5.【案例】右边弹出小广告(核心代码)
```
<div id="box" style="width: 100px;height: 180px;
     background-color: darkcyan;position: fixed;
     right: 0;
     top: 200px;
     display: none;
     border: 2px solid yellowgreen; font-size: 40px;
     color: white;text-align: center">
  宝<br>芝<br>林
</div>

$(function () {
    $("#box")
        .slideDown(1000)
        .click(function () {
            $(this).fadeOut(2000)
        })
})
```

## 二、遍历

### 1.js的遍历方式
```
for(var=0;i<10;i++){}
```

### 2.jquery的遍历方式

#### 1.`jquery对象.each(callback)`
```
jquery对象.each(function(index,element){...})
```
1. 参数介绍
    - index: 元素在集合中的索引
    - element: 集合中的每一个元素对象
    - this: 集合中的每一个元素对象
2. 回调函数返回值
    - true: 如果当前function返回true,结束本次循环，继续下次循环(continue)
    - false: 如果当前function返回为false,则结束循环(break)

```
<p>p1</p>
<p>p2</p>
<p>p3</p>

$(function () {
    $("p").each(function (index, element) {
        if(index === 0)
            return true;

        console.log(index + ":" + element.innerText)

        if(index === 1)
            return false;
    })
})
```

#### 2. `$.each(jq选择器object, [callback])`
```
<p>p1</p>
<p>p2</p>
<p>p3</p>

$(function () {
    $.each($("p"), function (index, element) {
        console.log(index + ":" + element.innerText)
    })
})
```

#### 3. `for..of`:`for(元素对象 of 元素容器)`
> jquery3.0版本之后提供的方式
```
<p>p1</p>
<p>p2</p>
<p>p3</p>

$(function () {
    for(element of $("p")) {
        console.log(element.innerText)
    }
})
```

## 三、事件绑定

### 1.事件概念
> 事件流：dom树接受事件的顺序，“DOM2级事件”规定的事件流包括三个阶段
- 事件捕获阶段
- 目标阶段
- 事件冒泡阶段

***JQuery不支持事件的捕获，没有事件捕获的阶段***

1. 阻止事件默认事件与事件冒泡
> 阻止事件冒泡可以应用在模态框中：点击蒙版处取消模态框，而点击模态框则不会取消
```
$('a').click(function (ev) {
    // 阻止a标签的默认事件
    ev.preventDefault();

    // 阻止事件冒泡
    ev.stopPropagation();

    // 这句代码可以同时阻止默认行为和冒泡行为
    return false;
})
```

### 2. jquery标准的绑定方式
1. **`jq对象.事件方法(回调函数)`**;
    - 注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
    - 表单对象.submit()：让表单提交

### 3. on绑定/代理事件;off解除绑定
1. **`jq对象.on("事件名称", 回调函数)`**：绑定事件
> 在事件之后添加的相应dom节点不能触发事件,事件代理能解决在事件绑定之后添加的新dom元素能触发相应的事件核心思想就是：【**自己不能完成当前的事件 交给父级元素来做这件事情**】

2. **`父级jq对象.on('事件名字','子选择器','回调函数')`**：代理事件
```
$('ul').on('click','#new,.one',function () {
    console.log(this);
});

$('ul').append('<li id="new">新插入的</li>');
```

3. **`jq对象.off("事件名称")`**：解除绑定
    - 注意：如果off方法不传递任何参数，则将组建上的所有事件全部解绑

### 4. 事件切换：toggle
1. **`jq对象.toggle(fn1,fun2...)`**:
    - 当单击jq对象对应的组件后，会执行fn1,第二次点击会执行fn2...
> 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
```
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
```

### 5. bind 事件绑定方式

1. **`jq对象.bind("事件类型 事件类型...", fn回调函数)`**：给当前的dom元素绑定事件
```
$('选择器').bind('click mouseenter',function () {
    alert('事件被绑定了')
});

// ---------- //

function funOne(){};
finction funTwo(){};
$("选择器").bind({
    'click':funOne,
    'mouseover':funTwo
})
```

2. **`unbind()`** 绑定事件的移除
```
$("选择器").unbind() // 移除所有事件
$("选择器").unbind('click') // 移除单击事件
```

3. 【了解】绑定自定义事件
```
//绑定自定义的事件,接受的参数只能是一一对应，不能用一个变量接受一个数组。
$('button').bind('myClick',function(ev,a,b,c){
    alert(ev);
    alert(a + '' + b + c);
});

//触发自定义的事件用trigger ,可以给相应的事件传递参数
$('button').trigger('myClick',[1,2,3])
```


## 四、jq事件大杂烩

### 1.鼠标事件

> 鼠标事件 单击 双击 鼠标移入 鼠标移出 鼠标进入/离开 获取焦点 失去焦点等等

1. 点击事件
```
$('#box').click(function () {
    console.log("单击事件");
});
```

2. 双击事件(用的比较少) 一般点击和双击不回同时出现在同一个dom元素上
```
$('#box').dblclick(function () {
    console.log('双击事件');
}).delay(1000)
```

3. 鼠标按下mousedown和弹起mouseup
```
$('#box').mousedown(function () {
    console.log('mousedown');
});
$('#box').mouseup(function () {
    console.log('mouseup');
});
```

4. 键盘按下和键盘弹起
```
$('input[type=password]').keydown(function(){
    console.log($(this).val());
});
$('input[type=password]').keyup(function(){
    console.log($(this).val());
})
```

5. 移入和移出mouseover mouseout 鼠标指针穿过/离开【**被选元素**】或者当前元素的【**子元素**】，会触发事件
```
$('#box').mouseover(function () {
    console.log('mouseover')
});
$('#box').mouseout(function () {
    console.log('mouseout')
});
```

6. 进入和离开 mouseenter mouseleave 鼠标指针只在穿过/离开【**被选元素**】触发事件
```
$('#box').mouseenter(function () {
    console.log('mouseenter')
});
$('#box').mouseleave(function () {
    console.log('mouseleave')
})
```

7. 鼠标移动的时候
```
$('#box').mousemove(function () {
    console.log('mousemove');
})
```

8. 获取焦点用focus(jquery表单获取值用val,而不是value)
```
$('input[type=text]').focus(function () {
    console.log($(this).val());
});
```

9. 失去焦点用blur
```
$('input[type=text]').blur(function () {
    console.log($(this).val());
});
```

### 2.表单事件
> 表单事件:change内容改变/selected选项被选中


1. change() 表单元素发生改变时出发的事件
> 仅限于input textarea selected
```
$('select').change(function () {
    console.log($('select option:selected').text()); //选择被选中的选项
    $('.show').text($('select option:selected').text());
});
```

2. select选中事件,
> 仅限于input type=text/textarea中
```
$("#other").select(function () {
    console.log($(this).val())
});
```

2. submit
```
$('form').submit(function (ev) {
    //阻止默认事件的发生(点击submit属性的input会触发form的提交行为)
    ev.preventDefault();
})
```

## 五、插件?????
> 增强jquery的功能

1. `$.fn.extend(object)`: 增强通过jquery获取的对象的功能 `$("#id")`
2. `$.extend(object)`: 增强jquery对象自身的功能 `$/JQuery`