<%@ 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. swift 常见报错及解决方案

    当你初学swift,或者你从2.0转到3.0,见点红是在所难免再寻常不过的事情,其实一般也都是一些小的语法问题,度娘一般都有能力告诉你答案,但是凡事做个总结做到心中有数毕竟是比度娘靠谱的. 1.can ...

  2. javascript 面向对象编程指南 的一些题目

    1. function C () { this.a = 1; return false; } console.log (typeof new C()); object function C () { ...

  3. Linux_06------Linux的磁盘管理

    进制编码 * 3.格式化交换分区 * 4.启用交换分区 * * 1.2. * fdisk /dev/sdb * p * t * 6(分区编号) * L(查看编码列表),找到SWAP交换分区标号 * 8 ...

  4. 记录今天学习python中for与while循环针对break和continue的用法

    python中有两个主要的循环for与while,其中针对这两个循环有两种不同的中断用法break与continue. 首先先看下面的循环代码: 1: for i in range(10):#变量i带 ...

  5. php 文件读取

    整理了一下PHP中读取文件的几个方法,方便以后查阅. 1.fread string fread ( int $handle , int $length ) fread() 从 handle 指向的文件 ...

  6. HTML基础第二天知识点整合

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

  7. URL Quoting

    [URL Quoting] The URL quoting functions focus on taking program data and making it safe for use as U ...

  8. vsftpd基于pam_mysql的虚拟用户机制

    何为vsftpd? vsftpd:very secure ftp daemon 程序:/usr/sbin/vsftpd 配置文件:/etc/vsftpd/vsftpd.conf 其用户分为:匿名用户( ...

  9. GsonWithoutObject 没有对象(脱离对象) 直接提取 ... gson json

    GsonWithoutObject 脱离对象, 直接提取 package temp; import tool.FileTool; import com.google.gson.JsonElement; ...

  10. WordPress主机