jquery框架和ajax技术第四章

第四章jQuery中的事件和动画回顾节点操作属性操作样式操作设置元素内容处理表单元素值目标事件的绑定和移除事件对象和事件冒泡合成事件动画操作基础常用动画效果自定义动画jQuery中的事件模型提供建立事件处理程序的统一方法；允许在每个元素上为每个事件类型建立多个处理程序；采用标准的事件类型名称，例如click或mouseover；使Event实例可用作处理程序的参数；对Event实例的最常用的属性进行规范化；为取消事件和阻塞默认操作提供统一方法。绑定事件处理程序bind(type[,data],fn)第1个参数是事件类型第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象第3个参数则是用来绑定的处理函数。one(type[,data],fn)事件处理程序执行第一次后，事件绑定就自动删除。bind()方法示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("input").bind("click",function(){ alert("HellojQuery!"); }); });</script><inputtype="button"value="submit"/>上述代码在页面加载完成后，为按钮通过bind()方法绑定了一个click点击事件，在用户点击按钮时则显示HellojQuery！简写绑定事件像click、mouseover和mouseout这类事件，在程序中经常会使用到，jQuery为此也提供了一套简写的方法。简写方法和bind()方法的使用类似，实现的效果也相同，唯一的区别是能够减少代码量。<scripttype="text/javascript"> $(function(){ $("input").click(function(){ alert("HellojQuery!"); }); });</script><inputtype="button"value="submit"/>上面这种写法简洁明了，是事件绑定中常用的写法。删除事件处理程序unbind(eventType,functionName)删除包装集中所有元素指定事件中指定的事件处理程序unbind(eventType)表示与此事件类型绑定的所有事件处理程序都将被删除unbind()表示将该元素中的所有事件的所有事件处理程序都删除unbind()方法示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("#btn").click(myFunc1=function(){ $("#msg").html($("#msg").html()+"click1<br/>"); }).click(myFunc2=function(){$("#msg").html($("#msg").html()+"click2<br/>"); }); //删除指定的事件处理程序

$("#btn").unbind("click",myFunc1); });</script><divid="msg"></div><inputid="btn"type="button"value="submit"/>事件对象当利用bind()方法建立的事件处理程序被调用时，Event实例作为第一个参数被传递给函数。jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。事件对象属性一属性描述altKey当触发事件时，如果Alt键已被按下，设置为true，否则设置为falsectrlKey当触发事件时，如果Ctrl键已被按下，设置为true，否则设置为falsedata如果有值的话，就在绑定事件处理程序时，作为第二个参数传递到bind()方法的值keyCode对于keyup(键上)和keydown(键下)事件，返回被按下的键。请注意对于字母符号，不管用户输入的是大写还是小写字母，返回的都是字母的大写版本。例如，a和A都返回65.可以用shiftKey属性来确定输入的是大写还是小写。对于keypress(按键)事件，请使用which属性，因为which属性在跨浏览器时依然是可靠的。pageX对于鼠标事件，指定事件的相对于页面原点的水平坐标pageY对于鼠标事件，指定事件的相对于页面原点的垂直坐标relatedTarget对于某些鼠标事件，标识触发事件时光标离开或进入的元素事件对象属性二属性描述screenX对于鼠标事件，指定事件的相对于屏幕原点的水平坐标screenY对于鼠标事件，指定事件的相对于屏幕原点的垂直坐标shiftKey当触发事件时，如果Shift键已被按下，设置为true，否则设置为falsetarget标识在哪个元素上事件被触发type对于所有的事件，指定已触发的事件的类型，例如click。如果利用单个事件处理函数来处理多个事件，这个属性就能派上用场。which对于键盘事件，指定触发事件的键的数字编码；对于鼠标事件，指定按下的是哪个鼠标键(1为左、2为中、3为右)。originalEvent该属性的作用是指向原始的事件对象事件对象示例页面JavaScript代码片段<scripttype="text/javascript"> $(function(){ $("input").click(function(event){ alert(event.target.value); }); });</script><inputtype="button"value="button1"/><inputtype="button"value="button2"/><inputtype="button"value="button3"/><inputtype="button"value="button4"/>事件冒泡在事件目标元素完成事件处理程序后，事件模型检查目标元素的父元素，看是否为同类型事件建立了处理程序。如果是，则也调用父元素的处理程序。在这之后，再检查其父元素，然后父元素，然后父元素……<scripttype="text/javascript"> $(function(){ $("input").click(function(){ $("#sp").html($("#sp").html()+"input<br/>"); }); $("form").click(function(){ $("#sp").html($("#sp").html()+"form<br/>"); }); $("div").click(function(){ $("#sp").html($("#sp").html()+"div<br/>"); }); });</script><spanid="sp"></span><div> <form><inputtype="button"value="submit"/></form></div>stopPropagation()阻止事件冒泡事件冒泡可能会引起预料之外的效果。为了解决这个问题，可以使用Event对象的stopPropagation()方法阻止事件冒泡。停止事件冒泡可以阻止事件中其他对象的事件处理程序被执行。<scripttype="text/javascript"> $(function(){ $("input").click(function(event){ $("#sp").html($("#sp").html()+"input<br/>");

event.stopPropagation(); }); $("form").click(function(){ $("#sp").html($("#sp").html()+"form<br/>"); }); $("div").click(function(){ $("#sp").html($("#sp").html()+"div<br/>"); }); });</script><spanid="sp"></span><div> <form><inputtype="button"value="submit"/></form></div>preventDefault()

