jQuery系统的学习(一)的时候,我学习到了jquery滑动的效果。
今天我接着往下学习。
jQuery 效果- 动画
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
- 必须的params参数定义形成动画的CSS属性。
- 可选的speed参数规定效果的时长。值包括slow、fast或毫秒。、
- 可选的callback参数是动画完成后所执行的函数名称。
默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
background: red;height: 200px;width: 200px;position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>向右移动</button>
<div></div>
</body>
</html>
jqurey停止动画
jqurey stop()方法
该方法用于停止动画或效果,在他们完后之前。
stop()方法适用于所有jquery效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的stopAll参数规定是否应该清除动画队列。默认是false,即停止活动的动画,允许任何排入队列的动画向后执行。
可选的goToEnd参数规定是否立即完成当前动画。默认是false。
因此,默认地,stop()会清除在被选元素上指定的当前动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideDown(2000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#flip,
#panel {
padding: 5px;
text-align: center;
background-color: #FF0000;
border: dotted 2px blue;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body><button id="stop">停止滑动</button>
<div id="flip">点击向下滑动</div>
<div id="panel">你好,你很棒。</div>
</body>
</html>
jQuery Callback 方法
jqurey动画的问题
涉及动画的函数会将speed或duration作为可选参数。
使用 callback 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").hide("fast", function() {
alert("隐藏好了");
});
});
});
</script>
</head>
<body>
<button>隐藏</button>
<div>点击一下,我就没了</div>
</body>
</html>
隐藏完成后才立马弹出。
没有使用 callback 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
// $(document).ready(function() {
// $("button").click(function() {
// $("div").hide("fast", function() {
// alert("隐藏好了");
// });
// });
// });
//
$(document).ready(function(){
$("button").click(function(){
$("div").hide("fast");
alert("藏好了");
});
});
</script>
</head>
<body>
<button>隐藏</button>
<div>点击一下,我就没了</div>
</body>
</html>
弹出框关掉之后,才开始隐藏。
jQuery - 链(Chaining)
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
优点:同一个元素不用写好几条语句,浏览器也不必多次查找相同的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").css("color", "blue").slideUp(2000).slideDown(2000);
});
});
</script>
<title></title>
</head>
<body>
<div>你很棒</div>
<button>确定</button>
</body>
</html>
截成这样很不错了吧,哈哈哈。
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
DOM = Document Object Model(文档对象模型)
DOM 定义访问 HTML 和 XML 文档的标准:
"W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。"
获得内容 - text()、html() 以及 val()
- text() 设置或返回所选元素的文本内容。
- html()设置或返回所选元素的内容。
- val()设置或返回表单字段的值。
- attr()方法用于获取属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
alert("text:" + $("div").text());
});
$("#btn2").click(function() {
alert("html:" + $("div").html());
});
$("#btn3").click(function() {
alert("我叫" + $("#test").val());
});
$("#btn4").click(function() {
alert($("#baidu").attr("id"));
});
});
</script>
</head>
<body>
<div>我是<b>中国人</b></div>
<button id="btn1">显示文本</button>
<button id="btn2">显示html</button>
<p>我叫:<input type="text" id="test" value="仇飞鸿"></p>
<button id="btn3">显示value</button>
<p>
<a href="www.baidu.com" id="baidu">百度一下</a>
</p>
<button id="btn4">显示id属性值</button>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/f9344e0fafe1f6a5f20524fc22d6e710.png)
![](https://i-blog.csdnimg.cn/blog_migrate/afe6ce487cc18dfc869d1236a7aee537.png)