JQuery学习(选择器-简单-animated)
<%@ 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)的更多相关文章
- JQuery学习(选择器-基本-*)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- jquery学习--选择器
选择器:basic $('button') html 标签 $('#test') 标签ID $('.test') 标签的class $('.test,#test,h1') 多选用逗号隔开 $('*') ...
- JQuery学习(选择器-可见性-hidden)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- jquery学习——选择器
一.基础选择 1.$("*") 选择所有元素 2.$(".class") 选择某个类 3.$("#id") 选择某个id 4.$(" ...
- jquery学习笔记(一)：选择器
内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jquery学习（2）--选择器
jquery-李炎恢学习视频学习笔记.自己手写. 简单的选择器 css 写 法: #box{ color:#f00;} //id选择器 jquery获取:$('#box').css( ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
随机推荐
- Analyze network packet files very carefully
As a professional forensic guy, you can not be too careful to anlyze the evidence. Especially when t ...
- Spring day03笔记
spring day02回顾 AOP :切面编程 切面:切入点 和 通知 结合 spring aop 编程 <aop:config> 方法1: <aop:pointcut expre ...
- mysql与oracle的存储过程有什么区别？
MySQL存储过程 (1). 格式 MySQL存储过程创建的格式:CREATE PROCEDURE过程名 ([过程参数[,...]]) [特性 ...]过程体 案例分析: 参数 MySQL存储过程的参 ...
- Bootstrap修改input file默认样式
html部分 <div class="form-group"> <label class="col-sm-3 control-label"&g ...
- linux vim 替换指定字符为回车
有个问题,想要知道逗号分隔的字符串 example: aaa,bbb,ccc 分隔后的个数 1 将 aaa,bbb,ccc 替换成 aaa bbb ccc 方法: :%s/,/^M/g ^M是用 ...
- 调用Ria Service中方法的各种方式
前端界面后台: using System; using System.Collections.Generic; using System.Linq; using System.Net; using S ...
- Excel的文件打开特别慢,xls文件特别大解决一例
Excel的文件打开特别慢,xls文件特别大解决一例 打开Excel的xls文件打开特别慢,而且操作也非常慢,动辄需要10几20分钟,很不正常.一个简单的Excel的xls文件有10几兆,甚至几百兆的 ...
- 记录今天学习python中for与while循环针对break和continue的用法
python中有两个主要的循环for与while,其中针对这两个循环有两种不同的中断用法break与continue. 首先先看下面的循环代码: 1: for i in range(10):#变量i带 ...
- ios底层网络请求错误码
kCFHostErrorHostNotFound = 1, kCFHostErrorUnknown = 2, // Query the kCFGetAddrInfoFailureKey to get ...
- python学习之——计算文件行数
# -*- coding: cp936 -*- #转载源于:http://blog.csdn.net/houyj1986/article/details/21196027 #计算文件行数 #1.文件比 ...