<%@ 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. 【Python】python2.7安装pysvn

    wget最新的版本地址自己修改 1.编译安装apr.apr-utilwget https://mirrors.tuna.tsinghua.edu.cn/apache/apr/apr-1.5.2.tar ...

  2. NHibernate系列文章七：NHibernate对象状态

    摘要 NHibernate对象持久化 NHibernate对象的三个状态:临时态.持久态.游离态(托管态) NHibernate三状态的相互转化 1. NHibernate对象持久化 NHiberna ...

  3. 各种数据库分页sql

    1.oracle数据库分页 select * from (select a.*,rownum rc from 表名 where rownum<=endrow) a where a.rc>= ...

  4. c#基础-oop(面向对象理解)

    OOP-面向对象 封装,继承多态 一个桌子,用面向对象来描述一下它这个桌子项目 定义桌子类 对象:桌子 桌子的属性:名字,材质,体积 桌子的方法;放东西(方法) 现在桌子要放书,放花瓶,放文件(这里就 ...

  5. golang 格式化时间为字符串

    package main import ( "fmt" "reflect" "time" ) func main() { //格式化字符串为 ...

  6. oracle replace函数

    replace 函数用法如下: replace('将要更改的字符串','被替换掉的字符串','替换字符串') 例如: select t.dqsj,replace(t.dqsj,'16:40','16: ...

  7. 第2章 C#中的泛型

    2.1 理解泛型2.1.1 为什么要有泛型 并不一定要使用字符T作为类型参数的名称,也可以使用其他的字符,但习惯上使用T. 2.1.2 类型参数约束什么是“向下的强制转换(downcast)”?因为O ...

  8. Builder(生成器）-对象创建型模式

    一.意图 将一个复杂对象的构建与它的表示分离,使得同样的构造过程可以创建不同的表示. 二.动机 一个复杂的对象的构造过程中,原料相同,可能会要求生产不同的产品,并且生产的产品种类还能够方便的增加.Bu ...

  9. Python全栈之路4--内置函数--文件操作

    上节重点回顾: 判断对象是否属于某个类,例如: 列表中有个数字,但是循环列表判断长度,用len会报错;因为int不支持len,所以要先判断属于某个类,然后再进行if判断. # isinstance(对 ...

  10. 启用 mvc webapi 的 session功能可用

    默认 mvc webapi 不开启 session 会话支持 所以需要修改配置,在 Global 开启 session 支持 如下: 1.重写 init() 方法 public override vo ...