JQuery 4

jQuery制作动画与特效

显示和隐藏元素
show()和hide()方法

元素显隐的渐入渐出效果
show(duration,[callback]),hide(duration,[callback]),toggle()
duration表示动画执行时间的长短，也可以是表示速度的字符串（slow,fast,normal）,或者是一个数字，单位毫秒
callback为可选的回调函数
fadeIn(duration,[callback]),fadeOut(duration,[callback]),参数与show等一样，但动画效果不一样
fadeTo(duration,opacity,callback),自定义变换目标透明度，opacity取值0.0-1.0
slideUp(duration,[callback])，slideDown(duration,[callback])，模拟PPT中类似幻灯片拉窗帘的特效

 

自定义动画
animate(params,[duration],[easing],[callback])
params是一组要实现动画的最终css样式,以及希望变化的最终值。duration是执行动画的时间，easing供动画插件使用，用来控制变化过程的参数，jQuery提供了linear和swing两个值。callback是动画执行完成之后执行的处理函数。
params遵循camel命名的方式，例如paddingLeft不能写成padding-left，还有params只能是CSS中用数值表示的属性。
在params的CSS属性列表中，用‘+=’或者‘-=’来表示相对变化，如left: "-=80px" //相对左移
在params的CSS属性列表中，可以将属性的最终值设置为‘show’、‘hide’、‘toggle’，这样属性会执行默认的变化
animate(params,options),这是另一种形式，options为动画的可选参数表，主要包duration,easing,callback和queue等。queue为布尔值，表示多个animate()组成jQuery链时，当前的animate()与紧接着的下一个animate()是按顺序进行(true)，还是同时触发(false)

 

jQuery功能函数

检测浏览器
$.browser.msie，$.browser.mozilla，$.browser.safari，$.browser.opera，$.browser.version

 

检测盒子模型
var sBox = $.boxModel ? "标准W3C":"IE";true为标准，false为IE的

 

处理JavaScript对象
使用$.each()方法遍历
$.each(object,fn),object为需要遍历的对象，fn为object中的每个元素都执行的函数。fn有两个参数，第一个参数为数组元素的序号或者属性的对象，第二个参数为元素或者属性的值。
var oObj = {one:1, two:2, three:3, four:4, five:5};
$.each(oObj, function(property,value) //针对对象
$.each(aArray,function(iNum,value)//针对数组

 

过滤数据
$.grep(array,fn,[invert])
array为需要过滤的数组对象，fn为过滤函数，对数组中的每个对象，如果返回true则保留，否则去除。可选的invert为布尔值，如果设置为true则为函数fn的取反，满足条件的去除同样fn也可以接受两个参数，

var aResult = $.grep(aArray,function(value, index)即index为元素的序号，结果仍为数组转化数组
$.map(array,fn)
array为希望转化的数组，fn为转化函数，同样可以两个参数，第一个参数为元素的值，第二个参数为元素的序号，是可选参数。
用$.map()函数进行转化后的数组长度不一定与原数组相同，可以通过设置null来删除数组的元素。
 var aArr = [0, 1, 2, 3, 4];
 $("p:eq(0)").text("长度：" + aArr.length + "，值：" + aArr.join());
 aArr = $.map(aArr,function(value){
  //比1大的加1后返回，否则删除
  return value>1 ? value+1 : null;
 });

 

搜索数组元素
对于字符串，可以通过indexOf()来搜索特定字符串所处的位置，而对于数组元素，JavaScript没有提供类似的方法。但jQuery的$.inArray()可以实现
$.inArray(value,array)
value为希望查找的对象，而array为数组本身，没有找到返回-1

 

获取外部代码
$.getScript(url,[callback])实现外部代码的加载
url为外部资源的地址，callback为加载成功后运行的回调函数

 

jQuery和Ajax

load(url,[data],[callback])
data参数启用后，整个请求过程将以post的方式进行，否则默认为get方式。如果希望用get方式则在url地址后面用类似"?data1=xj&data2=jx"的方法
$("#target").load("MyJsp.jsp span"); //仅返回span标记中的内容

 

指定发送方式，并且处理服务器返回的值
$.get(url,[data],[callback])
$.posr(url,[data],[callback],[type])
callback为请求成功后的回调函数，有两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态
type为请求数据的类型，可以是XML,HTML,JSON控制Ajax
$.ajax(options),设置Ajax的各个选项，然后指定相应的值，详见$.ajax(options)参数列表
function doRequestUsingPOST(){
 $.ajax({
  type: "POST",
  url: "9-3.jsp",
  data: createQueryString(),
  success: function(data){
   $("#serverResponse").html(decodeURI(data));
  }
 });
}
全局设定Ajax相同的参数
$.ajaxSetup(options)为$.ajax(options)设置些相同的部分 

 

Ajax事件
$.ajax()有四个事件，beforeSend,success,error,complete
6个全局事件，ajaxStart,ajaxSend,ajaxSuccess,ajaxError,ajaxComplete,ajaxStop
ajaxSend,ajaxSuccess,ajaxComplete这三个function函数都接受3个参数，第一个参数为该函数本身的属性，第二个参数为XMLHttpRequest，第三个参数为$.ajax()可以设置的属性对象。可以用$.each()方法对第一个和第三个参数进行遍历
ajaxError事件，其function函数接受四个参数，前三个同上，最后一个参数为XMLHttpRequest对象所返回的错误信息
ajaxStart,ajaxStop两个事件，在$.ajax()中美有对应的事件，因此一旦设定并且Ajax的global参数为true，就一定会在Ajax事件开始前和结束后分别触发，都只接受一个参数，即该函数本身的属性

 

jQuery与JSON
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，它非常便于阅读与编写，也易于计算机的获取。
JSON的数据由对象、数组和元素等格式组成，每种格式可以包含合法的JavaScript数据类型
$.getJSON(url,[data],[callback])
url为请求的服务器地址，可选参数data为发送给服务器的数据列表，其形式与对象相同，

callback为可选的回调函数，其函数参数为服务器返回的JSON数据

 

jQuery插件
表单插件
获取表单数据fieldValue()
<script language="javascript" src="jquery.form.js"></script>
var aFieldValue = $("#myForm *").fieldValue(); //获取整个表单有用元素的值
alert(aFieldValue.join());
var aFieldValue = $("#myForm select").fieldValue(); //通过过滤选择器获取指定元素的值

 

格式化表单数据
formSerialize()用于整个表单数据的格式化，满足Ajax异步传输数据所需要的格式
fieldSerialize()特定元素数据的格式化

 

清除和重置表单数据
clearForm()将所有项目都变为空值
resetForm()将所有项目都恢复为默认值

 

按Ajax方式提交表单
ajaxSubmit(options)options参数与$.ajax(options)的参数基本相同
这种提交不会跳转到form中的action，这个按钮type为button即可
ajaxForm(options)，type为submit
ajaxForm()较ajaxSubmit()而言，除了上传一般的表单数据外，还会上传<input

type="image"/>的坐标信息，以及提交按钮的相关信息，并会把submit()事件绑定到form元素上