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: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
随机推荐
- 如何搭建zabbix server端
1.背景介绍: nginx:1.9.3 安装路径/data/nginxphp:5.5.27 安装路径 /data/phpmysql:5.6.28 安装路径/usr/local/mysqlzabbix ...
- 第一个Python小爬虫
这个爬虫是参考http://python.jobbole.com/81353/这篇文章写的 这篇文章可能年代过于久远,所以有些代码会报错,然后我自己稍微修改了一下,增加了一个getContentAll ...
- 利用ONENET平台控制MPC
可以用于广告机或者灾害预警,实时广播等行业 这个分控制端和服务端 控制端采用winform编写,服务端采用控制台程序编写 优点在于服务端不用有公网ip,比传统方案方便的多. 也不用租用费用高额的云服务 ...
- Codeforces Round #514 (Div. 2) B - Forgery
这个题我一开始没思路,最后也没思路 2个小时一直没思路 本来还想解释题意的,写了半天发现解释的不是很清楚,你还是google翻译一下吧 这个题解法是这样的: 首先,给你图案里面有很多的点,每个点的周围 ...
- 冲刺博客NO.10
今天做了什么:将程序整合到一起,出现了不少小错误,但是在讨论后都解决了. 遇到的难题:没遇到什么大困难
- 连接SSH服务器的脚本，自动发送用户名和密码
利用expect 自动输入用户名和密码 脚本如下 #!/usr/bin/expect # connect ssh server set timeout 30 spawn ssh -l user_nam ...
- 技术文档生成工具：appledoc
做项目一般都会要求写技术文档,特别是提供SDK或者基础组件的.如果手写这类技术文档的话,工作量比编写代码也少不了多少.比如 Java 语言本身就自带 javadoc 命令,可以从源码中抽取文档.本篇我 ...
- Apktool下载与安装 windows环境
Apktool 下载与安装 百度网盘地址:https://pan.baidu.com/s/1slQBMOl (apktool 2.2.4版本) 更多版本可以从官网https://ibotpeache ...
- pyg 图片服务器中使用的nginx 编译位置
./nginx 启动
- 微信小游戏 three.js jsonloader request:fail invalid url
微信小游戏中,用 THREE.JSONLoader 直接加载本地的 json 文件,报错.估计是跨域访问的问题 解决:把 json 文件放到服务器上,通过 url 来访问. 临时测试的话,在本地起一个 ...