jQuery事件操作与动画效果
事件操作
常见事件
| 事件 | 描述 |
|---|---|
| click() | 单击事件 |
| dbclick() | 双击事件 |
| hover() | 鼠标指针悬停事件和鼠标指针离开事件 |
| focus() | 聚焦事件 |
| blur() | 失焦事件 |
绑定方式
// 第一种
$().click(function(){
})
// 第二种
$().on('click',function(){
})
克隆案例
<button id="d1">克隆按钮</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件
$('body').append($(this).clone(true)) // 克隆事件
})
</script>
悬浮事件hover()
hover()有两次触发条件：鼠标悬浮和鼠标移开，如果要使这两个事件有不同操作，需要写两个函数。
$('p').hover(
function () { // 悬浮触发
this.style.color = 'red'
},
function () { // 移走触发
this.style.color = 'black'
}
)
监听input输入值事件
<input type="text" id="i1">
<script>
$('#i1').on('input',function () {
console.log($(this).val())
})
</script>
阻止后续事件
如果给已经有事件的标签绑定事件，那么会依次执行；比如form表单中的重置按钮已经有了一个重置的事件。
如果想要取消后续事件的执行，可以使用两种方式阻止：
方式一：函数返回false
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
方式二：使用特殊方法
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})
事件冒泡概念
在多个标签嵌套的并且都有相同事件的情况下，会出现逐级汇报的现象，称为事件冒泡。
事件委托
针对动态创建的标签，提前写好的事件默认是无法生效的。比如我先给所有p标签设置了单击事件，打开网页后添加的p标签都是没有单击事件的。
这时候就需要用到事件委托：把一个标签里的一个事件都委托给子标签。
// 将body内所有的点击事件交给p标签处理
$('body').on('click', 'p', function (){
$(this).css('color','red')
})
动画效果
| 动画(speed单位毫秒) | 描述 |
|---|---|
| hide(speed) | 以左上角为终点消失 |
| show(speed) | 以左上角为起点出现 |
| slideUp(speed) | 以顶部为终点收起 |
| slideDown(speed) | 以顶部为起点展开 |
| fadeIn(speed) | 淡入 |
| fadeOut(speed) | 淡出 |
| animate() | 自定义动画 |
自定义动画实现点赞效果：
点赞动画示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
