<%@ 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. Spark Streaming 事务处理彻底掌握

    本期内容: 1. Exactly once容错 2. 数据输出不重复 一. 事务场景 : 以银行转帐一次为例,A用户转账给B用户,如何保证事务的一致性,即A用户能够转出且只能转出一次,B用户能够收到且 ...

  2. 网站接入QQ登录的两种方法

    第一种使用系统自带按钮登录,但是这样会弹出新窗口,不喜欢 //调用QC.Login方法,指定btnId参数将按钮绑定在容器节点中 QC.Login({ //btnId:插入按钮的节点id,必选 btn ...

  3. SQL Server 磁盘空间告急（磁盘扩容）转载

    一.背景 在线上系统中,如果我们发现存放数据库文件的磁盘空间不够,我们应该怎么办呢?新买一个硬盘挂载上去可以嘛?(linux下可以直接挂载硬盘进行扩容),但是我们的SQL Server是运行在Wind ...

  4. 第五百八十四天 how can I 坚持

    好累啊,不知道怎么搞的,也没干啥啊,学习学的..不会吧. 哎. 吃粉蒸吃的都快吃吐了,得休息段时间,哈哈 没想象中的那么简单啊,太难了,哎,怎么考,压力啊.哎,也没啥. 洗澡睡觉,先休息.

  5. 炫酷的时钟--canvas初体验

    先啥也不说:来张效果图 我是根据:http://www.imooc.com/learn/133 这里的课程进行学习的.大大的感谢liuyubobobo老师的深入浅出的讲解!! 我在这里仅仅提供我自己的 ...

  6. 在Linux下使用RAID--使用mdadm工具创建软件Raid 0(1)

    在Linux下使用RAID--使用mdadm工具创建软件Raid 0(1) RAID即廉价磁盘冗余阵列,其高可用性和可靠性适用于大规模环境中,相比正常使用,数据更需要被保护.RAID是一些磁盘的集合, ...

  7. Java设计模式——适配器模式

    JAVA 设计模式 适配器模式 用途 适配器模式 (Adapter) 将一个类的接口转换成客户希望的另外一个接口. Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适配器 ...

  8. Centos上DNS服务器的简单搭建

    1:安装软件包 yum -y install bind bind-chroot bind-utils bind-libs 2:修改配置文件 1): vim  /etc/named.conf 2):在主 ...

  9. Selenium2+python自动化11-定位一组元素find_elements

    前言 前面的几篇都是讲如何定位一个元素,有时候一个页面上有多个对象需要操作,如果一个个去定位的话,比较繁琐,这时候就可以定位一组对象. webdriver 提供了定位一组元素的方法,跟前面八种定位方式 ...

  10. PHP各种缓存

    缓存类型PHP缓存包括PHP变异缓存和PHP数据缓存两种:PHP编译缓存:        PHP数据缓存:    对数据库数据进行缓存    对PHP模板数据缓存 js数据缓存