黑马程序员技术交流社区

标题: [杭州校区]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