jquery动画和ajax

1.Jquery动画
    1.1：show()显示:由上到下，颜色由浅到深。
        1.1.1：直接显示：Jquery对象.show();
            eg:$("h1").show();

        1.1.2:以一定的速度来显示：Jquery对象.show(时间);
            eg：$("h1").show(10000);

        1.1.3：以一定的速度显示后再执行函数：Jquery对象.show(时间，function(){});
            eg:$("h1").show(5000,function(){
                    alert("我出来了");
                });

    1.2：hide()隐藏：由下到上，颜色由深到浅。
        1.2.1：直接隐藏：Jquery对象.hide();
            eg:$("h1").hide();

        1.2.2:以一定的速度来隐藏：Jquery对象.hide(时间);
            eg:$("h1").hide(5000);

        1.2.3：以一定的速度隐藏后再执行函数：Jquery对象.hide(时间，function(){});
            eg:$("h1").hide(5000,function(){
                    $("h1").show(5000);
                });

    1.3：toggle():如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
        1.2.1：直接显示隐藏：Jquery对象.toggle();
            eg:$("h1").toggle();

        1.2.2:以一定的速度来显示隐藏：Jquery对象.toggle(时间);
            eg:$("h1").toggle(5000);

        1.2.3：以一定的速度显示隐藏后再执行函数：Jquery对象.toggle(时间，function(){});
            eg:$("h1").toggle(5000,function(){
                    $("h1").toggle(5000);
                });

    1.4：slideUp()滑出:由下到上
        1.4.1：直接滑出：Jquery对象.slideUp();
            eg:$("h1").slideUp();

        1.4.2:以一定的速度来滑出：Jquery对象.slideUp(时间);
            eg:$("h1").slideUp(5000);

        1.4.3：以一定的速度滑出后再执行函数：Jquery对象.slideUp(时间，function(){});
            eg:$("h1").slideUp(5000,function(){
                    $("h1").slideDown(5000);
                });

    1.5：slideDown()滑入:由上到下
        1.5.1：直接滑入：Jquery对象.slideDown();
            eg:$("h1").slideDown();

        1.5.2:以一定的速度来滑入：Jquery对象.slideDown(时间);
            eg:$("h1").slideDown(5000);

        1.5.3：以一定的速度滑入后再执行函数：Jquery对象.slideDown(时间，function(){});
            eg:$("h1").slideDown(5000,function(){
                    $("h1").slideUp(5000);
                });

    1.6：slideToggle():通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发            一个回调函数。
        1.6.1：直接滑入滑出：Jquery对象.slideToggle();
            eg:$("h1").slideToggle();

        1.6.2:以一定的速度来滑入滑出：Jquery对象.slideToggle(时间);
            eg:$("h1").slideToggle(5000);

        1.6.3：以一定的速度滑入滑出后再执行函数：Jquery对象.slideToggle(时间，                           function(){});
            eg:$("h1").slideToggle(5000,function(){
                    $("h1").slideToggle(5000);
                });

    1.7:fadeOut():通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地                触发一个回调函数。
        1.7.1：直接淡出：Jquery对象.fadeOut();
            eg:$("h1").fadeOut();

        1.7.2:以一定的速度来淡出：Jquery对象.fadeOut(时间);
            eg:$("h1").fadeOut(5000);

        1.7.3：以一定的速度淡出后再执行函数：Jquery对象.fadeOut(时间，                           function(){});
            eg:$("h1").fadeOut(5000,function(){
                    $("h1").slideIn(5000);
                });

    1.8:fadeIn():通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地                触发一个回调函数。
        1.8.1：直接淡入：Jquery对象.fadeIn();
            eg:$("h1").fadeIn();

        1.8.2:以一定的速度来淡入：Jquery对象.fadeIn(时间);
            eg:$("h1").fadeIn(5000);

        1.8.3：以一定的速度淡入后再执行函数：Jquery对象.fadeIn(时间，                           function(){});
            eg:$("h1").fadeIn(5000,function(){
                    $("h1").slideOut(5000);
                });

    1.9：fadeToggle():通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完            成后可选地触发一个回调函数。
        1.9.1：直接淡入淡出：Jquery对象.fadeToggle();
            eg:$("h1").fadeToggle();

        1.9.2:以一定的速度来淡入淡出：Jquery对象.fadeToggle(时间);
            eg:$("h1").fadeToggle(5000);

        1.9.3：以一定的速度淡入淡出后再执行函数：Jquery对象.fadeToggle(时间，                           function(){});
            eg:$("h1").fadeToggle(5000,function(){
                    $("h1").fadeToggle(5000);
                });

    1.10: fadeTo():把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
        语法： Jquery对象.fadeTo(时间，透明度);//透明度在0到1之间

    1.11：animate():用于创建自定义动画的函数。
        语法： Jquery对象.animate({动画特征},时间);

