jquery(2)
文章目录
一、事件
所谓事件就是用户与浏览器交互时触发的功能，例如鼠标点击、鼠标悬停等等。
我们知道html的结构是html–>body–>div(d1)–>div(d2)–>button，当我们点击button标签时实际上也是在点击div(d2)和div(d1)标签，因此html中子事件被触发时，父事件也会跟着触发。
下面我们来总结一下js中的事件触发原理：当事件触发时首先会进入事件捕获阶段，js从html标签开始逐级向内寻找触发事件的标签，例如上面提到的结构会按html–>body–>div(d1)–>div(d2)–>button的顺序找到button标签；然后进入事件触发阶段，找到触发事件的标签后js按事件逻辑执行完代码；最后进入事件冒泡阶段，button的事件触发完以后会按button–>div(d2)–>div(d1)–>body–>html的顺序寻找父标签中是否绑定事件，如果父标签绑定了事件则会随着子标签事件的触发一并被触发。
而在jquery中事件的触发只有事件触发和事件冒泡两个阶段。
另外如果不希望父标签的事件被子标签事件冒泡影响，有以下的方式可以阻止：
//方式一：事件绑定函数return false(既阻止事件冒泡，也阻止默认事件)
$('.d2').click(function (){console.log(22222222222);return false})
//方式二：通过事件对象阻止事件冒泡
$('.d2').click(function (event){
//查看触发事件的类型
console.log(event.type);
//查看触发事件的标签
console.log(event.target)
//查看点击点坐标
console.log(event.pageX)
console.log(event.pageY)
//阻止默认事件触发
event.preventDefault()
//阻止事件冒泡
event.stopPropagation()
})
//方式三：使用不支持冒泡的事件，如mouseenter(鼠标移至)、mouseleave(鼠标移开)
在jquery中的常见事件类型如下：
click()：表示鼠标单击触发
dblclick():表示鼠标双击触发
mouseover():表示鼠标移至元素触发
mouseout()：表示鼠标移开元素触发
focus()：表示聚焦时触发(如鼠标点击文本输入框后的状态)
blur()：表示失焦时触发
keydown()：表示键盘按下时触发
keyup()：表示键盘弹起时触发
change()：表示输入框、选项、文件等内容改变时触发
select()：表示输入框内容被选中时触发
submit()：提交时触发(form表单绑定的默认事件，submit绑定的是click事件)
使用方式：
//绑定单个事件
$('div').click(function(){...})
//绑定多个事件
$('div').bind({
'mouseup': function () {...},
'mousedown': function () {...}
});
移除事件绑定的方式：
//如果unbind不传入参数表示移除所有事件
setTimeout(function () {
$('div').unbind('mouseover');
}, 3000);
如果页面中存在新增加的标签，我们希望给这些标签绑定事件可以使用事件委托的方式：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<ul>
<li><button>1</button></li>
</ul>
<button class="btn">添加</button>
<script>
var count=1
$('.btn').click(function (){
count++;
$(`<li><button>${count}</button></li>`).appendTo($('ul'))
})
//事件委托：添加事件委托以后父标签会给每个指定子标签绑定事件
//事件委托算父标签的事件，on传入的参数分别是事件类型、子标签、事件逻辑
$('ul').on('click','li',function(){console.log($(this).text())})
</script>
</body>
</html>
二、动画效果
元素的显示与隐藏是使用display:none控制的。
show(speed,callback)：显示隐藏的元素。speed为动画时长，可传入’slow’,‘normal’,‘fast’，也可传入数值，单位ms；callback为动画结束的回调函数。
hide(speed,callback)：隐藏显示的元素。
toggle(speed,callback)：如果元素显示则隐藏，如果元素隐藏则显示。
slideDown(speed,callback)：通过高度递增来显示元素。
slideUp(speed,callback)：通过高度递减来隐藏元素。
slideToggle(speed,callback)：如果元素显示则通过高度低减隐藏，如果元素隐藏则通过高度递增显示。
fadeIn(speed,callback)：通过透明度递增的方式显示元素。
fadeOut(speed,callback)：通过透明度递减的方式隐藏元素。
fadeToggle(speed,callback)：…
fadeTo(speed,degree,callback)：将元素透明度改变为degree值(0~1)
animate(params,[speed],[fn])：自定义动画效果，params为动画属性，speed为动画时长，fn为回调函数。例如：$(‘.box’).animate({‘left’: ‘300px’}, 2000).animate({‘top’: ‘300px’}, 2000)
stop([clearQueue],[jumpToEnd])：clearQueue如果设置成true，则清空动画等待队列。jumpToEnd为true则会立即结束所有动画效果。
delay(t)：延时操作，停t秒后进行后面的操作
使用方式：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<style>
.d{width: 200px;height: 200px;background-color: #007bff}
</style>
</head>
<body>
<div class="d"></div>
<button class="btn">变</button>
<script>
$('.btn').click(function (){
$('.d').slideToggle(3000,function (){alert(11111111)})
})
</script>
</body>
</html>
三、each函数和data函数
3.1each函数
jQuery.each(collection, callback(indexInArray, valueOfElement))：collection为对象，indexInArray为索引, valueOfElement为具体的值。该函数用来遍历对象的值。
另外each中return false会提前结束遍历。
l=[1,2,3,4]
$.each(l,function(i,v){console.log(i,v)})
//该函数还可以操作返回数组中的每个值
//不过大部分的jquery函数都具备隐式遍历的功能，可以自动完成返回数组中所有值的操作
$('li').each(function(i,v){$(this).addClass("l1");})
//$('li').addClass("l1")
3.2data函数
data函数可以将数据与html标签关联起来。
//关联数据
$('div').data('username','1234');
//获取数据
$('div').data('username')
//解除关联
$("div").removeData("username");