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;
             100px;
            height: 50px;
            background-color: red;
            float: left;
            margin-left: 20px;
        }

        .div2 {
            position: absolute;
             100%;
            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" }, 500, function () {
            aaa.css("background-color", "blue");    //回调函数，动画执行完后执行 背景色变为绿色 
        });                                         
    });
    $(".div1").mouseout(function () {
        var aaa = $(this).children(".div2:eq(0)");     //stop() 停止之前所有的动画--消除动画积累
        aaa.stop().animate({ height: "0px" }, 500, 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 {
             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" }, 500);
    });                                                            
    $("#div1").mouseout(function () {
        $(this).animate({ backgroundColor: "#0171c2", color: "yellow" }, 500);
    });
                    //  要引入jquery.color
</script>

字体，颜色渐变

stop(true)

-- 停止动画，防止动画积累：