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 ...
随机推荐
- SQLite事务管理
事务管理对数据库一致性是至关重要的.数据库实现ACID属性以确保一致性.SQLite依赖于本地文件锁和页日志来实现ACID属性.SQLite只支持扁平事务,并不支持事务嵌套和保存点能力. 1.1 事务 ...
- WAMP(Windows、Apache、MySQL、php）安装配置过程常见问题
WAMP(Windows.Apache.MySQL.php)安装配置过程 可以参考该网友的总结(总结的不错,鼓掌!!): http://www.cnblogs.com/pharen/archive/2 ...
- 利用 Gulp 处理前端工作流程
最近做项目,因为每次做完后都要手动压缩CSS.JS 等文件,压缩后另存为 *.min.xxx. Less 还要手动输入命令进行编译,调整页面也经常要手动刷新页面看效果,很麻烦,就尝试用 gulp 去处 ...
- 在django中使用自定义标签实现分页功能
效果演示: github地址:https://github.com/mncu/django_projects/tree/master/django_projects/pagination_test 本 ...
- ---iproute2 策略路由
http://linux.chinaunix.net/techdoc/net/2007/03/30/953750.shtml 这篇文章写的例子讲明白策略路由的使用,但是本身好像不用这么麻烦, 用系统默 ...
- Jmeter之逻辑控制器(Logic Controller)
Jmeter之逻辑控制器(Logic Controller) 前言: 1. Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in w ...
- php 乱码解决
1)首先确定你的终端编码,如果你不知道如何确定,分别执行这两段代码,看看哪个能输出中文. PHP code ? 1 echo pack("H12","E4B8ADE6 ...
- 星号代替数字 js语句
在做登陆界面时,有这样一个需求,就是输入密码时,以密文形式展示(*),由于html5的属性 type="password" 只能以圆点形式展示, 下面方法能以星号代替输入符合 d ...
- js 模块开发之一（模块开发价值）
首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 va ...
- C# 判断是否联网
public static class Internet { [DllImport("winInet.dll")] private static extern bool Inter ...