1. 实践目的

1. 掌握jQuery的基本语法并能够按照需求编写脚本；

2. 能够使用jQuery进行事件响应并处理；

3. 能够使用jQuery获得网页元素；

4. 能够使用jQuery对网页元素进行查改增删；

5. 能够使用jQuery实现简单动画效果。

2. 实践内容

1. 使用多种方法实现按钮点击事件响应；

2. 实现十大名画信息处理；

3. 实现信息悬停展示。

3. 实践要求

【要求1】使用多种方法实现按钮点击事件响应

具体要求如下：

1. 在网页中添加5个按钮，并为这些按钮添加单击事件响应。

2. 直接为第1个按钮的HTML标签添加事件响应。

3. 为第2个按钮的onclick属性添加事件响应。

4. 使用监听器监听第3个按钮的单击事件。

5. 使用jQuery的click()方法实现第4个按钮的单击事件响应。

6. 使用jQuery的bind()方法实现第5个按钮的单击事件响应。

7. 所有单击事件响应的处理函数都能够弹出警告框，并在警告框中显示所点击的按钮上的文字。

【要求2】实现十大名画信息处理

具体要求如下：

1. 编写JSON文件存储名画信息，包括序号、名字、作者朝代、作者姓名等信息。

2. 使用$.ajax()方法获取JSON数据，将数据存储在全局变量（数组）中。

3. 根据数组动态生成表格的行，且每行包含名画信息、编辑按钮、删除按钮、保存按钮（默认不显示）以及取消按钮（默认不显示）按钮。所有的名画信息输入框默认为不可编辑状态，并在表格的最后一行添加“增加”按钮，方便继续增加名画信息，如图所示。

4. 当点击"增加"按钮之后，可以在表格最后增加一行空白行、保存按钮以及取消按钮。

5. 点击"取消"按钮弹出确认框（确认是否取消），如果选择"确定"则放弃增加名画信息；如果选择"取消"，则继续编辑名画数据。

6. 点击"保存"按钮后会检查名画的基础数据是否完整，若不完整则弹出警告，若完整则将新增的名画数据写入数组中。

7. 点击任意一行"编辑"按钮后，会隐藏这一行的"编辑"和"删除"按钮，显示这一行的"保存"和"取消"按钮，同时将这一行的输入框状态设置为可用，使用户能够编辑。

8. 编辑结束之后，"保存"和"取消"按钮被点击后的效果和5、6一致。

9. 点击任意一行"删除"按钮后，弹出确认框。如果选择"确定"则删除整行名画信息及操作按钮并更新数组数据；如果选择"取消"，则返回继续其他操作。

【要求3】实现信息悬停展示

具体要求如下：

1. 在网页中添加一个二级嵌套列表，列表数据如图所示。

2. 将一级列表项排在一排，设置背景色为红色。

3. 当鼠标悬停到一级列表项上时，其对下属的二级列表划出。

4. 当鼠标离开一级列表项上时，其对下属的二级列表划入。

5. 为了防止划入划出效果不断叠加，每次划出划出之前都需要清除二级列表的动画队列。