3.1.6　实验步骤

3.1.6　实验步骤

任务1实验分解

（1） 打开HBuilderX 进入开发界面，选择“文件新建项目”菜单，进入新建项目界面。选择普通项目，输入项目名称“NodeOperation”，并选择默认项目，点击创建按钮。

（2） 在实验资料与素材中找到图片文件，选中全部图片复制，并粘贴到项目中，如图3.2所示。

图3.2

（3） 在项目窗口Node Operation上，右键选择“新建html文件”，输入文件名称“index”，点击创建按钮。

（4） 在新建文件下，写入如下基础代码。

效果如图3.3所示。

图3.3

（5） 在实验资料与素材中找到jquery-3.4.1.js文件，选中文件复制，并粘贴到项目中，如图3.4所示。

图3.4

（6） 在页面的＜head＞标签里面加上jQuery的引入代码。

（7） 添加一个加载函数，给按钮绑定一个点击事件。

代码如下：

至此完成任务1的所有功能要求。

任务2实验分解

点击新增图书按钮，观察前面展示一个游戏信息层。定义变量保存要追加的节点信息，找到对应的追加对象，往后面追加，效果如图3.5所示。

图3.5

在上面事件中添加对应节点操作代码：

至此完成任务2所有要求。

任务3实验分解

点击各个图片下面的删除标签，完成节点删除动作。具体操作如下：给每个删除标签上绑定一个点击事件，传递一个当前对象，在脚本里创建一个删除函数。

新添加代码如下：

同时修改前面添加事件中的拼接字符串，在拼接字符串的删除超链接中也去加上点击事件。

修改后的代码如下：

最后在＜script＞脚本标签中添加一个删除函数，找到要删除的对象完成节点删除，效果如图3.6所示。

图3.6

新添代码如下：

至此完成任务3所有要求。