五-1.阅读下面代码,实现在单击 “显示盒子” 按钮时,显示id为box的元素;而按下键盘中的“Esc”键时,让盒子消失。

前台:<input type='button' value='显示'name=''>

<div id="box" style="background: red;width:200px;height:200px;display:none" > </div >

JQ部分:

<script>$('input').on('click',function() { $('div').css('display','block'); });
$(document).on('keydown',function(e){ if(e.keyCode=='27'){ $('#box').css('display','none'); }; });
</script>

五-2.使用jQuery的change事件实现关键字查询。在用户输入完成后,根据输入的关键字,从data数据中检索出包含关键字的数据项,展示到页面中。

前台:<input type="text" name=""> <ul id="list"> </ul>

jq部分:var data = ["Head First HTML与CSS", "JavaScript高级程序设计", "JavaScript DOM编程艺术", "高性能网站建设进阶指南", "高性能网站建设指南", "Web前端黑客技术揭秘 ", "JavaScript权威指南", "精通CSS", "编写可维护的JavaScript ", "高性能JavaScript"]
$(function(){
$("input").change(function(){
var group = [];
for (var i = 0; i < data.length; i++) {
if(data[i].toLowerCase().indexOf($(this).val().toLowerCase())!== -1){
group.push(data[i]);
} }
if(group.length!=0){
$("#list").html("");
for (var i= 0; i<group.length;i++) {
$("<li>"+group[i]+"</li>").appendTo("#list");
} }else{
$("<li>无</li>").appendTo("#list");
} }) })