JQuery基础总结下

浏览数：45 / 时间：2015年06月09日

JQuery动画与特效

show()和hide()方法可以用来显示和隐藏元素，toggle()方法用来切换显示和隐藏。

$(selector).hide(speed,[callback]);
$(selector).show(speed,[callback]);

$(selector).toggle(speed,callback);

speend 可以设置为fast slow或者数字（毫秒），cellback是回调函数

slideUp()和slideDOwn()以及用来自动切换的slideToggle(),这个是上下滑动效果。细心的同学可能发现了，toggle这个词出现的时候一般都是用来切换的。所有以后看***toggle()这种方法的时候应该很快就能反映过来这是***的一个单击切换方法。

$(selector).slideUp(speed,[callback]);
$(selector).slideDown(speed,[callback]);

$(selector).slideToggle(speed,callback);

fadeIn() fadeOut() fadeTo() fadeToggle()这个四个方法是用来做淡入淡出效果的

$(selector).fadeIn(speed,[callback]);
$(selector).fadeOut(speed,[callback]);

$(selector).fadeTo(speed,opacity,callback);

$(selector).fadeToggle(speed,callback);

opacity的取值0-1。0代表透明，1代表不透明。

animate()方法用来制作动画效果，

$(selector).animate({params},speed,callback);

params是css的参数，在{}里面写css代码即可。下面举个例子

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:‘250px‘});
  });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

注意：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

stop()方法用来停止当前执行的动画。

$(selector).stop(stopAll,goToEnd);

stop()有的两个参数，在默认情况下都是false。

第一个参数是用来判断是否所有的动画。在false的情况下，stop只会停止当前的动作，但是后续的动作不会停止，如果把stopAll设置为true则会停止当前和后续的所有动作。

第二个参数是用来立即完成当前动画的。在两个参数都为true的情况下会立即执行完当前动画，并停止后续所有动画。当stopAll为false，goToend为true的时候会立即执行完当前动画，后续动画会在这个动画完成后立即执行。

建议大家自己动手实践下，效果一下就看出来了。

delay()方法用来设置延迟，调用的时候是对下一个动画设置的延迟，也就是说延迟的时间是从当前动画完成后开始计算的。这个方法不能设置当前的动画的延迟。

$(selector).delay(speed,queueName)

JQuery实现AJAX应用

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

在加载文件的时候可以选择文件其中制定的元素，例如加载”demo_test.txt”中的p1

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

get()和post()方法

$.get(URL,callback);
$.post(URL,data,callback);

get:必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){
  $.get("demo_test.html",function(data,status){
    alert("Data: " + data + "nStatus: " + status);
  });
});

set:必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
  $.post("demo_test_post.html",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "nStatus: " + status);
  });
});

{ name:"Donald Duck", city:"Duckburg" }这是个JSON对象。具体内容百度JSON。

这是最基本的三个方法，更多ajax方法请参见http://www.w3cschool.cc/jquery/jquery-ref-ajax.html