jQuery（二）——操作标签、动画
（一）jQuery中的入口函数
$(document).ready(function() {
函数体代码
})
只需要等DOM树创建完毕就可以执行。
简写格式：（推荐使用）
$(function(){
函数体代码
})
（二）jQuery操作标签的属性
1.设置标签的属性
语法：jQuery对象.attr(name,value);
代码举栗：
<body>
<div title="im div" pid="10010"></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('div').attr('pwd','111111'); //设置
$('div').attr('pid','10086'); //修改
</script>
</body>
2.获取标签的属性
语法：jQuery对象.attr(name);
代码举栗：
<body>
<div title="im div" pid="10010"></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('div').attr('pid','10086'); //修改
var v = $('div').attr('pid');
console.log(v); //10086
</script>
</body>
3.移除标签的属性
语法：jQuery对象.removeAttr(name);
代码举栗：
<body>
<div title="im div" pid="10010"></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('div').removeAttr('pid');
</script>
</body>
4.放大镜切换案例
自定义标签：把未来需要的属性暂存到标签中
代码举栗：
<body>
<div class="w">
<div class="leftBox">
<div class="top"></div>
<ul>
<li class="active">
<img src="img/s1.jpg" msrc="m1.jpg" bsrc="b1.jpg">
</li>
<li>
<img src="img/s2.jpg" msrc="m2.jpg" bsrc="b2.jpg">
</li>
<li>
<img src="img/s3.jpg" msrc="m3.jpg" bsrc="b3.jpg">
</li>
</ul>
</div>
<div class="rightBox">
<img src="img/b1.jpg" alt="">
</div>
</div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var path = 'img';
$('li').mouseenter(function () {
//active类名控制当前小图的红色边框
$(this).addClass('active').siblings().removeClass();
//中图
var msrc = $(this).find('img').attr('msrc');
$('.top img').attr('src', path + msrc);
//大图
var msrc = $(this).find('img').attr('bsrc');
$('.rightBox img').attr('src', path + bsrc);
});
</script>
</body>
5.操作表单元素属性
<body>
<input type="checkbox" checked>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var v = $('input').attr('checked');
//打印字符串checked，而不是布尔值。如果input中没有checked，打印undefined
console.log(v);
</script>
</body>
所以不建议使用attr操作表单元素的属性。
使用prop方法，prop方法可以操作表单元素属性。
语法：$('input').prop('属性名');
针对表单元素：checked selected disabled都是布尔值，应该返回true或false。
代码举栗：
<body>
<input type="checkbox" checked>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var v = $('input').prop('checked');
console.log(v); //选中(有checked))打印true，没选中打印false
//使用原生DOM方法也可以操作，但不建议使用
// var v = $('input')[0].checked;
// console.log(v); //false
</script>
</body>
6.点击按钮发送验证码案例
<body>
<input type="text" value="10010">
<button>发送验证码</button>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('button').click(function() {
$(this).prop('disabled', true); //禁用按钮
var time = 60;
$('button').text(time + 's后重新发送');
var flag = setInterval(function() {
time--;
$('button').text(time + 's后重新发送');
if(time == 0) {
clearInterval(flag);
$('button').text('发送验证码');
$('botton').prop('disabled',false);
}
},1000);
});
</script>
</body>
在定时器里面'button'不能改成this，但定时器外部的this代表的是按钮。因为在定时器中，this默认指向window。
可以在外部var that = this; 把this暂存到that中，然后在定时器内部使用$(that)。
（三）jQuery操作标签内容
1.操作标签内部文本
获取的仅仅是文本：（相当于DOM中的innerText）
语法：jQuery对象.text();
设置语法：jQuery对象.text('文本内容');
代码举栗：
<body>
<div>内容</div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//获取
var v = ('div').text();
console.log(v); //返回字符串：div中的内容
//设置
var s = ('div').text('我是新内容');
//设置完毕后，重新返回点之前的jQuery对象。所以.text()后面还可以继续链式调用其他方法，比如.css()
console.log(s);
</script>
</body>
2.操作标签内部所有内容
获取文本和内部标签：（相当于DOM中的innerHTML）
语法：jQuery对象.html();
设置标签时标签会被渲染：
语法：jQuery对象.html('文本内容');
代码举栗：
<body>
<div>内容</div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('div').html('<h2>内容</h2>').css('color','blue'); //后面可以继续链式调用
var v = $('div').html();
console.log(v); //打印<h2>内容</h2>
</script>
</body>
3.操作表单元素的内容
获取表单元素的value：（相当于DOM中的value）
语法：jQuery对象.val();
设置表单元素的value：
语法：jQuery对象.val('文本内容');
代码举栗：
<body>
<input type="text">
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('input').val('张三');
var v = $('input').val().css('color','red'); //报错，返回的不是jQuery对象，不能.css
console.log(v);
</script>
</body>
（四）jQuery动画
1.基本动画
1）缩放
显示语法：jQuery对象.show(speed,easing,fn);
隐藏语法：jQuery对象.hide(speed,easing,fn);
切换语法：jQuery对象.toggle(speed,easing,fn);
三个属性都是可选的。
speed表示动画时长（速度），单位毫秒
easing表示运动方式，默认swing缓冲，linear匀速。
代码举栗：
<style>
div {
width: 500px;
height: 500px;
background: pink;
}
</style>
<body>
<button class="btn1">显示</button>
<button class="btn2">隐藏</button>
<button class="btn3">切换</button>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//显示
$('.btn1').click(function() {
// $('div').show();//直接显示。实际上是控制display的值
$('div').show(1000);
});
//隐藏
$('.btn2').click(function() {
$('div').hide(1000);
});
//切换
$('.btn3').click(function() {
$('div').toggle(1000);
});
</script>
</body>
第三个参数fn：是函数
代码举栗：
<body>
<button class="btn1">显示</button>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('.btn1').click(function() {
$('div').show(1000, function() {
//动画完毕后要执行的程序
$('div').css('background','red');
//不能写在.show的外面。因为show中有定时器，定时器代码会最后执行。
});
});
</script>
</body>
2）上卷下拉
显示语法：jQuery对象.slideDown(speed,easing,fn);
隐藏语法：jQuery对象.slideUp(speed,easing,fn);
切换语法：jQuery对象.slideToggle(speed,easing,fn);
代码举栗：
<body>
<button class="btn1">显示</button>
<button class="btn2">隐藏</button>
<button class="btn3">切换</button>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//显示
$('.btn1').click(function() {
$('div').slideDown(1000);
});
//隐藏
$('.btn2').click(function() {
$('div').slideUp(1000);
});
//切换
$('.btn3').click(function() {
$('div').slideToggle(1000);
});
</script>
</body>
3）淡入淡出
显示语法：jQuery对象.fadeIn(speed,easing,fn);
隐藏语法：jQuery对象.fadeOut(speed,easing,fn);
切换语法：jQuery对象.fadeToggle(speed,easing,fn);
代码举栗：
<body>
<button class="btn1">显示</button>
<button class="btn2">隐藏</button>
<button class="btn3">切换</button>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//显示
$('.btn1').click(function() {
$('div').fadeIn(1000);
});
//隐藏
$('.btn2').click(function() {
$('div').fadeOut(1000);
});
//切换
$('.btn3').click(function() {
$('div').fadeToggle(1000);
});
</script>
</body>
2.自定义动画
语法：animate(params,[speed],[easing],[fn]);
speed、easing、fn属性可选。
param需要传入一个对象。不可选，必须要写。
代码举栗：
<style>
div {
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 0;
}
</style>
<body>
<button>运动</button>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('button').click(function() {
$('div').animate({
//在jQuery中只有样式为数值的才可以动画。比如background不可以设置动画
left: 1000,
width: 500,
height: 500
},2000,linear);
});
</script>
</body>
3.停止动画
语法：jQuery对象.stop(clearQueue,jumpToEnd);
clearQueue：
true表示清空该物体所有动画（清空队列）。
false表示仅仅清除当前正在运动这一个动画。默认是false
jumpToEnd：
true表示停止动画，并且直接完成运动目标。
false表示停止动画，保持当前停止的状态。不会运动到目标。默认是false
开发中常用的stop方法，一般不传入实参。使用默认值。在animate前面加stop()方法。
代码举栗：
$('div').stop().animate({ left: 1000, width: 500, height: 500 },2000,linear);
