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停止动画

jquery stop（）方法用于在动画或效果完成前对他们进行停止。

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 方法

callback函数在当前动画100%完成之后执行。

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>

jQuery系统的学习（二）