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元素上