jQuery的动态效果

下面我们逐个
介绍jQuery 用于效果处理的方法。
hide() 隐藏匹配对象
<p id="a">Hello Again</p><a href="#" onClick=’ ("#a").hide()’>jQuery</a>
当点击连接时,id 为a 的对象的display 变为none。
show() 显示匹配对象
hide(speed) 以一定的速度隐藏匹配对象，其大小（长宽）和透明度都逐渐变化到0，speed
有3级("slow", "normal", "fast")，也可以是自定义的速度。
show(speed) 以一定的速度显示匹配对象，其大小（长宽）和透明度都由0逐渐变化到
正常
hide(speed, callback) show(speed, callback) 当显示和隐藏变化结束后执行函数
callback
toggle() toggle(speed) 如果当前匹配对象隐藏，则显示他们，如果当前是显示的，就
隐藏，toggle(speed),其大小（长宽）和透明度都随之逐渐变化。
<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>
fadeIn(speeds) fadeOut(speeds) 根据速度调整透明度来显示或隐藏匹配对象，注意
有别于hide(speed)和show(speed)，fadeIn和fadeOut都只调整透明度，不调整大小
<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("sl
ow")'> jQuery </a>
点击连接后可以看到图片逐渐显示。
fadeIn(speed, callback) fadeOut(speed, callback) callback为函数，先通过调整
透明度来显示或隐藏匹配对象，当调整结束后执行callback函数
<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done.");
})'> jQuery </a>
点击连接后可以看到图片逐渐显示,显示完全后弹出对话框
fadeTo(speed, opacity, callback) 将匹配对象以speed 速度调整倒透明度opacity，
然后执行函数callback。Opacity为最终显示的透明度(0-1).
<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Don
e."); })'> jQuery </a>
大家可以看一下自己看看效果，如果不用jQuery，编写原始javascript 脚本可能很多代码！
slideDown(speeds) 将匹配对象的高度由0以指定速率平滑的变化到正常！
<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
slideDown(speeds,callback) 将匹配对象的高度由0变化到正常！变化结束后执行函数
callback
slideUp("slow") slideUp(speed, callback) 匹配对象的高度由正常变化到0
slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到0，若为0，则逐渐变化到正
常
六：事件处理
hover(Function, Function) 当鼠标move over 时触发第一个function，当鼠标
move out时触发第二个function
样式：<style>.red{color:#FF0000}</style>
Html 代码： <div id="a">sdf</div>
jQuery 代码及效果
$(function(){
$("#a").hover(function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
最终效果是当鼠标移到id 为a 的层上时图层增加一个red 样式，离开层时移出red 样式
toggle(Function, Function) 当匹配元素第一次被点击时触发第一个函数，当第二次被
点击时触发第二个函数
样式：<style>.red{color:#FF0000}</style>
Html 代码： <div id="a">sdf</div>
jQuery 代码及效果
$(function(){
$("#a"). toggle (function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
最终效果是当鼠标点击id 为a 的层上时图层增加一个red 样式，离开层时移出red 样式
bind(type, fn) 用户将一个事件和触发事件的方式绑定到匹配对象上。
trigger(type) 用户触发type形式的事件。$("p").trigger("click")
还有：unbind() unbind(type) unbind(type, fn)
Dynamic event(Function) 绑定和取消绑定提供函数的简捷方式
例：
$("#a").bind("click",function() { $(this).addClass("red");})
也可以这样写：
$("#a").click(function() {
$(this).addClass("red");
});
最终效果是当鼠标点击id 为a 的层上时图层增加一个red 样式，
jQuery提供的函数
用于browers事件
error(fn) load(fn) unload(fn) resize(fn) scroll(fn)
用于form事件
change(fn) select(fn) submit(fn)
用于keyboard事件
keydown(fn) keypress(fn) keyup(fn)
用于mouse事件
click(fn) dblclick(fn) mousedown(fn) mousemove(fn)
mouseout(fn) mouseover(fn) mouseup(fn)
用于UI事件
blur(fn) focus(fn)
以上事件的扩展再扩展为5 类
举例，click(fn) 扩展click() unclick() oneclick(fn) unclick(fn)
click(fn)：增加一个点击时触发某函数的事件
click()：可以在其他事件中执行匹配对象的click 事件。
unclick ()：不执行匹配对象的click 事件。
oneclick(fn)：只增加可以执行一次的click 事件。
unclick (fn)：增加一个点击时不触发某函数的事件。
上面列举的用于browers、form、keyboard、mouse、UI 的事件都可以按以上方法扩展。
七：Ajax支持
通用方式：
$.ajax(prop) 通过一个ajax请求，回去远程数据，prop是一个hash表，它可以传递
的key/value有以下几种。
(String)type：数据传递方式(get 或post)。
((String)url：数据请求页面的url
((String)data：传递数据的参数字符串，只适合post 方式
((String)dataType：期待数据返回的数据格式(例如"xml", "html", "script",或
"json")
((Boolean)ifModified： 当最后一次请求的相应有变化是才成功返回，默认值是false
((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
((Boolean)global：是否为当前请求触发ajax 全局事件，默认为true
((Function)error：当请求失败时触发的函数。
((Function)success：当请求成功时触发函数
((Function)complete：当请求完成后出发函数
jQuery 代码及说明
$.ajax({url: "ajax.htm",
success:function(msg){
$(div"#a").html(msg);
}
});
将ajax.htm 返回的内容作为id 为a 的div 内容
$.ajax({ url: "ajax.aspx",
type:"get",
dataType:"html",
data: "name=John&location=Boston",
success:function(msg){
$("#a").html(msg);
}
});
用get 方式向ajax.aspx 页面传参数，并将返回内容负给id 为a 的对象。
$.ajaxTimeout(time) 设置请求结束时间
$.ajaxTimeout( 5000 )
其它简化方式：
$.get(url, params, callback) 用get方式向远程页面传递参数，请求完成后处理函数，
除了url外，其它参数任意选择！
$.get( "ajax.htm" , function(data){ $("#a").html(data) })
$.get( "ajax.asp",
{ name: "young", age: "25" },
function(data){ alert("Data Loaded: " + data); }
)
$.getIfModified(url, params, callback) 用get方式向远程页面传递参数，从最后一次
请求后如果数据有变化才作出响应，执行函数callback
$.getJSON(url, params, callback) 用get方式向远程json对象传递参数，请求完成后
处理函数callback。
$.getScript(url, callback) 用get方式载入并运行一个远程javascript文件。请求完成
后处理函数callback。
$.post(url, params, callback) 用post方式向远程页面传递参数，请求完成后处理函数
callback
load(url, params, callback) 载入一个远程文件并载入页面DOM 中，并执行函数
callback
$("#a").load("ajax.htm", function() { alert("load is done"); } );
向ajax.htm 页面发出请求，将返回结果装入id 为a 的内容中，然后再执行函数callback。
loadIfModified(url, params, callback) 用get方式向远程页面传递参数，从最后一次
请求后如果数据有变化才作出响应，将返回结果载入页面DOM中，并执行函数callback
ajaxStart(callback) 当ajax请求发生错误是时执行函数callback
ajaxComplete(callback) 当ajax请求完成时执行函数callback
ajaxError(callback) 当ajax请求发生错误时执行函数callback
ajaxStop(callback) 当ajax请求停止时执行函数callback
ajaxSuccess(callback) 当ajax请求成功时执行函数