<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" rel="external nofollow" > <title>My JSP 'jquery.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/common/easyui/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function aniDiv(){
$("#box").animate({width:300},"slow");
$("#box").animate({width:100},"slow",aniDiv);
}
aniDiv();
$(".btn1").click(function(){
$(":animated").css("background-color","blue");
});
});
</script>
<style type="text/css">
div{
background:#98bf21;
height:40px;
width:100px;
position:relative;
margin-bottom:5px;
}
</style>
</head>
<body>
<div></div>
<div id="box"></div>
<div></div>
<button class="btn1">Mark animated element</button>
</body>
</html>
重点解释：
26 $("#box").animate({width:100},"slow",aniDiv);本行用了JQuery的animate方法，animate改变元素的状态，可以在W3SCHOOL中找到，aniDiv为改变元素后执行的方法，此处类似于循环了。
30 $(":animated").css("background-color","blue");：animated
匹配所有正在执行动画的元素相似知识点：:eq(index)
匹配给定索引值的元素
$("tr:eq(1)")
选择第二个tr元素:even
匹配所有索引值为偶数的元素，从 0 开始计数
$("tr:even")
从0开始匹配所有index为偶数的tr：odd
匹配所有索引值为奇数的元素，从 0 开始计数
$("tr:odd")
从0开始匹配所有index为奇数的tr:first
匹配找到的第一个元素
$("tr:first")
匹配找到的第一个tr元素:last
匹配找到的最后一个元素
$("tr:last")
匹配找到的最后一个tr元素:gt(index)
匹配所有大于给定索引值的元素
$("tr:gt(0)")
匹配所有索引大于0的tr元素:lt(index)
匹配所有小于给定索引值的元素
$("tr:lt(2)")
匹配所有索引小于2的tr元素:header
匹配标签为标题的元素h
$(":header").css("background", "#EEE");
设置标题的背景色为EEE：not
去除所有与给定选择器匹配的元素
$("input:not(:checked)")
选择input不为checked的元素
