2.2.6　实验步骤

2.2.6　实验步骤

任务1实验分解

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

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

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

效果如图2.12所示。

图2.12

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

图2.13

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

（6） 添加一个加载函数，在里面给文本框绑定一个keyup事件。

代码如下：

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

任务2实验分解

（1） 在keyup事件中，根据层次选择器找到除列头以外的行，将它们隐藏，如图2.14所示。

图2.14

新加代码如下：

（2） 接收用户输入的值。

新加代码如下：

（3） 判断用户是否输入，如果输入了就进行内容筛选，如图2.15和图2.16所示。

图2.15

图2.16

加入如下代码实现内容筛选。

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