1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%
3 String path = request.getContextPath();
4 String basePath = request.getScheme() + "://"
5 + request.getServerName() + ":" + request.getServerPort()
6 + path + "/";
7 %>
8
9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
10 <html>
11 <head>
12 <base href="<%=basePath%>">
13
14 <title>My JSP ‘jquery.jsp‘ starting page</title>
15
16 <meta http-equiv="pragma" content="no-cache">
17 <meta http-equiv="cache-control" content="no-cache">
18 <meta http-equiv="expires" content="0">
19 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
20 <meta http-equiv="description" content="This is my page">
21 <script type="text/javascript" src="/common/easyui/jquery.min.js"></script>
22 <script type="text/javascript">
23 $(document).ready(function(){
24 function aniDiv(){
25 $("#box").animate({width:300},"slow");
26 $("#box").animate({width:100},"slow",aniDiv);
27 }
28 aniDiv();
29 $(".btn1").click(function(){
30 $(":animated").css("background-color","blue");
31 });
32 });
33 </script>
34 <style type="text/css">
35 div{
36 background:#98bf21;
37 height:40px;
38 width:100px;
39 position:relative;
40 margin-bottom:5px;
41 }
42 </style>
43 </head>
44 <body>
45 <div></div>
46 <div id="box"></div>
47 <div></div>
48 <button class="btn1">Mark animated element</button>
49 </body>
50 </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的元素
时间： 2024-11-03 09:17:55