黑马程序员技术交流社区
标题: [杭州校区]jqurey技术实现google浏览器效果 [打印本页]
作者: 石头哥 时间: 2017-6-28 10:27
标题: [杭州校区]jqurey技术实现google浏览器效果
本帖最后由 石头哥 于 2017-6-28 14:10 编辑
我们都知道jquery可以实现各种特效。那么我们常见的浏览器自动联出效果，能实现么？答案是肯定的。
下面看看我们将要实现的效果图：
细分一下，我们要实现的效果有：
1. 页面效果：包括“谷歌一下”，还有下面的输入框，搜索，一节结果展示。
2. 当输入一个字的时候，查询结果，并展示。
3. 当我们吧，结果输入一些服务器没有的数据的时候，显示搜索结果不存在。
4. 当我们把按下“backspace”按键，时候，下面的的结果展示会消失（可以自行百度搜索下，感受下这个效果）。
第一：首先来实现下界面效果：
代码如下：
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<!--添加主体，和搜索框，以及搜索buttn-->
<h1>谷歌一下</h1>
<input type="text" id="word" name="name" style="height: 40px; width: 350px;" />
<input type="button" id="btn" name="btn" value="谷歌搜索" style="height: 40px;"/>
<!--添加搜索结果布局-->
</center>
<div id="jieguo" style="display:none;height: 400px; width: 300px; position: absolute; top: 150px; left: 500px; border: 1px solid gray;"></div>
</body>
</html>
代码相比非常简单，大家也看的明白。重点是说下：我们的结果展示；结果展示那里，我们是设置了一个绝对布局，这个不太常用，大家可以留意一下。2012年前，很多网站还是老式网站，市面常见的我网站都有一些消息展示（一下是2017年我从国内某高校网站截取的图片）
：
可以看到这种就是绝对布局。虽然“游标”在动，但是他确实相对整个页面的某个位置在做特定位置的移动。这种效果可以用绝对布局实现。但是这都是很老的技术了。大家知道就可以了。
第二步，添加jquery依赖，和引入jquery：在整个项目中js文件夹下添加：jquery文件。jquery文件分为两种：
这两种都可以，红圈中上面的js，是压缩版的jquery文件。体积小，实战开发，基本上都是这个，二者并无本质区别。然后在原来的html页面中引入：引入代码如下：
[HTML] 纯文本查看 复制代码
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
</script>
第三步：使用jqurey技术完成网络请求。实现网络请求的jquery方法是：[AppleScript] 纯文本查看 复制代码
$get{"","","",""}
这个是使用jquery进行get请求，方法有四个参数
：
1. 一个参数是请求的url路径，如果使用本地路径，则将本地路径文件（要求本地文件路径，内容为json，但是jquery方法本身支持多种文件传输格式）认为是结果：
2. 请求的时候，携带的请求参数，key value（键值对）形式。
3. 对返回结果的处理
4. 解析的形式
124参数，均为String形式。因为我们要模拟网络请求，但是么有服务器，所以使用本地json。在这里我们必须在项目目录上添加json文件。
[AppleScript] 纯文本查看 复制代码
[
{
"name":"小鱼儿"
},
{
"name":"小花猫儿"
},
{
"name":"小玉儿"
},
{
"name":"小老虎儿"
},
{
"name":"小狼崽儿"
}
]
注意：这里添加的位置：和我们的html网页在同级的目录！
网络请求完整代码如下：
[AppleScript] 纯文本查看 复制代码
$(function(){
//绑定我们的监听事件
$("#word").keyup(function(){
//我们取出输入框中输入的值
// 判断这个值是不是为空,不为空,我们去请求,如果为空,我们隐藏我们的div
var word=$(this).val();
if(word!=""){
//做网络请求
$.get("nr.json",{"word":word},function(data){
$("#jieguo").show().html(""); //TODO1:
},"json");
}else{
//TODO2:
}
});
});
[AppleScript] 纯文本查看 复制代码
if(word=="小"){
//数组进行遍历
$(data).each(function(i,n){
//添加到结果元素里面div
$("#jieguo").append("<font>"+n.name+"</font><br />");
});
}else{ //添加友好提醒
$("#jieguo").show().html("<span>你想要的女星不存在！</span>");
}
这样我们写出代码之后，当我们按下backspace到尽头的时候，以前的搜索结果还在。
这样就不符合我们的效果。
怎么办？在第二个todo位置添加如下代码：
[AppleScript] 纯文本查看 复制代码
$("#jieguo").hide();
这样，当我们不停的按下backspace，输入框内容为空，监听到这个事件，则隐藏结果框。
当我们完成这个代码后
：可以做一个小练习，把我们的二级联动加以改造：
需要的json文件：
[AppleScript] 纯文本查看 复制代码
[
{"name":"杭州"},
{"name":"金华"},
{"name":"温州"},
{"name":"乌镇"},
{"name":"舟山"},
{"name":"建德"}
]
js引用完整代码：
[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
//进来之后
$("#province").change(function(){
//
var p=$(this).val();
if(p=="zj"){
$("#city").show().html("<option> --请选择--</option>");
$.get("c.json",{"p":p},function(data){
$(data).each(function(i,n){
$("#city").show().append("<option >"+n.name+"</option>");
});
},"json");
}
});
});
</script>
</head>
<body>
省份：<select id="province" name="pp">
<option value="">--请选择--</option>
<option value="zj">浙江</option>
<option value="hb">湖北</option>
<option value="js">江苏</option>
</select>
城市：<select id="city" name="cc">
<!---->
</select>
</body>
</html>
运行：成功实现。
。好开心！！
同学们，你们学会了么？
作者: 石头哥 时间: 2017-6-28 14:10
沙发自己做
作者: 烽火狼烟 时间: 2017-6-29 23:10
看起来很厉害啊
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |