<%@ 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%>">

 <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的元素

JQuery学习(选择器-简单-animated)的更多相关文章

  1. JQuery学习(选择器-基本-*)

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. jquery学习--选择器

    选择器:basic $('button') html 标签 $('#test') 标签ID $('.test') 标签的class $('.test,#test,h1') 多选用逗号隔开 $('*') ...

  3. JQuery学习(选择器-可见性-hidden)

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. jquery学习——选择器

    一.基础选择 1.$("*") 选择所有元素 2.$(".class") 选择某个类 3.$("#id") 选择某个id 4.$(" ...

  5. jquery学习笔记(一)：选择器

    内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...

  6. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  7. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  8. jquery学习（2）--选择器

    jquery-李炎恢学习视频学习笔记.自己手写. 简单的选择器    css 写 法: #box{ color:#f00;}    //id选择器    jquery获取:$('#box').css( ...

  9. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

随机推荐

  1. SQL递归

    递归一般出现在树形结构中 1:根据孩子节点查找所有父节点 With T As ( Select * From U_Companies TB Where CompanyID=80047 Union Al ...

  2. Hibernate day03笔记

      Hibernate的关联关系映射:(多对多) 多对多的配置: 步骤一创建实体和映射: Student: public class Student {     private Integer sid ...

  3. MFC的自定义消息的定义与使用

    自定义消息的响应和资源消息的响应有很多类似之处:资源消息的响应是以资源的ID号作为标识的:自定义的消息要自己声明消息ID. 一．           定义: 第一步要声明消息: #define WM_ ...

  4. const int * p 和 int const * p 和 int * const p 的区别

    首先注意,const int * p 和int const *p 是一样的,并且不管是不是*p,即使const int i和int const i也是一样的,所以我们接下来只讨论int const * ...

  5. 关于form标签，你该知道

    有没有发现,自己在写模板的时候很少使用form元素,一来form和table总是那么傻傻分不清楚:二来form的特性理解不清楚,有了input.label来了直接就上,根本不用form(不知道有没有人 ...

  6. ZOJ3778--一道水题

    Description As we all know, Coach Gao is a talented chef, because he is able to cook M dishes in the ...

  7. 在eclipse之中使用Junit

    使用Junit单位测试,能够一定程度上减小项目bug的产生.很多时候,我们都是在main函数里面单独去测试一个方法,这样的测试非常不方便.使用Junit可以是测试单位和项目代码分离,一次性测试多个方法 ...

  8. 构建ASP.NET网站十大必备工具(2)

    正常运行时间 当一个网站发布以后,你肯定希望你的网站不会遇到任何问题,一直处在正常运行状态之中.现在,我使用下面这些工具来监控“Superexpert.com”网站,确保它一直处在正常运行状态之中. ...

  9. javascript 命令方式 测试例子

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 【译】RabbitMQ："Hello World"

    简介 RabbitMQ是一个消息代理.从本质上讲,它从消息生产者处接收消息,然后传递给消息的消费者.它在消息的生产者和消费者之间根据你指定的规则对消息进行路由.缓存和持久化. RabbitMQ通常使用 ...