1 实现如下图所示的页面效果,当鼠标移动到元素上时,样式发生改变,鼠标移出后,样式还原。

鼠标移动到元素上时,背景色改变。鼠标移出元素后,背景色还原。界面效果如图-1所示。

图– 1

图-1中选项二即为改变颜色后的效果。

参考答案

实现此案例可按照如下步骤进行。

步骤一:新建exec02.html文件

新建exec02.html文件,在该文件中创建如图-1所示的三个区域,代码如图-2所示。

图– 2

步骤二:引入jQuery.js文件

在exec02.html文件中引入jQuery.js文件,代码如图-3所示。

图– 3

步骤三:使鼠标移动到的区域加亮显示

添加jQuery代码,使鼠标移动到的区域加亮显示,代码如图-4所示。

图– 4

步骤四:运行查看效果

访问exec02.html页面,界面显示效果如图-5所示。

图– 5

本案例的完整代码如下。

exec02.html文件的完整代码如下所示:

2 编写程序,实现类似于百度搜索时的自动完成功能。

使用jQuery实现类似于百度搜索时的自动完成功能,界面效果如图-6所示。

图– 6

参考答案

首先在输入框上注册keyup事件,然后在事件中通过AJAX获取JSON对象。取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当我们点击每一项的时候,就可以响应事件。键盘导航的关键是记录当前高亮的索引值,根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置,当浏览器的大小改变时,随时调整下拉列表的位置。

完成本案例可按照如下步骤进行。

步骤一:新建baidu.html文件

新建baidu.html文件,在该文件中创建如图-6所示的界面,代码如图-7所示。

图– 7

步骤二:引入jQuery.js文件

在baidu.html文件中引入jQuery.js文件,代码如图-8所示。

图– 8

步骤三:设置页面的样式

在baidu.html文件中,添加页面样式信息,代码图-9所示。

图– 9

步骤四:创建ActionServlet

新建ActionServlet,在其中模拟服务器提供的数据,代码如图-10所示。

图– 10

步骤五:配置ActionServlet

在web.xml文件中,配置ActionServlet,代码如图-11所示。

图– 11

步骤六:获取jQuery对象

获取id为“search”的div层对应的jQuery对象以及获取id为“search-text”的文本框对应的jQuery对象,代码如图-12所示。

图– 12

步骤七:创建自动完成的下拉列表

首先,关闭浏览器对输入框的自动完成功能;然后创建自动完成的下拉列表,用于显示服务器返回的数据,插入在搜索按钮的后面,待显示的时候再调整位置,代码如图-13所示。

图– 13

步骤八:创建clear方法并给输入框注册blur事件

首先,创建clear方法,用于清空下拉列表的内容并且隐藏下拉列表区;然后给输入框注册blur事件,当输入框失去焦点的时候清空下拉列表并隐藏,代码如图-14所示。

图– 14

步骤九:设置下拉项的高亮背景

新建方法setSelectedItem,该方法用于设置下拉项的高亮背景,代码如图-15所示。

图– 15

步骤十:发送AJAX请求

新建方法ajax_request,在该方法中发送AJAX请求,通过AJAX请求获取JSON对象。取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当点击每一项的时候,就可以响应事件,代码如图-16、图-17所示。

图– 16

图– 17

步骤十一:在输入框上注册keyup事件

在输入框上注册keyup事件,然后在事件中通过AJAX获取JSON对象。取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当点击每一项的时候,就可以响应事件。键盘导航的关键是记录当前高亮的索引值,根据索引值来调整背景高亮,代码如图-18、图-19所示。

图– 18

图–19

步骤十二:调整下拉列表框的位置

注册窗口大小改变的事件,重新调整下拉列表的位置,代码如图-20所示。

图– 20

本案例的完整代码如下。

baidu.html文件的完整代码如下所示:

ActionServlet完整代码如下所示:

web.xml文件的完整代码如下所示: