专业WP商业设计开发销售中心

效果 Effects:

$("#block").animate({
 width: "70%",
 opacity: 0.4,
 marginLeft: "0.6in",
 fontSize: "3em",
 borderWidth: "10px"
}, 1500 ); //动画效果

$("div").clearQueue(); //清除队列

$("div.first").slideUp(300).delay(800).fadeIn(400); 延迟800毫秒进入下一个动画

$("div").animate({left:'+=200px'}, 2000);
$("div").animate({top:'0px'}, 600);
$("div").queue(function () {
 $(this).toggleClass("red");
 $(this).dequeue(); //离队,如果没有这个就会卡在上一步
});
$("div").animate({left:'10px', top:'30px'}, 700);

$("div:hidden:first").fadeIn("slow"); //慢速淡入

$('#book').fadeOut('slow', function() {
 // Animation complete.
}); //慢速淡出,并调用动画函数

$("p:first").click(function () {
 $(this).fadeTo("slow", 0.33);
}); //慢速调整不透明度到 0.33

var toggleFx = function() {
 $.fx.off = !$.fx.off;
}; //打开和关闭jQuery效果
toggleFx();
$("button").click(toggleFx);
$("input").click(function(){
 $("div").toggle("slow");
});

$('#book').hide('slow', function() {
 alert('Animation complete.');
}); //慢速隐藏标签,并调用函数

$("#show").click(function () {
 var n = $("div").queue("fx");
 $("span").text("Queue length is: " + n.length);
}); //计算当前动画所属的队列长度
function runIt() {
 $("div").show("slow");
 $("div").animate({left:'+=200'},2000);
 $("div").slideToggle(1000);
 $("div").slideToggle("fast");
 $("div").animate({left:'-=200'},1500);
 $("div").hide("slow");
 $("div").show(1200);
 $("div").slideUp("normal", runIt);
}
runIt();

$('#clickme').click(function() {
 $('#book').show('slow', function() {
 // Animation complete.
 });
}); //慢速显示并调用函数

$("div").slideDown("slow"); //向下播放幻灯
$("div").slideUp("slow"); //向上播放幻灯

$("button").click(function () {
 $("p").slideToggle("slow");
}); //循环切换幻灯效果

$(this).find('img').stop(true, true).fadeOut(); //停止动画,并且清除队列跳到最后,stop的两个参数默认都是false

.toggle();

AJAX:

$.ajax({
 async: true, //(默认: true) 是否异步,
 cache: true, //(默认: true) 是否缓存, false可用在 dataType 'script' 和 'jsonp'
 dataType: 'text', //返回的数据类型,可以是 'xml', 'html', 'json', 'jsonp', 'script', 'text'.
 beforeSend: function() { $(this).append("<p>Before Send!</p>"); }, //在发送http请求之前执行的函数
 complete: function(XMLHttpRequest, textStatus) {
 $(this).append("<p>XML is load completed, Stats is " + textStatus + "!</p>");
 },
 contentType: "application/x-www-form-urlencoded", //内容类型,默认是 "application/x-www-form-urlencoded"
 context: $('.result'), //上下文, $(this) = $('.result')
 data: { uid: 1, foo:["bar1", "bar2"], /*自动转换为 '&foo=bar1&foo=bar2' */ }, //url参数,可以是对象也可以是字符串('foo=bar1&foo=bar2')
 dataFilter: function(data, type) {
 var data = data + " 增加的数据";
 return data;
 }, //对返回的数据进行过滤处理
 error: function(XMLHttpRequest, textStatus, errorThrown) {
 $(this).append("<p>XMLHttpRequest "+XMLHttpRequest+" & textStatus" + textStatus + "errorThrown: " + errorThrown + "</p>");
 }, //错误时
 global: true, //(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件
 ifModified: false, //(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
 jsonp: 'onJsonPLoad', //在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
 jsonpCallback: 'onJsonPLoad', //用不上
 password: '12345678', //用于响应HTTP访问认证请求的密码
 processData: true, //(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
 scriptCharset: 'utf-8',//只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
 success: function(data, textStatus, XMLHttpRequest) {
 $(this).append("<p>Result: "+data+"</p>");
 $(this).append('<p>Load was performed. Stats is ' + textStatus + '!</p>');
 }, //成功时
 timeout: '20000', //设置请求超时时间（毫秒）。此设置将覆盖全局设置。
 traditional: true, //如果想使用传统的参数数列,将此项设置为true
 type: 'POST',//(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
 url: '杂志改版颜色.txt', //(默认: 当前页地址) 发送请求的地址。
 username: 'kbzwxq', //用于响应HTTP访问认证请求的用户名
 //xhr: function() { alert("x") } //回调函数生成 XMLHttpRequest 对象. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.
});

$.ajaxSetup({
 url: '杂志改版颜色.txt',
 success: function(data, textStatus, XMLHttpRequest) {
 $('.result').append("<p>Result: "+data+"</p>");
 $('.result').append('<p>Load was performed. Stats is ' + textStatus + '!</p>');
 }
}); //安装ajax
$.ajax();

<div style="background: red;color: #fff;">Trigger</div>
<div style="background: green;color: #fff;"></div>
<div style="background: blue;color: #fff;"></div>
<script>
$('.log').ajaxStart(function() {
 $(this).append('<p>Triggered ajaxStart handler.</p>');
}); //当ajax开始时
$('.log').ajaxSend(function(e, xhr, settings) {
 if (settings.url == '杂志改版颜色.txt') $(this).append('<p>Triggered ajaxSend handler.</p>');
}); //当ajax请求发送时执行
$('.log').ajaxSuccess(function(e, xhr, settings) {
 if (settings.url == '杂志改版颜色.txt') $(this).append('<p>Triggered ajaxSuccess handler.</p>');
}); //当ajax成功时
$('.log').ajaxComplete(function(e, xhr, settings) {
 if (settings.url == '杂志改版颜色.txt') $(this).append('<p>Triggered ajaxComplete handler.</p>');
}); //当ajax完成时执行
$('.log').ajaxStop(function() {
 $(this).append('<p>Triggered ajaxStop handler.</p>');
}); //当ajax停止时
$('.log').ajaxError(function(e, xhr, settings, exception) {
 if (settings.url == '杂志改版颜色1.txt') $(this).text('Triggered ajaxError handler.');
}); //当ajax错误时执行
$('.trigger').click(function() {
 $('.result').load('杂志改版颜色.txt', function() {
 $('.log').append('<p>Load was performed.</p>');
 });
});
</script>

<ul id="footerNavigation">
 <li><a href="#">Download</a></li>
 <li><a href="#">Documentation</a></li>
 <li><a href="#">Tutorials</a></li>
 <li><a href="#">Bug Tracker</a></li>
 <li><a href="#">Discussion</a></li>
</ul>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
<script>
$("#new-nav").load("#footerNavigation li"); //将#footerNavigation下的所有li读取到#new-nav
</script>

<div style="background: blue;color: #fff;"></div>
<script>
var myObject = {
 a: {
 one: 1,
 two: 2,
 three: 3
 },
 b: [1,2,3]
};
var recursiveEncoded = $.param(myObject, true); //是否使用传统参数 true
var recursiveDecoded = decodeURIComponent($.param(myObject));
jQuery('.log').append("<p>"+recursiveEncoded+"</p>");
jQuery('.log').append("<p>"+recursiveDecoded+"</p>");
</script> //转换url参数

$.get(
 '杂志改版颜色.txt',
 { name: "John", time: "2pm" },
 function(data, textStatus, XMLHttpRequest) {
 $('.result').html(data);
 },
 'text'
); //Ajax GET
$.post(
 '杂志改版颜色.txt',
 { name: "John", time: "2pm" },
 function(data, textStatus, XMLHttpRequest) {
 $('.result').html(data);
 },
 'text'
); //Ajax POST

$.getJSON('ajax/test.json', function(data) {
 $('.result').html('<p>' + data.foo + '</p>' + '<p>' + data.baz[1] + '</p>');
}); //读取json
$.getScript('ajax/test.js', function(data, textStatus) {
 alert('Load was performed.');
}); //读取脚本

$('form').submit(function() {
 alert($(this).serialize()); //返回表单的url参数
 return false;
});
$('form').submit(function() {
 alert($(this).serializeArray()); //返回表单的url参数对象数组
 return false;
});