module5-05-jQuery 事件操作和插件

jQuery 事件操作和插件

一、事件操作

1.1 事件绑定

（1）简单方式注册事件

• 语法：JQ对象.事件名（如click）(事件处理函数)

  • 这种注册方式相当于onclick，只能绑定一个后面会覆盖前面

（2）on 方法注册事件

① 注册简单事件语法：

• JQ对象.on('事件名', 事件处理函数)

• 相当于addEventListener

② 事件委托实现：

• JQ对象.on('事件名', '选择器', 事件处理函数)

• 参数中的选择器必须是后代选择器

（3）off 方法解除事件绑定

• off可以解绑简单绑定的事件，也可以解绑委托注册的事件

1.2 触发事件

• 当想在程序里面实现一个DOM元素的点击或者什么的时候可以用这个触发事件的功能

• 语法：

  • JQ对象.trigger('事件名')

1.3 JQ事件对象

• 相当于事件函数的e，在JQ中棒我们重新封装了

鼠标事件对象相关属性

• clidntX / Y：参照浏览器

• pagheX / Y：参照文档

• offsetX / Y：参照元素

  • position

键盘事件对象相关属性

• 事件对象.keyCode返回键码数字

• 事件对象.altKey / shiftKey / ctrlKey：可以检测键盘是否按下，并返回布尔值

公共的属性或方法

• 属性

  事件对象.target：最初触发事件的DOM元素

  事件对象.currentTarget：在事件冒泡阶段中的当前DOM元素

• 方法

  事件对象.preventDefault()：阻止默认行为

  事件对象.stopPropagation()：阻止事件冒泡

二、多库共存

2.1 关于$冲突问题

（1）解决方法1

• jQuery不使用$，使用jQuery

（2）解决方法2

• jQuery库释放$符号的使用权限，用其他建房符号代替

• jQuery.noConflict()：释放$，把$所代表的对象作为返回值返回

三、jQuery插件的使用

3.1 如何获取插件

• jQuery插件库之家：http://www.htmleaf.com

3.2 插件使用方法

• ① 复制借勾，保证结构关系一直，标签名不一致无所谓

• ② 样式，可以复制样式，也可以定义自己想要的样式

• ③ 先引入jQuery文件，再引入插进库文件

• ④ 复制源代码查看文档使用

3.3 插件案例

• 放大镜插件

  http://www.jacklmoore.com/zoom/

• 使用轮播图插件