jQuery 【选择器】【动画】
jQuery
是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
特点：
具有独特的链式语法和短小清晰的多功能接口；
具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
拥有便捷的插件扩展机制和丰富的插件。
兼容各种主流浏览器，
选择器 $
id -- $( " #div1 ")
class -- $( " . div2 " ) 选择所有的 class 定位
首个 --$( " .div2:first ")
尾个 --$( " .div2:last ")
等于 --$( " .div2:eq(2)" ) 选第三个class=div2 的元素
--$( " .div2 ").eq(2) 选第三个class=div2 的元素
大于 --$( " .div2:gt(0)") 选索引是 0 后面的class=div2 的元素
小于 --$( " .div2:lt(4)") 选索引是 4 前面的class=div2 的元素
排除 --$( " .div2:not(.div2:eq(3))") 选除索引是 3 的所有class=div2 的元素
奇数 --$( " .div2:odd") 选所有奇数的class=div2 的元素
偶数 --$( " .div2:even") 选所有偶数的class=div2 的元素
属性名 --$( " .div2[id]") 选有 id 属性的class=div2 的元素
属性名、值 --$( " .div2:[id=d1]") 选有 id 属性 且 id="d1" 的class=div2 的元素
文字 --$( " .div2:contains('11')") 选内容有 11 字符的class=div2 的元素
子元素 --$( " .div2:has( '#div3' )") 选包含 div3 的class=div2 的元素
动画
show(),hide()
--隐藏、显示
slideDown(),slideUp()
-- 上、下（卷帘门效果）
fadeIn(),fadeOut()
-- 淡入淡出
-- 改变的是 opacity 这个属性
animate({left:"300px",top:"300px"},3000,function(){回调函数})
-- 滑动、渐变
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.2.min.js"></script>
<title></title>
<style type="text/css">
.div1 {
position: relative;
width: 100px;
height: 50px;
background-color: red;
float: left;
margin-left: 20px;
} .div2 {
position: absolute;
width: %;
height: 0px;
top: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div> <div class="div1">
<div class="div2"></div>
</div> <div class="div1">
<div class="div2"></div>
</div> <div class="div1">
<div class="div2"></div>
</div> <div class="div1">
<div class="div2"></div>
</div> </body>
</html>
<script type="text/javascript">
$(".div1").mouseover(function () {
var aaa = $(this).children(".div2:eq(0)");
aaa.stop().animate({ height: "300px" }, , function () {
aaa.css("background-color", "blue"); //回调函数，动画执行完后执行 背景色变为绿色
});
});
$(".div1").mouseout(function () {
var aaa = $(this).children(".div2:eq(0)"); //stop() 停止之前所有的动画--消除动画积累
aaa.stop().animate({ height: "0px" }, , function () {
aaa.css("background-color", "green"); });
}); </script>
下拉菜单
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.color.js"></script>
<title></title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background-color: #0171c2;
font-size: 25px;
font-family: 微软雅黑;
color: yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
按钮
</div>
</form>
</body>
</html>
<script type="text/javascript"> $("#div1").mouseover(function () {
$(this).animate({ backgroundColor: "black", color: "white" }, );
});
$("#div1").mouseout(function () {
$(this).animate({ backgroundColor: "#0171c2", color: "yellow" }, );
});
// 要引入jquery.color
</script>
字体，颜色渐变
stop(true)
-- 停止动画，防止动画积累：
jQuery 【选择器】【动画】的更多相关文章
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 二、jquery选择器
在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
- 我人生中的jQuery选择器
Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jquery选择器总结 转自（永远的麦子）
jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...
- 精通jQuery选择器
虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...
- jQuery-认识JQuery，jQuery选择器
认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...
- jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
随机推荐
- Noxim配置运行
Noxim - the NoC Simulator that is implemented by SystemC 第一步: C++ compiler installation 第二步: YAML in ...
- IDEA中MyBaits的Mapper文件颜色问题
IDEA中MyBaits的Mapper文件颜色问题 在IDEA中Mapper文件的展示 包含的警告及其解决方案 然后我们就完成了,效果如下 在IDEA中Mapper文件的展示 在IDEA中,Mappe ...
- 上传input中file文件到云端，并返回链接
有的文件.图片等信息可以上传到云端上,然后使用链接调用,这样会更加的方便和快捷. <form id="form"> <input type="file& ...
- 《JavaScript面向对象编程指南》读书笔记①
概述 JavaScript快忘完了,想看一本专业书拾遗,所以看了这本<JavaScript面向对象编程指南>. 个人觉得这本书讲的很透彻很易懂,一些原来有疑惑的地方在这本书里面豁然开朗,看 ...
- spring 原理1：java 模拟springIOC容器
本篇博客主要是使用java代码模拟spring的IOC容器,实现依赖注入:当然只是模拟spring容器中简单的一点实现原理而已,加深一些自己对spring框架的底层原理的理解: 使用的技术:dom4j ...
- 利用SSH反向隧道，连接内网服务器
前言 公司有一台文件服务器(内部使用,无外网IP),上面主要安装了SVN服务,用来存储和共享各部门的文档,因为都是内网,直接远程(mstsc)上去就可以方便维护,但最近公司租了新的办公室,部分员工被分 ...
- Facebook的一些基本操作（网页版）
前期准备 1,注册一次Facebook账号,新建一个应用取到应用id 2,引进Facebook的SDK到页面中: 在js中引进以下代码,初始化 // facebook window.fbAsyncIn ...
- LeetCode--No.003 Longest Substring Without Repeating Characters
Longest Substring Without Repeating Characters Total Accepted: 167158 Total Submissions: 735821 Diff ...
- Liferay平台开发使用详细PPT演示文稿
主要章节: 概述 功能和使用 开发扩展 安全.认证 高可用 Demo 独立流程演示工程: Liferay集成Activiti开发工程: PPT演示文稿下载 Demo程序分2部分: 独立流程演示工程:h ...
- django 模型关系
模型关系 关系数据库的威力体现在表之间的相互关联,Django提供了三种最常见的数据库关系:多对一 (many-to-one),多对多(many-to-many),一对一(one-to-one) 多对 ...