零基础打造一款属于自己的网页搜索引擎

【前言】

在说这个之前,想必大家应该都比较了解搜索引擎了,它就是通过用户在浏览器输入框中输入文本,从而显示一些结果,你觉得哪项符合你要搜索的内容,你就点击哪项。

【一、项目准备】

浏览器:360浏览器

编辑器:Sublime Text 3

插件:Jquery-3.2.1.Min.Js

【二、项目实现】

由于是要实现一个网页搜索引擎,所以我们需要借用网页三剑客(Html+Css+Javascript),然后实现这一功能。

1.打开百度分析网页结构

我们可以先看看百度的搜索引擎:

可以看到,这个搜索框的部分设置,比如关闭自动完成功能。然后我们在随便搜索内容来查看它的变化:

可以看到某些我们查询的关键字,于是我们便发现了请求规律:

https://www.baidu.com/s?+查询字符参数

这就构成了我们的一个完整的get请求,而且这里面有很多关键字参数可以省略掉,只需要保留重要的一部分就好了。于是,经试验,得出如下结论:

https://www.baidu.com/s?wd=keyword

这个才是请求的接口地址,只需将keyword参数替换为任意搜索关键字即可实现查询并跳转到相应结果页面。

2.编写Html输入框,搜索按钮

看过之前写的Html系列的文章,你将不再对此感到困惑。

<html>
<head>
 <title></title>
 <style type="text/css">
    *{           内外边距初始时为0
       margin:0;    
       padding:0
    }
     input{
        width:300px;
        height:30px
    }
     span{
       position:absolute; 绝对定位
       background-color:red; 背景颜色
       border:1px solid gray; 边框设置
       width:60px;
       height:32px;
       text-align:center 文字位置
    }
    span:hover{ 鼠标悬停时的样式
        background-color:blue
    }
 </style>
</head>
<body>
<input type="text" name="" placeholder="请输入要搜索的内容"> 文本框
<span>search</span> 搜索按钮
</body>
</html>

编写完成后进入浏览器查看,即可看到:

可以看到,已经有点浏览器搜索框的意思了。

3.导入Jquery插件

<script src='jquery-3.2.1.min.js'></script>

4.编写js脚本

这个是重中之重,打开浏览器,network,继续分析:

可以看到搜索结果就在里面。然后打开这个请求的url地址,经过多次实验,发现就只有图中标记的参数有变化:

 

所以我们可以得出结论,我们只需要改变这两个值即可。

1).创建删除脚本

于是我先创建一个脚本标签,不用它的时候随时可以清除,避免占用内存,导致页面打开迟缓,性能降低:

var script=document.createElement('script');  创建script的标签
script.id='jsonp';   设置id为jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;  设置它的地址
document.body.appendChild(script);   添加script元素到body中

然后等它不用了,随时将它删除:

var script=document.createElement('script');  创建script的标签
script.id='jsonp';   设置id为jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;  设置它的地址
document.body.appendChild(script);   添加script元素到body中

2).生成选项下拉菜单

我们在浏览器可以看到,只要一输入文本,它就会弹出对应的选项让我们选择,那么这是如何办到的了?

<script>
function getlist(wd){    /*获取下拉列表*/
   var script=document.createElement('script');  /*创建script的标签*/
   script.id='jsonp';   /*设置id为jsonp*/
   script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 设置它的地址*/
   document.body.appendChild(script);   /*添加script元素到body中*/
}
function getData(data){  /*获取数据*/
     var script=document.querySelector('#jsonp'); /*选择id为jsonp的元素*/
     script.parentNode.removeChild(script);  /*从这个元素的父元素中删除这个元素*/
     $('ol').html('');  /* 设置有序列表的值为空*/
     var da=data.g;   /* 获取搜索的结果*/
  if(da){                     /*结果存在的话就将结果放到li标签中*/
   da.forEach(function(item,index){  
     $('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol');
    })
    }
}


     /* 判断键盘是否按下*/
   $('input:text').keyup(function(){
      var wd=$(this).val();  /* 输入框的值*/
      if(wd==''){           /*如果值是空,那么就隐藏,否则显示*/
          $('ol').css('display','none');
          $('ol').css('zIndex',-10);  
      }else{
          $('ol').css('display','block');
       $('ol').css('zIndex',20);
      }
         getlist(wd);
  });
   </script>

可以看到,搜索结果已经出来了,而且有序列表下的”li”标签也都对应的生成了。

3).给选项标记序列

我们可以看到,结果终于出来,但是我想给它个序列号,这样就可以知道搜索结果有多少个了。要设置的标记方式有很多种,可以以数字开头,也可以是大小写字母或者罗马时间。在这里我选择数字,很简单。

终于非常完美的实现了这一功能,是不是很惊艳了,赶快去试下吧。

4).搜索刷新

看到这里相信大家应该都知道这个功能已经算是完成了,我们只需要随便点击哪个li标签都可以访问到相应的页面。于是,我决定添加一个刷新的功能,属于重连服务器的那种刷新:

<span onclick='window.location.reload()'>search</span> 点击后立即刷新

【三、项目总结】

总的来说,对于初学者小白是个很不错的练手项目,希望大家能从中有所收获。

需要源码的小伙伴,后台回复“搜索引擎”四个字即可获取。

——————- End ——————-
看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

手把手教你不用客户端也能轻松下载音乐视频

/1 前言/

