学习HTML的第八天

一、事件绑定

1.事件绑定

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

二、事件类型

1.常用事件类型

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

三、事件对象

1.事件对象

使劲按驱动程序对应的函数在调用的时候，系统会自动传一个参数，这个参数就是当前事件的对象
1）鼠标事件：事件发生的时候鼠标的位置信息
clientX/clientY - 鼠标到浏览器内容最左边的距离和顶部的距离
offsetX/offsetY - 鼠标到事件源最左边的距离和顶部的距离
2）键盘事件：被按下的键
key - 按键对应的字符
keyCode - 按键对应的字符的编码值(小写字母返回的是对应的大写字母的编码值)

四、事件的捕获

1.事件传递

发生在子标签上的事件会传递给父标签

2.事件捕获

阻止事件传递给父标签（在父标签和子标签都对同一个事件进行绑定的时候才需要阻止）
事件对象.stopPropagation()

五、认识jQuery

1.什么是jQuery

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

2.怎么使用jQuery

1）导入jQuery

本地：

 <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>  

远程：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>  

2）怎么用

jQuery中：$就是jQuery类，$()就是jQuery对象
jQUery对象的本质就是像数组一样的容器对象，容器中的元素是标签对应的节点对象，除了元素以外还有额外的属性和方法

六、jQuery的DOM操作

1.获取节点

$(css选择器) - 获取css选择器中的标签

2.创建节点和添加

1）创建节点
$(html代码)
2）添加节点
节点对象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是兄弟关系）

3.删除

节点对象.remove()

4.jQuery对象和js对象的转换

jQuery对象是容器对象，容器中元素就是标签对应的节点对象，本质就是js对象
1）jQuery对象转换成js对象：去除jQuery容器中的元素
2）js对象转换jQuery对象：$(js对象)

5.事件绑定

节点对象.on(事件名,函数) - 函数中的this是事件源节点(this是js对象)