(jQuery学习.docVIP

第8章 《jQuery(一)》 本章目标： 能够使用jQuery选择器获得操作对象 能够使用jQuery操作DOM 能够使用jQuery处理页面事件 能够使用jQuery动画方法创建简单动画 本章重点： jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础 本章难点： jQuery事件处理 jQuery动画基础 jQuery简介 jQuery是一个轻量的JavaScript库，是由John Resig在2006年1月创建的一个开源项目 jQuery常规作用可以概括为以下7个方面： 获取页面中的元素 修改页面外观 改变页面内容 响应用户在页面上的操作 为页面添加动态效果 页面无刷新获取服务器端信息 简化常规的JavaScript代码 配置jQuery环境 在页面中添加对于jQuery库文件的引用 工厂函数$() CSS选择器 XPath选择器 自定义选择器 类似CSS中的伪类选择符语法，使用冒号(:)开头 jQuery DOM操作 节点操作包括查找节点、创建节点、插入节点、删除节点和复制节点操作 样式操作 jQuery 事件和动画 事件绑定 bind(type [,data],fn); 第1个参数是事件类型，包括click、focus、blur、load、scroll、dblclick、mousedown、mouseup、mousemove、mouseout、mouseenter、keydown、keyup、keypress、select、change、submit、error等 第2个参数为可选参数，作为event.data属性传递给事件对象的额外数据对象 第3个参数为绑定的事件处理函数，jQuery中一般使用匿名函数来处理事件 通过unbind()方法移除事件的绑定 特殊事件 one事件：事件只执行一次即被删除 特殊事件 hover事件:是使用hover()方法绑定的复合事件，用于模拟光标悬停事件 特殊事件 toggle事件：是使用toggle()方法注册的模拟鼠标连续单击的复合事件 jQuery通过stopPropagation()方法阻止事件冒泡 模拟用户操作 使用trigger()方法模拟用户操作，即从代码中触发事件 jQuery动画 jQuery动画主要通过动画函数实现，这些动画函数可以分为4类： 基本动画函数：最常用的动画函数。既有透明度渐变，又有滑动效果 滑动动画函数：滑动渐变效果 淡入淡出动画函数：透明度渐变效果 自定义的动画函数：开发者自己定义的动画函数。功能最强大 show() 语法: show(speed,[callback]) hide() toggle()：能够实现连续点击元素时交替执行显示和隐藏，带参数 toggle()方法则可以使这种效果更加平滑 slideDown(speed [,callback]) 调整元素的高度，使匹配的元素以“滑动”的方式由上而下显示出来 slideUp(speed [,callback]) 调整元素的高度，使匹配的元素以“滑动”的方式由下而上隐藏 slideToggle(speed [,callback]) 实现slideDown()和slideUp()2个函数的功能 fadeIn(speed [,callback]) 通过调整元素的不透明度实现逐渐淡入的动画效果 fadeOut(speed [,callback]) 通过调整元素的不透明度实现逐渐淡出的动画效果 fadeTo(speed, opacity [,callback]) 指定将元素的不透明度由一个值渐进方式过渡到另一个值 animate()函数可以使用户自定义动画，而且可以通过stop()函数取消动画 stop([clearQueue] [,gotoEnd]) 语法说明： stop()方法的两个参数都是布尔类型的可选参数。如果使用不带任何参数的stop()方法，则会立即停止当前正在执行的动画。如果还需要执行后面的动画，则以当前状态开始接下来的动画。clearQueue参数表示是否要清空未执行完的动画队列，gotoEnd参数表示是否直接将正在执行的动画跳转到最终状态 stop()应用案例 如果为一个元素绑定hover事件，当用户的光标进入元素触发动画效果，如果动画还没结束，用户就将光标移出这个元素，则移出元素的的动画放入动画队列，等待前一个动画执行结束后再执行光标移出的动画。用户如果光标进入和移出的速度太快，则光标移动与动画执行就不一致。此时只要在光标进入、移出前加入stop()方法，就可以解决