今天要跟大家分享一些非常实用的技巧,不涉及到代码。当然你若是想把这些实现的步骤简化的话,用代码当然是最好的了。

今天的目的很简单,就是在不用安装客户端的情况下把酷我音乐里的音乐下载下来。

 

/2 涉及的工具/

1、360浏览器、谷歌浏览器等。

 

/3 方法一/

1、打开浏览器,并输入酷我音乐,来到酷我听歌页面。

2、输入我平时最喜欢听的歌 just like this ,得到如下图。

3、我们都知道,当我们在网上听歌的时候,想要把它保存下来的话了,他会弹出个对话框,诸如下图这样。

很显然,这不是我们想要的,因为太麻烦了。我们得找个简单点的方法,这样才符合我们的风格。

4、既然说到这了,那么该怎么处理这个问题了,毕竟大话已经说出去了,哈哈哈。我们都知道,html里面播放音频的标签是audio,所以我们先试试看能不能搜索到这个标签的位置,老样子,F12,如图:

5、通过自己不懈的努力,还真就找到了,哈哈哈哈,看图就知道。

6、接下来就很简单了,直接复制地址到浏览器就可以播放并且下载了,不信你看。

 

/4 方法二/

上面提及的还只是第一种方法,下面介绍的这种方法更为巧妙。

1、我们都知道刚下载的文件为mp3后缀,所以我们是不是可以搜索mp3后缀的相关字段了。废话少说,操起键盘直接干。

首先我们打开network 分析网络请求状况。如图:

2、经过查找后我们发现第二个很符合我们的要求,来看下。

3、我们点击第二项,他就会切换到他的当前状态了,如图所示。

4、仍然选中右键转到链接地址,如下图所示。

5、可以看到界面已经出来了,完美解决。

 

/5 拓展/

日常生活中,我们还可能会遇到视频观看无法下载的情况,以看点快报为为例。

发现Ctrl +F搜索这项技能很管用啊,哈哈啊哈,当然也可以network,这里不在累述,希望大家通过此文能有所收获。

 

/6 小结/

本文基于网页结构,给大家介绍了不需要在本地进行写代码,即可获取音频网站上的音频和视频方法。当然了,这种方法并不是放之四海而皆准的,还是存在较多局限性的。不过日后在网页上遇到自己想要下载的音频或者视频的话,不妨用此方法小试牛刀?

——————- End ——————-
看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

往期精彩文章推荐:

网页结构的简介和Xpath语法的入门教程

相信很多小伙伴已经听说过Xpath,之前小编也写过一篇关于Xpath的文章,感兴趣的小伙伴可以戳这篇文章如何利用Xpath抓取京东网商品信息以及Python网络爬虫四大选择器(正则表达式、BS4、Xpath、CSS)总结。今天小编继续给大家介绍一些Xpath知识点,希望对大家的学习有帮助。

1、Xpath让我们可以使用一种类似于Windows下的文件路径的方式,让我们可以定位到HTML或者XML结构中的具体元素。Xpath本身包含标一些准函数库,可以让我们的Xpath语法更加强大。

网页结构的简介和Xpath语法的入门教程

2、在HTML结构中,有一定的层级关系,主要的关系包括:父节点、子节点、同胞节点(兄弟节点)、先辈节点、后代节点。

网页结构的简介和Xpath语法的入门教程

一般的,像类似于这种结构,称之为一个节点。如上图,根据层次关系,我们可以知道节点是的父节点,相应的,节点是节点的子节点。同胞节点又叫兄弟节点,一般的处于同级层次的节点叫同胞节点,如上图中的节点和第一个

节点、177~181行的

标签都是属于同胞节点。先辈节点又叫祖先节点,一般的,一个节点的上层以上的节点均称为先辈节点,所以父节点也是属于先辈节点的一种。基于此,我们又可以称节点是的先辈节点。相对应的,一个节点的下层以下的节点均称为后代节点,所以子节点也是属于后代节点的一种。基于此,我们又可以称节点是节点的后代节点。

3、理解这些节点之间的关系之后,可以方便我们更好的理解Xpath语法,下表是部分常用的Xpath语法。

网页结构的简介和Xpath语法的入门教程

这里特别强调“/”和“//”的区别,“/”一般代表的某个元素的子节点,而不是全部的后代节点;而“//”一般代表的某个元素的后代节点,范围比“/”代表的要更加广泛一些。@符号后边时常跟着class,代表选取名为class属性的节点,比较常见。

4、下面针对具体的网页源码,让大家了解一下网页结构。

网页结构的简介和Xpath语法的入门教程

如上图中的红色框框中,class为属性,而等于号后边的“grid-5”即为属性值,有的时候节点内不只是一个属性,如上图中的196行中,就有两个属性。

5、为了更加方便的定位到div或者其他节点下的标签,我们需要继续进一步的进行定位锁定,下表是部分常用的Xpath语法。

网页结构的简介和Xpath语法的入门教程

掌握了Xpath语法知识之后,我们就可以通过Xpath语法来进行编写Xpath表达式,以提取网页上的目标数据。

网页结构的简介和Xpath语法的入门教程

千里之行,始于足下。如果想学好Xpath,更是需要勤加使用,下一篇文章将给大家介绍Xpath在Scrapy爬虫项目中的使用。

——————- End ——————-

往期精彩文章推荐:

看完本文有收获?请转发分享给更多的人

Python爬虫与数据挖掘

入群请在微信后台回复【入群】