[计算机软件及应用]jQuery框架AJAX技术4.pptVIP

第四章 jQuery中的事件和动画 回顾 节点操作 属性操作 样式操作 设置元素内容 处理表单元素值 目标 事件的绑定和移除 事件对象和事件冒泡 合成事件 动画操作基础 常用动画效果 自定义动画 jQuery中的事件模型 提供建立事件处理程序的统一方法； 允许在每个元素上为每个事件类型建立多个处理程序； 采用标准的事件类型名称，例如click或mouseover； 使Event实例可用作处理程序的参数； 对Event实例的最常用的属性进行规范化； 为取消事件和阻塞默认操作提供统一方法。 绑定事件处理程序 bind(type [,data] , fn) 第1个参数是事件类型 第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象 第3个参数则是用来绑定的处理函数。 one(type [,data] , fn) 事件处理程序执行第一次后，事件绑定就自动删除。 bind()方法示例 简写绑定事件 删除事件处理程序 unbind(eventType, functionName) 删除包装集中所有元素指定事件中指定的事件处理程序 unbind(eventType) 表示与此事件类型绑定的所有事件处理程序都将被删除 unbind() 表示将该元素中的所有事件的所有事件处理程序都删除 unbind()方法示例 事件对象 当利用bind()方法建立的事件处理程序被调用时，Event实例作为第一个参数被传递给函数。jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。 事件对象属性一 事件对象属性二 事件对象示例 事件冒泡 stopPropagation() 阻止事件冒泡 preventDefault() 阻止默认行为 合成事件—hover() 合成事件—toggle() 模拟操作 动画操作基础 width( ) 和height( ) 获得元素的宽和高，返回数值类型 width(value) / height(value) 设置元素的宽和高 offset() 方法 position() 方法 操作滚动条 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]) 进行元素的淡入淡出切换效果 使元素滑上和滑下 slideUp(speed [,fn]) 使元素通过滑上效果隐藏 slideDown(speed [,fn]) 使元素通过滑下效果显示 slideToggle(speed [,fn]) 通过滑上和滑下效果切换元素的隐藏和显示 自定义动画 animate(params, speed, callback) params：一个包含样式属性及值的映射，比如{property1: value1,property2: value2...} speed：速度参数，可选 callback：在动画完成时执行的回调函数，可选。 stop() 调用此方法可停止动画的执行 自定义动画示例 总结 事件的绑定和移除 事件对象和事件冒泡 合成事件 动画操作基础 常用动画效果 自定义动画 作业 简述jQuery中的事件绑定和删除。 简述什么是事件冒泡。 简述如何停止事件冒泡和阻止元素默认行为。 简单描述4个常用的动画效果。 简述自定义动画方法animate()的使用。 * SSOFT V2.0 * 页面JavaScript代码片段 script type=text/javascript $(function(){ $(input).bind(click,function(){ alert(Hello jQuery!);