jquery动画&遍历&事件绑定
前提是导入jquery.js文件
<script src=".../jquery-3.2.1.js"></script>或者<script src=".../jquery-3.3.1.min.js"></script>
一、动画
选择器选择的jq对象执行了相关的方法，返回的还是jq对象本身，可以利用这个特性进行链式调用
底层是通过控制【display属性】+【宽高】+【透明】+【定时器】+【清空定时器】实现的
1.默认显示和隐藏的方式
-
show([speed,[easing],[fn]])显示- speed: 动画速度。可取
slow、normal、fast，也可以自定义毫秒数值。 - easing: 切换效果，默认
swing,可用参数为linear-
swing: 慢，中间块，慢 -
linear: 匀速
-
- fn: 动画执行完毕时执行的函数，选择器中的每个元素执行一次
- speed: 动画速度。可取
-
hide([speed,[easing],[fn]])隐藏 -
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.滑动显示和隐藏方式？
slideDown([speed],[easing],[fn])slideUp([speed],[easing],[fn])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.淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])fadeOut([speed],[easing],[fn])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自定义动画特效
- 语法：
animate(params,[speed],[fn]) - 参数
- 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){...})
- 参数介绍
- index: 元素在集合中的索引
- element: 集合中的每一个元素对象,dom对象
- this: 集合中的每一个元素对象，dom对象
- 回调函数返回值
- 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])：(与第1种是等价的)
<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不支持事件的捕获，没有事件捕获的阶段
- 阻止事件默认事件与事件冒泡
阻止事件冒泡可以应用在模态框中：点击蒙版处取消模态框，而点击模态框则不会取消
$('a').click(function (ev) {
// 阻止a标签的默认事件
ev.preventDefault();
// 阻止事件冒泡
ev.stopPropagation();
// 这句代码可以同时阻止默认行为和冒泡行为
return false;
})
2. jquery标准的绑定方式
-
jq对象.事件方法(回调函数);- 注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
- 表单对象.submit()：让表单提交
$("#input").focus() //让文本获取焦点
3. on绑定/代理事件;off解除绑定
-
jq对象.on("事件名称", 回调函数)：绑定事件
在事件之后添加的相应dom节点不能触发事件,事件代理能解决在事件绑定之后添加的新dom元素能触发相应的事件核心思想就是：【自己不能完成当前的事件 交给父级元素来做这件事情】
-
父级jq对象.on('事件名字','子选择器','回调函数')：代理事件
$('ul').on('click','#new,.one',function () {
console.log(this);
});
$('ul').append('<li id="new">新插入的</li>');
- delegate事件代理专业户
$("父选择器").delegate("子选择器", "事件", function() {...})
-
jq对象.off("事件名称")：解除绑定- 注意：如果off方法不传递任何参数，则将组件上的所有事件全部解绑
4. 事件切换：toggle
-
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 事件绑定方式
-
jq对象.bind("事件类型 事件类型...", fn回调函数)：给当前的dom元素绑定事件
$('选择器').bind('click mouseenter',function () {
alert('事件被绑定了')
});
// ---------- //
function funOne(){};
finction funTwo(){};
$("选择器").bind({
'click':funOne,
'mouseover':funTwo
})
-
unbind()绑定事件的移除
$("选择器").unbind() // 移除所有事件
$("选择器").unbind('click') // 移除单击事件
- 【了解】绑定自定义事件
//绑定自定义的事件,接受的参数只能是一一对应，不能用一个变量接受一个数组。
$('button').bind('myClick',function(ev,a,b,c){
alert(ev);
alert(a + '' + b + c);
});
//触发自定义的事件用trigger ,可以给相应的事件传递参数
$('button').trigger('myClick',[1,2,3])
四、jq事件大杂烩
1.鼠标事件
鼠标事件 单击 双击 鼠标移入 鼠标移出 鼠标进入/离开 获取焦点 失去焦点等等
- 点击事件
$('#box').click(function () {
console.log("单击事件");
});
- 双击事件(用的比较少) 一般点击和双击不回同时出现在同一个dom元素上
$('#box').dblclick(function () {
console.log('双击事件');
}).delay(1000)
- 鼠标按下mousedown和弹起mouseup
$('#box').mousedown(function () {
console.log('mousedown');
});
$('#box').mouseup(function () {
console.log('mouseup');
});
- 键盘按下和键盘弹起
$('input[type=password]').keydown(function(){
console.log($(this).val());
});
$('input[type=password]').keyup(function(){
console.log($(this).val());
})
- 移入和移出mouseover mouseout 鼠标指针穿过/离开【被选元素】或者当前元素的【子元素】，会触发事件
$('#box').mouseover(function () {
console.log('mouseover')
});
$('#box').mouseout(function () {
console.log('mouseout')
});
- 进入和离开 mouseenter mouseleave 鼠标指针只在穿过/离开【被选元素】触发事件
$('#box').mouseenter(function () {
console.log('mouseenter')
});
$('#box').mouseleave(function () {
console.log('mouseleave')
})
- 鼠标移动的时候
$('#box').mousemove(function () {
console.log('mousemove');
})
- 获取焦点用focus(jquery表单获取值用val,而不是value)
$('input[type=text]').focus(function () {
console.log($(this).val());
});
- 失去焦点用blur
$('input[type=text]').blur(function () {
console.log($(this).val());
});
2.表单事件
表单事件:change内容改变/selected选项被选中
- change() 表单元素发生改变时出发的事件
仅限于input textarea selected
$('select').change(function () {
console.log($('select option:selected').text()); //选择被选中的选项
$('.show').text($('select option:selected').text());
});
- select选中事件,
仅限于input type=text/textarea中
$("#other").select(function () {
console.log($(this).val())
});
- submit
$('form').submit(function (ev) {
//阻止默认事件的发生(点击submit属性的input会触发form的提交行为)
ev.preventDefault();
})
五、插件【了解】
自定义一些方法功能，增强jquery
-
$.fn.extend({...}): 增强通过jquery获取的对象的功能$("#id")
<button id="checked">全选</button>
<button id="unchecked">全不选</button> <br>
<input type="checkbox"> <input type="checkbox">
<input type="checkbox"> <input type="checkbox">
$(function () {
// 自定义函数功能
$.fn.extend({
choice: function () {
// 这里的this是jquery对象
this.prop("checked", true)
},
unchoice: function f() {
this.prop("checked", false)
}
});
$("#checked").click(function () {
$("input").choice();
})
$("#unchecked").click(function () {
$("input").unchoice();
})
})
-
$.extend({...}): 增强jquery对象自身的功能$/JQuery
$(function () {
$.extend({
max: function (a, b) {
return a > b ? a : b;
},
min: function (a, b) {
return a < b ? a : b;
}
});
console.log($.max(5, 6))
console.log($.min(5, 6))
})