阻止默认行为网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交。jQuery中提供了preventDefault()方法来阻止元素的默认行为。<scripttype="text/javascript"> $(function(){ $("input").click(function(event){ alert("submit");

event.preventDefault(); }); });</script><form> <inputtype="submit"value="submit"/></form>合成事件—hover()语法：hover(enter,leave)

此方法传递两个事件处理函数作为参数，用于建立已匹配元素的mouseover和mouseout事件处理程序。<scripttype="text/javascript"> $(function(){ $("#myDiv").hover(function(){ $("#msg").html("mouseenter"); },function(){ $("#msg").html("mouseleave"); }); });</script><divid="myDiv"> fdsafdsafdsa<br/> fdsafdsafdsa<br/> fdsafdsafdsa<br/></div><labelid="msg"></label>合成事件—toggle()语法：toggle(fn1,fn2,fn3...)toggle()方法用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第一个函数fn1，当再次单击同一元素时，则触发指定的第二个函数fn2，如果有更多函数，则依次触发，直到最后一个<scripttype="text/javascript"> $(function(){ $("input").toggle(function(){ $("div").css("display","none"); },function(){ $("div").css("display","block"); }); });</script><inputtype="button"value="showOrHide"/><div>xxxxxxx</div>模拟操作在jQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件：$("#btn").trigger("click");在jQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件：$("#btn").click();

动画操作基础width()和height()获得元素的宽和高，返回数值类型width(value)/height(value)设置元素的宽和高offset()方法offset()方法它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包括两个属性，即top和left，它只对可见元素有效。<scripttype="text/javascript"> $(function(){ varos=$("div").offset(); varleft="left:"+os.left; vartop="top:"+os.top; alert(left+""+top); });</script><div> xxxxxxx<br/> xxxxxxx<br/> xxxxxxx<br/> xxxxxxx<br/></div>position()方法position()方法它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。<scripttype="text/javascript"> $(function(){ varps=$("#myDiv").position(); varleft="left:"+ps.left; vartop="top:"+ps.top; $("label").html(left+""+top); });</script><divstyle="position:relative;padding:5px;"> <divid="myDiv"> xxxxxxx<br/> xxxxxxx<br/> xxxxxxx<br/> xxxxxxx<br/> </div></div><label></label>操作滚动条scrollTop()/scrollLeft()这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离scrollTop(value)/scrollLeft(value)第二种调用方式是为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。使元素显示和隐藏show()/hide()通过改变元素CSS样式的display属性来隐藏或显示元素，没有动画效果show(speed[,fn])/hide(speed[,fn])隐藏或显示元素，但有动画效果，speed为动画时长，第二个参数为可选的回调函数toggle(speed[,fn])参数用法和show()方法一样，不同的是用于隐藏和显示的切换使元素淡入和淡出fadeIn(speed[,fn])/fadeOut(speed[,fn])通过改变元素的不透明度来实现淡入和淡出fadeTo(speed,opactity[,fn])将元素的透明度调整到指定的值fadeToggle(speed[,fn])进