基础函数

hide()

隐藏被选元素,与 CSS 属性 display:none 类似,隐藏的元素不会被完全显示（不再影响页面的布局）

$("button").click(function(){
    $("p").hide();
});   隐藏所有 <p> 元素

show()

显示隐藏的被选元素。
适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

$("button").click(function(){
    $("p").show();
});   显示所有隐藏的 <p> 元素

toggle()

用于在被选元素上进行 hide()和 show()之间的切换。
该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种切换的效果。

$("button").click(function(){
    $("p").toggle();
});   在所有 <p> 元素上进行隐藏和显示之间的切换

渐变效果函数

fadeIn()

用于淡入已隐藏的元素。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut()

用于淡出可见元素。

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeTo()

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果（值介于 0 与 1 之间）。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

fadeToggle()

可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

滑动效果函数

slideUp()

用于向上滑动元素。
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。

$("#filp").click(function(){
  $("#panel").slideUp();
});

slideDown()

用于向下滑动元素。
用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式.

$("#filp").click(function(){
  $("#panel").slideDown();
});

slideToggle()

可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$("#filp").click(function(){
  $("#panel").slideToggle();
});

自定义动画

animate()

用于创建自定义动画。( 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！)

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

clearQueue()

清除动画队列中未执行的动画

$("button").click(function(){
$("div").clearQueue();
});   停止队列中的剩余函数

finish()

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

stop()

停止当前正在运行的动画

$("#stop").click(function(){
  $("#panel").stop();
});

Ajax

ajax

用于执行 AJAX（异步 HTTP）请求。所有的 jQuery AJAX 方法都使用 ajax() 方法，该方法通常用于其他方法不能完成的请求。

$("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){
        $("#div1").html(result);
    }});
});   使用 AJAX 请求改变 <div> 元素的文本

get

用于使用 HTTP GET 请求从服务器加载数据。

$("button").click(function(){
    $.get("demo_test.html",function(data,status){
        alert("Data: " + data + "nStatus: " + status);
    });
});   发送一个 HTTP GET 请求到页面并取回结果

$.get("test.php");  请求 "test.php"，但是忽略返回结果

$.get("test.php", { name:"Donald", town:"Ducktown" });   请求 "test.php" 并连同请求发送一些额外的数据（忽略返回结果）

$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });   请求 "test.php" 并传递数据数组到服务器（忽略返回结果）

$.get("test.php", function(data){
alert("Data: " + data);
});    请求 "test.php" 并提醒请求的结果：

getJSON

用于使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js",function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});   使用 Ajax 请求获取 JSON 数据，并输出结果

jQuery动画及Ajax相关函数