unbind() 方法移除被选元素的事件处理程序。slideDown() 可以使元素逐步延伸显示slideUp()则使元素逐步缩短直至隐藏slideToggle() 方法在被选元素slideDown()和slideUp()上进行之间的切换resize监听浏览器尺寸发生变化scroll浏览器监听滚动事件
动画实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
left: 20px;
top: 20px;
}
div img {
border-radius: 50%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<button>点击</button>
<div>
<img src="./2.jpg" alt="">
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
//使图片向上收缩
$('button').click(function () {
$('div').slideToggle('500')
//slideToggle() 方法在被选元素slideDown()和slideUp()上进行之间的切换。隐藏和可见
$('div').fadeToggle('500')
//fadeToggle() 方法在fadeIn()和fadeOut()方法之间切换。淡入和淡出
})
//气球上下浮动偏移
$('div').click(function () {
$('div').animate({
left: '200px',
top: '500px'
}, 2000, function () {
$(this).animate({
left: '400px',
top: '20px'
}, 2000, function () {
$(this).animate({
left: '600px',
top: '500px'
}, 2000, function () {
$(this).animate({
left: '800px',
top: '20px'
}, 2000, function () {
$('div').unbind('click')
})
})
})
})
})
//气球来回一线
$('button').click(function () {
$('div').animate({
left: '100px',
top: '200px'
}, 2000, function () {
$(this).animate({
left: '40px',
top: '40px'
}, 2000, function () {
$(this).css('background', 'yellow')
$(this).css('width', '200px')
})
})
})
</script>
</body>
</html>
未来事件
<body>
<button id="btn1">点击添加学生</button>
<button id="btn2">解绑li点击事件</button>
<ul>
<li>我是学生1</li>
<li>我是学生2</li>
<li>我是学生3</li>
</ul>
<script src="./jquery-1.12.4.js"></script>
<script>
let count = 3;
$('#btn1').on('click', function () {
count++;
$('ul').append($('<li>我是学生' + count + '</li>'))
})
$('body').on('click', 'li', function () {
//使用on未来事件给已存在的body元素绑定 点击li的时候出现对应的事件
alert($(this).text());
})
$('#btn2').click(function () {
$('body').off('click')
//未来元素要使用body方法绑定来实现li对off解绑
})
</script>
</body>