2.Jquery实现ajax
    2.1:Jquery对象.load("请求",[参数],[函数]);默认使用 GET 方式 - 传递附加参数时自动转                    换为 POST 方式
        缺点：请求的数据只能在调用Jquery对象中显示。
        eg://用load()发送ajax请求
        $("#show1").click(function(){
            $("#d1").load("loaddiv.html");
        });

    2.2:Jquery对象.getJSON("请求",[参数],[函数]);通过 HTTP GET 请求载入 JSON 数据。
        缺点:请求返回的数据类型只能Json类型
        eg:$("#show2").bind("click",function(){
            $.getJSON("students.json",function(data){
                $(data).each(function(){
                    $("#d1").html(this.sid+","+this.sname+"<br/>"+$("#d1").html());
                });
            });
        });

    2.3：Jquery对象.getScript(js文件);//通过 HTTP GET 请求载入并执行一个 JavaScript 文                    件。
            eg:$("#show3").click(function(){
            $.getScript("js/test.js");
      });

      js/test.js中代码：
$(function(){
    $.getJSON("students.json",function(data){
        $(data).each(function(){
            $("#d1").html(this.sid+","+this.sname+"<br/>"+$("#d1").html                ());
        });
    });
});    

    2.4:（重点）$.get(url, [data], [callback], [type]);通过远程 HTTP GET 请求载入信息。
        优点：请求速度快；
        缺点：有缓存，不安全。
        eg:$.get("loaddiv.html",function(data){
                alert(data);
            });

            $.get("UserServlet",{"action":"isUser","uname":uname},function(result){
                    if (result=="1") {
                        document.getElementById("uname1").innerHTML="用户名已注册";
                        document.getElementById("uname1").style.color="red";
                    }else{
                        document.getElementById("uname1").innerHTML="";
                    }
           });

    2.5:(重点)$.post(url,[data],[callback],[type]);通过远程 HTTP POST 请求载入信息。
        优点：数据安全，没有缓存。
        缺点：请求速度慢。
        eg:$.post("loaddiv.html",function(data){
                alert(data);
            });

            $.post("UserServlet",{"action":"isUser","uname":uname},function(result){
                    if (result=="1") {
                        document.getElementById("uname1").innerHTML="用户名已注册";
                        document.getElementById("uname1").style.color="red";
                    }else{
                        document.getElementById("uname1").innerHTML="";
                    }
            });

    2.6:(重点)$.ajax();
        语法：$.ajax({
   type: "POST/get",
   url: "",
   data: "请求发送的参数",
     dataType:"返回数据类型"，
     async: 是否是异步
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

            eg:$.ajax({
                    type:"post",
                    url:"UserServlet",
                    data:{"action":"isUser","uname":uname},
                    success:function(result){
                        if (result=="1") {
                            document.getElementById("uname1").innerHTML="用户名已注                                                    册";
                            document.getElementById("uname1").style.color="red";
                        }else{
                            document.getElementById("uname1").innerHTML="";
                        }
                    }
                });

    2.7:表单的Jquery对象.serialize();//序列表表格内容为字符串。
            eg:$("form").serialize();