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)
— 停止动画，防止动画积累：
