黑马程序员技术交流社区
标题:
【成都校区】jquery动画&遍历&事件绑定
[打印本页]
作者:
哈哈大圣
时间:
2019-1-3 09:00
标题:
【成都校区】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`
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2