前端第8天

事件和jQuery基础

一、事件

1.事件绑定

• 给标签的事件属性赋值(函数的调用) - this是window
• 节点.事件属性 = 函数 - this是事件源
• 节点.addEventLisenner(事件名称, 函数) - 事件名称去掉on，this的事件源
  可以给同一个标签的同一个事件绑定不同的驱动程序（一般在原来的功能已经实现了，需要在原功能的基础上添加新的功能的时候才考虑这个问题）

2.常用事件类型

• onclick - 标签被点击事件（可以绑定在绝大多数的可见标签上）
• onload - 页面加载完成对应的事件（一般绑定在window上）
• onmouseover - 鼠标悬停在标签上对应的事件
• onmouseout - 鼠标离开标签对应的事件
• onkeydown - 按下按键对应的事件（可以绑定在表单相关标签上）
• onchange - 值改变事件

3.事件对象

事件驱动程序对应的函数在调用的时候，系统会自动传一个参数，这个参数就是当前事件的事件对象。

• 鼠标事件：事件发生的时候鼠标的位置信息
  clientX/clientY - 鼠标到浏览器内容最左边的距离和顶部的距离
  offsetX/offsetY - 鼠标到事件源最左边的距离和顶部的距离
• 键盘事件：被按下的键
  key - 按键对应的字符
  keyCode - 按键对应的字符的编码值(小写字母返回的是对应的大写字母的编码值)

4.事件捕获

• 事件传递
  发生在子标签上的事件会传递父标签
• 事件捕获
  阻止事件传递给父标签。
• 事件捕获
  阻止事件传递给父标签（在父标签个子标签都对同一个事件进行绑定的时候才需要阻止）
  事件对象.stopPropagation()

二、jQuery基础

1.什么是jQuery

jQery是使用js封装的一个库，本质就是一个js文件。
通过jQuery类的对象来提供功能，能够让DOM操作变得简单。

2.怎么使用jQuery - 导入jQuery对应的js文件

• 导入jQuery
  本地
  远程
• 怎么用
  jQuery中 $ 就是jQuery的类。$()就是jQuery对象。
  jQuery对象的本质就是像数组一样的容器对象，容器中的元素是html标签对应的节点对象，除了元素以外还有额外的属性和方法。

3.jQuery的DOM操作

• 获取节点
  $(css选择器) - 获取css选择器选中的标签
  注意：对jQuery对象进行的节点操作，会作用于jQuery对象中所有的节点。
• 创建节点
  $(html代码)
• 添加节点
  节点对象1.append(节点对象2) - 在节点1的最后添加节点2（节点1和节点2是父子关系）
  节点对象1.prepend(节点对象2) - 在节点1的最前面添加节点2 （节点1和节点2是父子关系）
  节点对象1.after(节点对象2) - 在节点1的后面插入节点2（节点1和节点2是兄弟关系）
  节点对象1.before(节点对象2) - 在节点1的前面插入节点2（节点1和节点2是兄弟关系）
• 删除
  节点对象.remove()
• jQuery对象和js对象的转换
  jQuery对象是容器对象，容器中元素就是标签对应的节点对象，本质就是js对象。
  jQuery对象转换成js对象: 取出jQuery容器中的元素。
  js对象转换jQuery对象：$(js对象)