<%@ 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. [Jquery] Jquery AutoComplete的使用方法实例

    jQuery的Autocomplete(自动完成.自动填充)插件 jquery-autocomplete配置: <script type="text/javascript" ...

  2. 【C#基础】System.Reflection （反射）

    在使用.NET创建的程序或组件时,元数据(metadata)和代码(code)都存储于"自成一体"的单元中,这个单元称为装配件.我们可以在程序运行期间访问这些信息.在System. ...

  3. 详解log4j2(下) - Async/MongoDB/Flume Appender 按日志级别区分文件输出

    1. 按日志级别区分文件输出 有些人习惯按日志信息级别输出到不同名称的文件中,如info.log,error.log,warn.log等,在log4j2中可通过配置Filters来实现. 假定需求是把 ...

  4. Net分布式系统之二：CentOS系统搭建Nginx负载均衡(下)

    上一篇文章介绍了VMWare12虚拟机.Linux(CentOS7)系统安装.部署Nginx1.6.3代理服务做负载均衡.接下来介绍通过Nginx将请求分发到各web应用处理服务. 一.Web应用开发 ...

  5. Sql 邮件发送

    select name from msdb.dbo.sysmail_profile --邮件发送日志 SELECT * FROM msdb.dbo.sysmail_event_log delete F ...

  6. 安装mysql5.5时候的报错解决办法：

    每次安装mysql5.5的时候总会报出一下错误: -- Could NOT find OpenSSL (missing: OPENSSL_LIBRARIES OPENSSL_INCLUDE_DIR) ...

  7. 第三十四章 metrics（2）- 搭建metrics平台

    一.基本架构图 1.整个架构组件: java客户端 dropwizard-metrics:springboot.hystrix的metric体层使用了这个,所以我们需要自己封装向statsd发包的方法 ...

  8. 关于内存数据与 JSON

    闲话: 正在用 WebBroker 写一个小网站,感受颇多: 1.如果是写一个小东西,应该先考虑下 WebBroker,因为它是分分钟即可上手的. 2.如果要写一个大东西,或许也应该考虑下 WebBr ...

  9. sql sever 2008修改数据类型

    如果是新表,直接在表中修改: 如果不是新表,则须sql语句修改 附sql语句 alter table 表名 alter column 列名 新的数据类型

  10. Gossip protocol(zz)

    Gossip protocol 这是一系列用于P2P的通信协议.简单来说,就是模拟人类社会中流言传播的方式.每个节点随机地把消息发给它的邻居,接到消息的节点,如果之前没收到这个消息,则会继续随机地转发 ...